let block=10

​

function setup() {

  createCanvas(480, 480);

  pixelDensity(1);

  video = createCapture(VIDEO);

  video.size(640 / block, 480 / block); //Make sure the video doesn't compress because the canvas size changes.

  video.hide();

  colorMode(HSB); 

}

​

function draw() {

  background(0);

  //Define some variables for the circular border

  let centerX = width / 2;

  let centerY = height / 2;

  let radius = min(width, height) / 2;

  video.loadPixels();

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

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

      var index = (x + y * video.width) * 4;

      let R = video.pixels[index + 0];

      let G = video.pixels[index + 1];

      let B = video.pixels[index + 2];

      var bright = (R + G + B)/3;

      var hueValue = map(bright, 0, 255, 0, 255);

      var w = map(bright, 0, 255, 0, block);

      var sizeVariation = sin((frameCount + x + y) * 0.15) * block / 3 + block / 2;

​

      // Calculate the position of the pixel

      let posX = x * block + (width - video.width * block) / 2;

      let posY = y * block + (height - video.height * block) / 2;

      // Calculate the distance between the pixel point and the center of the circle

      let distanceFromCenter = dist(posX, posY, centerX, centerY);

​

      // Make sure that only pixels inside the center of the circle are drawn

      if (distanceFromCenter < radius) {

        noStroke();

        fill(hueValue, 255, 255);

        ellipse(posX, posY, w + sizeVariation, w + sizeVariation);

      }

    }

  }

​

  // Draw a circular border

  noFill();

  noStroke();

  ellipse(centerX, centerY, radius * 2, radius * 2);

  updatePixels();

}