let capture;

let R = 0, G = 0, B = 0;

let targetR = 0, targetG = 0, targetB = 0;

​

function setup() {

  createCanvas(840, 480, WEBGL);

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

  frameRate(30);

  angleMode(DEGREES);

}

​

function draw() {

  background('black');

  // Reset the camera

  camera(0, 0, (height/2) / tan(30), 0, 0, 0, 0, 1, 0);

  // Display the video feed

  push();

  translate(-width/2, -height/2, -200);

  texture(capture);

  plane(width/4, height/4);

  pop();

  // Extract color from video

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

  // Update target color

  targetR = red(centerColor);

  targetG = green(centerColor);

  targetB = blue(centerColor);

  // Smooth color transition

  R = lerp(R, targetR, 0.1);

  G = lerp(G, targetG, 0.1);

  B = lerp(B, targetB, 0.1);

  // Display selected color

  push();

  translate(-width/4, -height/4, -100);

  fill(R, G, B);

  noStroke();

  box(width/4, height/4, 10);

  pop();

  // Draw rotating spheres

  drawRotatingSpheres();

}

​

function drawRotatingSpheres() {

  let totalValue = R + G + B;

  let rPercentage = R / totalValue;

  let gPercentage = G / totalValue;

  let bPercentage = B / totalValue;

  drawRotatingSphere(rPercentage, -width/4, height/6, color(255,0,0));

  drawRotatingSphere(gPercentage, 0, height/6, color(0,255,0));

  drawRotatingSphere(bPercentage, width/4, height/6, color(0,0,255));

}

​

function drawRotatingSphere(percentage, x, y, col) {

  push();

  translate(x, y, 0);

  rotateY(frameCount * 2); // Rotate around Y-axis

  let angle = percentage * 360;

  // Background sphere

  noFill();

  stroke(100);

  strokeWeight(2);

  sphere(50);

  // Color arc

  fill(col);

  noStroke();

  rotateY(-frameCount * 2); // Counter-rotate to keep arc facing forward

  arc(0, 0, 100, 100, 0, angle, PIE);

  // Rotating line

  stroke(255);

  strokeWeight(2);

  line(0,0, 50 * cos(angle), 50 * sin(angle), 0);

  pop();

}