var vScale = 10; //tones down the video so not as demanding

var count; //internal draw counter to generate random events

var mySound;

​

function preload() {

  mySound = loadSound("tv-static-05.mp3");//loads sound into the program

}

​

function setup() {

  getAudioContext().suspend();

  createCanvas(1366, 768);

  pixelDensity(1); //allows any screen to have the same pixel ratio

  frameRate(15); //lowers framerate to increase preformance

  video = createCapture(VIDEO); // starts video capture

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

  count = 0;

  video.hide(); //hides actual webcam footage

}

function draw() {

  if(mouseIsPressed)

    userStartAudio();

  mySound.play();//plays the sound

  var colors = [1, 2, 3, 4, 5, 6]; //generates random number to pick background color

  var rand = random(colors); //only three colors but neon green is heavily favored

  if (rand == 1) {

    background(1, 255, 1);

  } else if (rand == 2) {

    background(1, 255, 1);

  } else if (rand == 3) {

    background(1, 255, 1);

  } else if (rand == 4) {

    background(255, 1, 1);

  } else if (rand == 5) {

    background(1, 1, 255);

  } else {

    background(1, 255, 1);

  }

  video.loadPixels(); //loads pixels from webcam into an array

  count++;//keeps track how many times ran through loop

  rectMode(CENTER); //changes rectangles so input is center cords not top left

  for (var y = 0; y < video.height; y++) { // double for loop to run through the canvas

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

      var index = (video.width - x + 1 + (y * video.width)) * 4; //calculates where the pixel is using the vScale and pixel array

      var r = video.pixels[index + 0]; //transfers colors from the webcam to the canvas

      var g = video.pixels[index + 1]; //"

      var b = video.pixels[index + 2]; //"

      var gray = (r + g + b) / 3; //grayscale calulation

      noStroke();

      if (count % 53 == 0) { //there are no outside methods because it only caused problems and preformance issues, easier to just do all changes here

        fill(r, g, b); //is the normal screen size with normal colors

        vScale = 10;

      } else if (count % 41 == 0) { //used only prime numbers so it wouldn't get as many hits

        vScale = 5; //makes video smaller  

        fill(r, g, b); //makes colors normal 

      } else if (count % 83 == 0) { //zooms in video 

        vScale = 20;

        //            } else if (count & 117 == 0) { I have not figured this part out yet and why it doesn't work

        //                fill(255);

        //                textSize(32);

        //                text('ERROR', 320, 240);

        //                fill(0);

        //                rect(320, 240, 100, 100);

      } else { //catches all other numbers of count

        var back = [1, 2];

        var temp = random(back); //makes pixels either grayscale or normal

        if (temp == 1) {

          fill(r, g, b);

        } else {

          fill(gray);

        }

      }

      rect(x * vScale, y * vScale, vScale, vScale); // draws the pixels

    }

    if (count % 97 == 0) { //going to do more inside first loop outside second

      fill(57, 255, 20);

      rect(10 * vScale, 12 * vScale, width, 10); //draws a green rectangle

    }

  }

}