Circuito Webcam

/******************

Code by Vamoss

Original code link:

https://openprocessing.org/sketch/2207942

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

var colors = ["#4A253F", "#900C3F", "#FF5733", "#FFC30F", "#1AC7C4", "#1AC7C4"];

​

//camera

const camWidth = 320;

const camHeight = 240;

const SCALE = 3;

let cam;

​

//grid

const GRID_UNITS = 100;

const GRID_SIZE = Math.floor(camWidth / GRID_UNITS);

var grid;

​

function setup() {

  colors.forEach((str, i) => colors[i] = color(str));

  createCanvas(camWidth * SCALE, camHeight * SCALE);

  //cam

  cam = createCapture(VIDEO);

  cam.size(camWidth, camHeight);

  cam.hide();

}

​

function draw() {

  background(0);

  scale(SCALE);

  startGrid();

  noFill();

  strokeWeight(GRID_SIZE/6);

  grid.shapes.forEach(shape => {

    stroke(shape.color);

    beginShape();

    shape.forEach(coord => vertex(coord.x, coord.y));

    endShape(CLOSE);

  });

}

​

function startGrid(){

  const number_of_types = colors.length - 1;

  const maxColor = 765;// 255*3

  var values  = []; 

  cam.loadPixels();

  for(var y = 0; y < camHeight; y += GRID_SIZE) {

      for(var x = 0; x < camWidth; x += GRID_SIZE) {

        const i = ((y * camWidth) + (camWidth-x)) * 4;

        const rgb = cam.pixels[i] + cam.pixels[i + 1] + cam.pixels[i + 2];

        const index = floor(rgb / maxColor * number_of_types);

        values.push(index);

      }

  }

  grid = new Grid(GRID_SIZE, camWidth, camHeight, number_of_types, values);

  //shrink polygon

  grid.shapes = grid.shapes.map(shape => grid.shrinkPolygon(shape, GRID_SIZE/8));

  //grid.shapes = grid.shapes.filter(shape => shape.length > 6);

  //add colors

  grid.shapes.forEach(shape => {

    shape.color = colors[shape.number];

  })

}