​

let theKennImage;

let theKennPixels = [];

​

let allKennImage;

let allKennPixels = [];

​

let bgPixels = [];

​

let threshSlider;

​

let slider;

​

let mainWidth = 1280;

let mainHeight = mainWidth * 3 / 4; 

​

// let mainWidth;

// let mainHeight; 

​

function preload() {

  theKennImage = loadImage(

    "ad_1280-27.png"

  );

  allKennImage = loadImage(

    "ad_1280-26.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();

    // mainHeight = windowHeight; 

    //  mainWidth = mainHeight / 3 * 4;

  myVideo = createCapture(VIDEO);

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

    myVideo.size(mainWidth, mainHeight); 

  myVideo.hide();

   // allKennImage.size(mainWidth, mainHeight); 

   //   theKennImage.size(mainWidth, mainHeight); 

}

​

​

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-((windowWidth/2)-(mainWidth/2)), 0, mainWidth, mainHeight);

  pop();

}

​