r: 255,

  b: 0

}

​

var position = 0;

var velocity = 5;

​

var theta = 0

​

function setup() {

  createCanvas(400, 400);

  background(255);

}

​

function draw() {

​

  //circle1

  color.r = map(position, 0, 400, 255, 0);

  color.b = map(position, 0, 400, 0, 255);

​

  fill(color.r, 0, color.b, 100);

  noStroke()

  ellipse(position, 200, 100);

​

  if (position > width || position < 0) {

    velocity = -velocity;

  }

​

  position = position + velocity;

​

  //circle2

  noStroke();

  fill(color.b, 0, color.r, 100);

  ellipse(200, position, 100);

​

  //circle3

  x = 200 * cos(theta) + 200;

  y = 200 * sin(theta) + 200;

​

  ellipse(x, y, 100);

  theta += 1;

​

  //circle4

  x = 100 * cos(theta) + 200;

  y = 100 * sin(theta) + 200;

​

  fill(color.r, 0, color.b, 100);

  ellipse(x, y, 100);

  theta += 1;

​

}