let capture;

let startColor1;

let startColor2;

let newColor1;

let newColor2;

let c1;

let c2;

​

function setup() {

  createCanvas(400, 400);

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

  startColor1 = color(255,255,255);

  c1 = capture.get (width/2,height/2);

  newColor1 = color (c1[0],c1[1],c1[2]);

  startColor2 = color(0,0,0);

  c2 = capture.get (width-100,height-100);

  newColor2 = color (c2[0],c2[1],c2[2]);

  amt = 1;

}

​

​

​

function draw() {

  let colorTransition1 = (lerpColor(startColor1, newColor1, amt));

  let colorTransition2 = (lerpColor(startColor2, newColor2, amt));

  amt += 0.01;

  if(amt >= 1){

    amt = 0.0;

    startColor1 = newColor1;

    c1 = capture.get (width/2,height/2);

    newColor1 = color (c1[0],c1[1],c1[2]);

    startColor2 = newColor2;

    c2 = capture.get (width-100,height-100);

    newColor2 = color (c2[0],c2[1],c2[2]);

  }

  let gradient = drawingContext.createLinearGradient(

  width/2-200, height/2-200, width/2+200, height/2+200 );

  gradient.addColorStop(0,color(colorTransition1));

  gradient.addColorStop(1,color(colorTransition2));

  drawingContext.fillStyle = gradient;

  noStroke();

  rect (0,0, width, height);

}

​