x: 0,

  y: 0,

  d: 25

}

var circleObject2 = {

  x: 599,

  y: 0,

  d: 25

}

var circleObject3 = {

  x: 0,

  y: 599,

  d: 25

}

var circleObject4 = {

  x: 599,

  y: 599,

  d: 25

}

​

var col1 = {

  r: 50,

  g: 50,

  b: 50

}

var col2 = {

  r: 10,

  g: 10,

  b: 10

}

var col3 = {

  r: 100,

  g: 100,

  b: 100

}

var col4 = {

  r: 225,

  g: 225,

  b: 225

}

​

function setup() {

  createCanvas(600, 600);

}

​

​

function draw() {

  background(220);

  frameRate(10);

​

  col1.r = random(0, 255);

  col1.g = random(0, 255);

  col1.b = random(0, 255);

​

  col2.r = random(0, 255);

  col2.g = random(0, 255);

  col2.b = random(0, 255);

​

  col3.r = random(0, 255);

  col3.g = random(0, 255);

  col3.b = random(0, 255);

​

  col4.r = random(0, 255);

  col4.g = random(0, 255);

  col4.b = random(0, 255);

​

  col1.r = random(0, 255);

  col1.g = random(0, 255);

  col1.b = random(0, 255);

​

  circleObject1.x = random(0, 299)

  circleObject2.x = random(300, 599)

  circleObject3.x = random(0, 299)

  circleObject4.x = random(300, 599)

​

  noStroke()

  circle(circleObject1.x, circleObject1.y, circleObject1.d = circleObject1.d + 10);

​

  if (mouseIsPressed) {

    fill(0, 0, 255);

  } else {

    fill(col1.r, col1.g, col1.b);

  }

​

  circle(circleObject2.x, circleObject2.y, circleObject2.d = circleObject2.d + 10);

​

  if (mouseIsPressed) {

    fill(255, 0, 0);

  } else {

    fill(col2.r, col2.g, col2.b);

  }

​

  circle(circleObject3.x, circleObject3.y, circleObject3.d = circleObject3.d + 10);

​

  if (mouseIsPressed) {

    fill(0);

  } else {

    fill(col3.r, col3.g, col3.b);

  }

​

  circle(circleObject4.x, circleObject4.y, circleObject4.d = circleObject4.d + 10);

​

  if (mouseIsPressed) {

    fill(0, 255, 0);

  } else {

    fill(col4.r, col4.g, col4.b);

  }

​

​

}