​

​

//-----------VAR CIRCLE1------------

var x = 200;

var y = 200;

var speedX = 5;

var speedY = 5;

var r1, g1, b1; //declare color values

​

//-----------VAR CIRCLE 2 -----------

var a = 100;

var c = 100;

var speedA = 2;

var speedC = 2;

var r2, g2, b2; //declare color values

​

//-----------VAR CIRCLE 3 ------------

var m = 300;

var n = 300;

var speedM = 10;

var speedN = 10;

var r3, g3, b3; //declare color values

​

//-----------VAR CIRCLE 4 ------------

var p = 50;

var q = 350;

var speedP = 3;

var speedQ = 3;

var r4, g4, b4; //declare color values

​

//-----------VAR CIRCLE 5 ------------

var u = 400;

var v = 100;

var speedU = 7;

var speedV = 7;

var r5, g5, b5; //declare color values

​

//-----------VAR CIRCLE 6 ------------

var d = 350;

var e = 200;

var speedD = 4;

var speedE = 4;

var r6, g6, b6; //declare color values

​

function setup() {

  createCanvas(500, 400);

 background(255, 255, 153); // light yellow background

  noStroke()

  r1 = random(0, 255);

  g1 = random(0, 255);

  b1 = random(0, 255);

  r2 = random(0, 255);

  g2 = random(0, 255);

  b2 = random(0, 255);

  r3 = random(0, 255);

  g3 = random(0, 255);

  b3 = random(0, 255);

  r4 = random(0, 255);

  g4 = random(0, 255);

  b4 = random(0, 255);

  r5 = random(0, 255);

  g5 = random(0, 255);

  b5 = random(0, 255);

  r6 = random(0, 255);

  g6 = random(0, 255);

  b6 = random(0, 255);

 }

​

function draw() {

  //background(220);

  //--------CIRCLE1:

  fill(r1, g1, b1);

  circle(x, y, 100);

  noStroke()

  x += speedX;

  y += speedY;

  //---------CIRCLE2:

  fill(r2, g2, b2);

  circle(a, c, 50);

  noStroke();

  a += speedA;

  c += speedC;

​

  //----------CIRCLE3:

  fill(r3, g3, b3);

  circle(m, n, 50);

  noStroke();

  m += speedM;

  n += speedN;

​

  //----------CIRCLE4:

  fill(r4, g4, b4);

  circle(p, q, 80);

  noStroke();

  p += speedP;

  q += speedQ;

  //----------CIRCLE5:

  fill(r5, g5, b5);

  circle(u, v, 60);

  noStroke();

  u += speedU;

  v += speedV;

  //----------CIRCLE6:

  fill(r6, g6, b6);

  circle(d, e, 70);

  noStroke();

  d += speedD;

  e += speedE;

  //-------------//-------------------------------

  //CIRCLE1 MOVEMENT:

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

    speedX *= -1;

  } 

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

    speedY *= -1;

  }

  //CIRCLE2 MOVEMENT:

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

    speedA *= -1;

  } 

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

    speedC *= -1;

  }

  //CIRCLE3 MOVEMENT:

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

    speedM *= -1;

  } 

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

    speedN *= -1;

  }

  //CIRCLE4 MOVEMENT:

  if (p + 40 > width || p - 40 < 0) {

    speedP *= -1;

  } 

  if (q + 40 > height || q - 40 < 0) {

    speedQ *= -1;

  }

  //CIRCLE5 MOVEMENT:

  if (u + 30 > width || u - 30 < 0) {

    speedU *= -1;

  } 

  if (v + 30 > height || v - 30 < 0) {

    speedV *= -1;

  }

  //CIRCLE6 MOVEMENT:

  if (d + 35 > width || d - 35 < 0) {

    speedD *= -1;

  } 

  if (e + 35 > height || e - 35 < 0) {

    speedE *= -1;

  }

  //-----------------//------------------------- 

  //Animate with modulo

  if (frameCount % 30 == 0) {

    r1 = random(0, 255);

    g1 = random(0, 255);

    b1 = random(0, 255);

    r2 = random(0, 255);

    g2 = random(0, 255);

    b2 = random(0, 255);

    r3 = random(0, 255);

    g3 = random(0, 255);

    b3 = random(0, 255);

    r4 = random(0, 255);

    g4 = random(0, 255);

    b4 = random(0, 255);

    r5 = random(0, 255);

    g5 = random(0, 255);

    b5 = random(0, 255);

    r6 = random(0, 255);

    g6 = random(0, 255);

    b6 = random(0, 255);

  }

}

function mousePressed() {

  // Save the canvas as an image when mouse is pressed

  saveCanvas('myCanvas', 'png');

 }