LAB Week 08: Web Cam Pixelation

// This code builds upon this code https://editor.p5js.org/cacheflowe/sketches/aLybN_TdB

​

let capture; //creating a variable for webcam 

​

function setup() { //function set up

  createCanvas(320, 240); //creates canvas 

  // specify multiple formats for different browsers

  capture = createCapture({ //assigning value to webcam

    audio: false, //turning off the audio

    video: { width: 320, height: 240 } //setting video width and height

  }, function() { //creating a function

    console.log('capture ready.'); //letting us know that webcam works 

  });

  capture.hide(); //hiding the raw camera footage and putting the camera on canvas 

  noStroke(); //hide outlines of shapes

  fill(150, 222, 209); //color shapes black

} //closes the function set up

​

function draw() { //function draw

  background(167, 199, 231); //colors background white

  capture.loadPixels(); //makes the webcam video into pixels loading in pixel data

  const stepSize = 5; //create stepSize variable

  for (let y = 0; y < height; y += stepSize) { //for loop controls y value

    for (let x = 0; x < width; x += stepSize) { //second for loop controls x value

      const i = y * width + x; //create i variable

      const darkness = (255 - capture.pixels[i * 4]) / 255; //determines how dark a pixel is

      const radius = stepSize * darkness; //determines how big the cricle is going to be

      rectMode (CENTER);

      rect(x, y, radius, radius); //drawing the circle 

    } //closes second set of loops

  } //closes first set for loops

} //closes the function draw

​