var cHour;

var cMinute;

var cSecond;

var rValue;

var gValue;

var bValue;

var rX;

var rY;

var rSx = 3;

var rSy = 3;

var bX;

var bY;

var bSx = 3;

var bSy = 3;

var gX;

var gY;

var gSx = 3;

var gSy = 3;

​

function setup() {

  createCanvas(600,600);

  capture = createCapture(VIDEO);

  capture.hide(); 

  rX = random(width);

  rY = random(height);

  gX = random(width);

  gY = random(height);

  bX = random(width);

  bY = random(height);

}

​

function draw() {

  background(0); // black bg

​

  cHour = hour();

  cMinute = minute();

  cSecond = second();

  rValue = map(cHour,0,23,0,255);

  gValue = map(cMinute,0,59,0,255);

  bValue = map(cSecond,0,59,0,255);

​

  blendMode(DIFFERENCE);

  fill(255);

  noStroke();

  rect(0,0,width,height);

  // webcam

  let s = 1; // scale - for proportions

  imageMode(CENTER);

  image(capture, width/2,height/2, capture.width * s, capture.height * s);

  noStroke();

    fill(rValue,gValue,bValue,100);

  rect(0, 0, width, height);

  filter(DILATE)

  fill(rValue,0,0);

  ellipse(rX,rY,random(50,200));

  if(rX >= width || rX < 0)

    {

      rSx = rSx * -1;

    }

  if(rY >= width || rY < 0)

    {

      rSy = rSy * -1;

    }

  rX += rSx;

  rY += rSy;

    fill(0,gValue,0);

  ellipse(gX,gY,random(50,200));

  if(gX >= width || gX < 0)

    {

      gSx = gSx * -1;

    }

  if(gY >= width || gY < 0)

    {

      gSy = gSy * -1;

    }

  gX += gSx;

  gY += gSy;

  fill(0,0,bValue);

  ellipse(bX,bY,random(50,200));

  if(bX >= width || bX < 0)

    {

      bSx = bSx * -1;

    }

  if(bY >= width || bY < 0)

    {

      bSy = bSy * -1;

    }

  bX += bSx;

  bY += bSy;

}

​