Example 1 - Basic Set-up

Questions:

• Try this code. Why does the color keep changing?
• What do the setup() and draw() functions do?

Answer:

The setup() function runs once when you run the code and can be used for some basic sketch setup, such as adding a canvas (certain dimension of pixels to work within on the webpage) and adding a background to the canvas.

The draw() function runs in a loop (over and over again once the code is run) and can be used to incorporate interactivity and animation.

The color is changing in the example because everytime the draw() function runs, the random() functions re-run and pull new numbers as arguments for fill(). This means that the color will constantly change. If you wanted it to just change colors each time you run the program, you’d put that line of code in the setup() function instead.

Example 2 - Frame by frame movement

Questions:

• Why does the circle that moves leave a ‘trail’? Try to remove this trail
• Try changing the speed of the circle as it moves across the screen
  • —> Explain how you did this on your student page

Answer:

The circle is leaving a trail because every time the draw() function runs, it draws a circle. Since we’re using some basic math (x=x+1) for the x position argument in the ellipse() function, each time the draw() loop runs, it will ADD 1 pixel to the x position of the ellipse and draw another one. You can remove this trail by moving the background function to the draw loop, before the ellipse function. By doing this, each time the draw() function loops, it will first draw the background, THEN the newest ellipse. The trail is still being drawn, the background is just covering it up each time it loops. See below:

let x = 0;

function setup() {
	createCanvas(500, 500)

}

function draw() {
  background(100);  
  ellipse(x, height/2, 20, 20);
  x = x + 1;
}