let b_image;

let slider_r = 127;

let slider_g = 127;

let slider_b = 127;

let slider_alpha = 127;

let slider_lum = 127;

let bg;

​

function preload() {

  // a_image = loadImage('images/Eye_Small.jpg');

  a_image = loadImage('images/PPC_3141.JPG');

  b_image = loadImage('images/PPC_3141-2.JPG');

}

​

function setup() {

  // bg = loadImage('images/Eye_Small.jpg');

  bg = loadImage('images/PPC_3141-2.JPG');

  // bg = loadImage('images/PPC_3141.JPG');

  createCanvas(512, 512);

​

  // make canvas the resolution of webcam

  pixelDensity(1);

​

  create_ui();

​

}

​

function draw() {

​

  background(bg);

  // background(255);

  // Prepare canvas pixels

​

​

  a_image.loadPixels();

  b_image.loadPixels();

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

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

      let index = (y + x * width) * 4;

​

​

      let r = a_image.pixels[index + 0];

      let g = a_image.pixels[index + 1];

      let b = a_image.pixels[index + 2];

​

      // get average brightness 

      let br = (r + b + g) / 3;

​

      if (br < slider_alpha) {

        a_image.pixels[index + 0] = b_image.pixels[index + 0];

        a_image.pixels[index + 1] = b_image.pixels[index + 1];

        a_image.pixels[index + 2] = b_image.pixels[index + 2];

        a_image.pixels[index + 3] = random(0, 255);

​

      } else {

​

        a_image.pixels[index + 0] = slider_r;

        a_image.pixels[index + 1] = slider_g;

        a_image.pixels[index + 2] = slider_b;

        a_image.pixels[index + 3] = random(5, slider_lum);

        // a_image.pixels[index + 3] = slider_alpha;

      }

    }

  }

  a_image.updatePixels();

  image(a_image, 0, 0);

}

​

​

function create_ui() {

  createP();

​

  // createSlider(min, max, [value], [step])

  createSpan('RED').style('font-size', '20px').style('color:cyan');

  let = slider1 = createSlider(0, 255, 127);

  slider1.input(function() {

    slider_r = slider1.value();

  });

  createP();

​

  // createSlider(min, max, [value], [step])

  createSpan('GREEN').style('font-size', '20px').style('color:cyan');

  let = slider2 = createSlider(0, 255, 127);

  slider2.input(function() {

    slider_g = slider2.value();

  });

  createP();

​

  // createSlider(min, max, [value], [step])

  createSpan('BLUE').style('font-size', '20px').style('color:cyan');

  let = slider3 = createSlider(0, 255, 127);

  slider3.input(function() {

    slider_b = slider3.value();

  });

  createP();

​

  // createSlider(min, max, [value], [step])

  createSpan('NOISE').style('font-size', '20px').style('color:cyan');

  let = slider4 = createSlider(5, 250, 128);

  slider4.input(function() {

    slider_lum = slider4.value();

  });

​

  createP();

​

  // createSlider(min, max, [value], [step])

  createSpan('ALPHA').style('font-size', '20px').style('color:cyan');

  let = slider5 = createSlider(15, 250, 128);

  slider5.input(function() {

    slider_alpha = slider5.value();

  });

}