​

​

​

​

let video;

let vScale = 20;

​

// array of buttons

let buttonsArray = [];

​

//for loop variables

let sizeButton = vScale + 1;

let startingPoint = vScale / 2;

let spacing = vScale;

let speed = 9;

​

function setup() {

​

  createCanvas(800, 600);

  pixelDensity(1);

  video = createCapture(VIDEO);

  video.size(width / vScale, height / vScale);

  //console.log(video.width);

​

  rectMode(CENTER);

​

  // Create an array of buttons objects to fill the screen

  // columns

  for (let columns = startingPoint; columns < height; columns += spacing) {

    // rows

    for (let row = startingPoint; row < width; row += spacing) {

      // parameters: x, y, size

      buttonsArray.push(new Buttons(row, columns, sizeButton, speed));

    }

  }

    //let instructions = createElement('h2', 'Click and drag mouse over the circles');

}

​

function draw() {

  background(51);

​

  video.loadPixels();

  loadPixels();

​

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

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

​

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

      //let i = (video.width - x + 1 + (y * video.width)) * 4

​

      let r = video.pixels[i + 0];

      let g = video.pixels[i + 1];

      let b = video.pixels[i + 2];

      fill(r, g, b);

      noStroke();

​

      ellipse(x * vScale + startingPoint, y * vScale + startingPoint, vScale, vScale);

​

    }

  }

​

​

  for (i = 0; i < buttonsArray.length; i++) {

​

    buttonsArray[i].move();

    buttonsArray[i].blackCircle();

​

    buttonsArray[i].button();

​

​

  }

​

}