animation example (simplified)

  3.11.2024

*/

​

// global variables

var x = 200;

var y = 200;

var speedX = 2;

var speedY = 2;

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

​

function setup() {

  createCanvas(500, 400);

  // randomize colors

  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);

  // animate circle position

  x += speedX;

  y += speedY;

  // bounce off right and left sides

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

    speedX *= -1;

  }

  // bounce off top and bottom

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

    speedY *= -1;

  }

  // change color every 60 frames

  if (frameCount % 60 == 0) {

    r = random(0, 255);

    g = random(0, 255);

    b = random(0, 255);

  }

}

​