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

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

let rotX = 0, rotY = 0;

​

function setup() {

  createCanvas(640, 480, WEBGL);

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

  frameRate(30);

  angleMode(DEGREES);

}

​

function draw() {

  background(50);

  // Rotate entire scene based on mouse position

  rotY = map(mouseX, 0, width, -180, 180);

  rotX = map(mouseY, 0, height, 90, -90);

  rotateY(rotY);

  rotateX(rotX);

​

  // Video preview

  push();

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

  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);

  // Smoother color transition

  R = lerp(R, targetR, 0.05);

  G = lerp(G, targetG, 0.05);

  B = lerp(B, targetB, 0.05);

  // Show selected color

  push();

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

  fill(R, G, B);

  noStroke();

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

  pop();

  // Draw rotating circles

  drawRotatingCircles();

}

​

function drawRotatingCircles() {

  let maxValue = max(R, G, B, 1); // Prevent division by zero

  let rPercentage = R / maxValue;

  let gPercentage = G / maxValue;

  let bPercentage = B / maxValue;

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

  drawRotatingCircle(gPercentage, 0, height/4, color(0,255,0));

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

}

​

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

  push();

  translate(x, y, 0);

  // Make the circle always face the camera

  rotateY(-rotY);

  rotateX(-rotX);

  let angle = percentage * 360;

  // Outer circle (always complete)

  noFill();

  stroke(200);

  strokeWeight(10);

  circle(0, 0, 100);

  // Colored arc

  noFill();

  stroke(col);

  strokeWeight(10);

  arc(0, 0, 100, 100, -90, angle - 90);

  // Inner circle (white)

  fill(255);

  noStroke();

  circle(0, 0, 80);

  // Rotating line

  stroke(0);

  strokeWeight(2);

  line(0, 0, 40 * cos(angle - 90), 40 * sin(angle - 90));

  pop();

}

​