Webcam interaction (colour component)

Hi there, I’m working on an interactive webcam design, everything seems to be working okay except I’m stuck on how to get the local colours to reflect what’s on the camera. I’d really appreciate your help!

let video;

function setup() {
  createCanvas(windowWidth, windowHeight);

  // webcam capture (at the size of the window)
  video = createCapture(VIDEO);
  video.size(width, height);

function draw() { 
  let gridSize = int(map(mouseX, 0,width, 15,50));

  // the video has pixels just like an image!
  for (let y=0; y<video.height; y+=gridSize) {
    for (let x=0; x<video.width; x+=gridSize) {
      // at the current position, get the red
      // value (an approximation for brightness)
      // and use it to create the diameter
      let index = (y * video.width + x) * 4;
      let r = video.pixels[index];
      let dia = map(r, 0,255, gridSize,2);
      // draw a circle at the current location
      // using the diameter we calculated
      circle(x+gridSize/2,y+gridSize/2, dia);


I changed topic to p5.js category.

See example here:

Example may be a bit complicated (moving tiles) but I had to sort out color for pixels and learned this recently.


Have fun!


Thank you so much! Your design is really cool :slight_smile:

1 Like