Practice:

1. add a circle

make the circle move from 0 y down (increase y)

​

2. add a circle

make the circle shrink from 100 to smaller (decrease size)

​

3. add a circle, at 0 x, 0 y

make the circle move diagonal (increase x and increase y)

​

4. add a rectangle 

give the rectangle fill (0, 0, 255)

make the rectangle black (decrease 255)

*/

​

function setup() { // start set up

  createCanvas(400, 400);

  noStroke();

  frameRate(12);

} // end set up

​

// STEP 1 (creating a variable)

let rectx=300 // variable for rectangle x position

let rectsize = 20;

let rectmove = 300;

​

function draw() { // on top of the canvas

    background(252, 152, 3);

    ellipse(100, 100, 20, 20);

  // STEP 2 (replace the variable for the right position or width height)

    rect(rectx, 200, 20, 20) // the rectangle that moves

    rect(rectmove, 100, rectsize, rectsize);  // the rectangle that grows

  // STEP 3 (changing the variable value)

    rectx=rectx-1    

    rectsize = rectsize+1

    rectmove = rectmove+1

} // end of drawing

​

​

​

​