// a recreation of the last clock by Ross Cooper and Jussi Angesleva

​

let cam;

let secondsHand, minutesHand, hoursHand; // Graphics for each "hand"

let rotationAngles = { seconds: 0, minutes: 0, hours: 0 };

let trailLayer; // Graphics layer for the trailing effect

let isReady = false;

​

function setup() {

  createCanvas(820, 820);

  cam = createCapture(VIDEO);

  cam.size(256, 192);

  cam.hide();

​

  // Initialize images for each "hand"

  secondsHand = createImage(5, 100); // 100 pixels for seconds

  minutesHand = createImage(5, 100); // 100 pixels for minutes

  hoursHand = createImage(5, 100); // 100 pixels for hours

​

  trailLayer = createGraphics(820, 820);

  trailLayer.background(255, 0); // Transparent background for the trail effect

​

  // Initialize rotation angles based on the current time

  syncWithCurrentTime();

}

​

function draw() {

  background('#FBFBFB');

​

  if (!isReady && frameCount > 5) {

    isReady = true;

  }

​

  if (cam.loadedmetadata && isReady) {

    // Update the video slices for each hand

    updateStretchedImage(secondsHand);

    updateStretchedImage(minutesHand);

    updateStretchedImage(hoursHand);

​

    // Update the angles based on current time

    syncWithCurrentTime();

​

    // Draw each hand with its respective rotation and trailing effect

    drawHand(secondsHand, rotationAngles.seconds, 315); // Radius for seconds

    drawHand(minutesHand, rotationAngles.minutes, 210); // Radius for minutes

    drawHand(hoursHand, rotationAngles.hours, 105);     // Radius for hours

  }

​

  image(trailLayer, 0, 0); // Display the trail layer on the main canvas

}

​

function syncWithCurrentTime() {

  let now = new Date();

  let seconds = now.getSeconds() + now.getMilliseconds() / 1000; // Smooth seconds including milliseconds

  let minutes = now.getMinutes() + seconds / 60;

  let hours = now.getHours() % 12 + minutes / 60;

​

  // Calculate initial rotation angles based on current time

  rotationAngles.seconds = map(seconds, 0, 60, 0, 360) - 90; // Offset for initial position

  rotationAngles.minutes = map(minutes, 0, 60, 0, 360) - 90; // Offset for initial position

  rotationAngles.hours = map(hours, 0, 12, 0, 360) - 90; // Offset for initial position

}

​

function drawHand(handImage, rotationAngle, radius) {

  trailLayer.push();

  trailLayer.translate(width / 2, height / 2);

  trailLayer.rotate(radians(rotationAngle));

  trailLayer.image(handImage, -handImage.width / 2, -radius);

  trailLayer.pop();

}

​

function updateStretchedImage(image) {

  cam.loadPixels();

  image.loadPixels();

  for (let y = 0; y < image.height; y++) {

    let camY = floor(map(y, 0, image.height, 0, cam.height));

    let index = (camY * cam.width + floor(cam.width / 2)) * 4; // Center column index

    for (let x = 0; x < image.width; x++) {

      let i = (x + y * image.width) * 4;

      image.pixels[i] = cam.pixels[index];

      image.pixels[i + 1] = cam.pixels[index + 1];

      image.pixels[i + 2] = cam.pixels[index + 2];

      image.pixels[i + 3] = 255; // Full alpha

    }

  }

  image.updatePixels();

}

​