createCanvas(600, 400);

​

  frameRate(24)

}

​

​

let l_diameter = 24;

​

let r_diameter = 50;

let speed = 1;

​

​

function draw() {

  console.log("current frame: " + frameCount);

  background(245, 245, 255);

  // drawing the left circle

  fill(0,0,255);

  stroke(0,0,255);

  fill(255)

  ellipse(200, 200, l_diameter, l_diameter); // using the l_diameter instead of dimensions

  console.log("l_diameter is: " + l_diameter)

  l_diameter = l_diameter + 1; // adding one to the l_diameter value every time the draw function loops

  if (frameCount % 50 === 0) { // resetting the l_diameter value, why % isntead of >?

    l_diameter = 10;

  }

​

  // drawing the right circle

  fill(0,0, 255);

  ellipse(400, 200, r_diameter, r_diameter);

  // animating the right circle

  r_diameter = r_diameter + speed;

  // using an if statement to reverse the animation

  if (r_diameter >= 100) {

    speed = speed * -1;

  } else if (r_diameter <= 50) {

    speed = speed * -1;

  }

​

}