animation example

  3.11.2024

*/

​

// global variable

var x = 200;

var y = 200;

var speedX = 2;

var speedY = 2;

var r, g, b; // declare color values

​

function setup() {

  createCanvas(500, 400);

  r = random(0, 255);

  g = random(0, 255);

  b = random(0, 255);

  noStroke();

}

​

function draw() {

  background(220);

  fill(r, g, b);

  circle(x, y, 100);

  // x++; // increment by 1

  // x += 2;

  x = x + speedX;

  y += speedY;

  // if (x + 50 > width) {

  //   // x = 200; // reset x

  //   // speed = -2;

  //   speed = speed * -1;

  // }

  // if (x - 50 < 0) {

  //   // speed = 2;

  //   speed *= -1;

  // }

  // if the position of the circle (x)

  // is greater than the canvas width and the radius

  // reverse the speed value, by multiplying by negative 1

  // if the position, minus the radius

  // is smaller than 0 (the left side of the canvs)

  // also reverse speed

  if (x + 50 > width || x - 50 < 0) {

    speedX *= -1;

    // r = random(0, 255);

    // g = random(0, 255);

    // b = random(0, 255);

  }

  // do it again on y

  if (y + 50 > height || y - 50 < 0) {

    speedY *= -1;

    // r = random(0, 255);

    // g = random(0, 255);

    // b = random(0, 255);

  }

  // animate with modulo

  if (frameCount % 60 == 0) {

    r = random(0, 255);

    g = random(0, 255);

    b = random(0, 255);

  }

}

​