​

let theKennImage;

let theKennPixels = [];

​

let allKennImage;

let allKennPixels = [];

​

let bgPixels = [];

​

let threshSlider;

​

let slider;

​

let mainWidth = 1280;

let mainHeight = mainWidth * 3 / 4; 

​

function preload() {

  theKennImage = loadImage(

    "final_screen_a-04.png"

  );

  allKennImage = loadImage(

    //"AFUCKING.png"

    "final_screen_a-03.png"

  );

}

​

function setup() {

​

  // createCanvas(windowWidth, windowHeight);

    createCanvas(mainWidth, mainHeight);

  pixelDensity(1);

  theKennImage.loadPixels();  

  theKennPixels = [...theKennImage.pixels];

  allKennImage.loadPixels();

  allKennPixels = [...allKennImage.pixels];

   slider = createSlider(0, 255, 173);

  slider.style('width', '200px');

   // threshSlider = 190

  threshSlider = slider.value();

  // const bgButton = createButton("lets gooo");

 // bgButton.position(width-70, height-30);

  // bgButton.style('font-size', '15px');

    // bgButton.style('border-style', "none");

  //   bgButton.style('background-color', color(255,255,255,0));

​

  // bgButton.mousePressed(setBG);

​

​

  myVideo = createCapture(VIDEO);

//   myVideo.size(((32*mainHeight)/24), mainHeight); 

    myVideo.size(mainWidth, mainHeight); 

  myVideo.hide();

   // allKennImage.size(mainWidth, mainHeight); 

   //   theKennImage.size(mainWidth, mainHeight); 

}

​

​

function setBG() {

  console.log("hell yeah!!");

​

  myVideo.loadPixels();

​

  bgPixels = [...myVideo.pixels];

   // image(allKennImage, 0, 0, 640, 480);

   // image(theKennImage, 0, 0, 640, 480);

}

​

function draw() {

   background(255);

​

  myVideo.loadPixels();

  threshSlider = slider.value();

 // console.log(threshSlider);

  // image(myVideo, 0, 0, ((32*mainHeight)/24), mainHeight);

 // image(myVideo, 0, 0, width, height);

  const currentPixels = myVideo.pixels;

​

  for (let y = 0; y < mainHeight; y++) {

    for (let x = 0; x < mainWidth; x++) {

​

      const i = (y * mainWidth + x) * 4;

​

        const diffR = abs(currentPixels[i + 0]);

      const diffG = abs(currentPixels[i + 1]);

      const diffB = abs(currentPixels[i + 2]);

​

      const avgDiff = (diffR + diffB + diffG) / 3;

      if (avgDiff < threshSlider) {

​

          currentPixels[i + 0] = allKennPixels[i + 0];

         currentPixels[i + 1] = allKennPixels[i + 1];

         currentPixels[i + 2] = allKennPixels[i + 2];

​

       //    fill(allKennPixels[i + 0], allKennPixels[i + 1], allKennPixels[i + 2], 5);

       //  noStroke();

       // // square(x,y,10)

       //  ellipse(x, y, 10);

      } else {

        currentPixels[i + 0] = theKennPixels[i + 0];

         currentPixels[i + 1] = theKennPixels[i + 1];

         currentPixels[i + 2] = theKennPixels[i + 2];

​

       // fill(theKennPixels[i + 0], theKennPixels[i + 1], theKennPixels[i + 2], 5);

       //  noStroke();

       // // // square(x,y,10)

       //  ellipse(x, y, 10);

​

      }

    }

  }

​

  myVideo.updatePixels();

​

  push();

​

   translate(mainWidth, 0);

  scale(-1, 1);

  //image(myVideo, 0, 0, ((32*mainHeight)/24), mainHeight);

    image(myVideo, 0, 0, mainWidth, mainHeight);

  pop();

}

​