let col;

let man;

​

function preload() {

  tex = loadImage('image2.jpg');

  col = loadImage('image1.jpg');

  man = loadImage('image3.jpg');

}

​

function setup() {

  createCanvas(400, 400);

  pixelDensity(1);

  tex.resize(width, height);

  col.resize(width, height);

  man.resize(width, height);

}

​

function draw() {

​

  let c = 0

  background(c)

  tex.loadPixels();

  man.loadPixels();

  col.loadPixels();

  loadPixels();

​

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

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

​

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

      let i1 = ((x + 1) + y * width) * 4;

      let i2 = ((x + 2) + y * width) * 4;

​

      if (mouseX > 0 && mouseX < width / 5) {

        //tex

​

        pixels[i + 0] = (tex.pixels[i + 0] * 126 / 255) + (man.pixels[i + 0] * 26 / 255) + (c * 103 / 255)

        pixels[i + 1] = (tex.pixels[i + 1] * 126 / 255) + (man.pixels[i + 1] * 26 / 255) + (c * 103 / 255)

        pixels[i + 2] = (tex.pixels[i + 2] * 126 / 255) + (man.pixels[i + 2] * 26 / 255) + (c * 103 / 255)

​

        pixels[i1 + 0] = (tex.pixels[i1 + 0] * 200 / 255) + (col.pixels[i1 + 0] * 55 / 255)

        pixels[i1 + 1] = (tex.pixels[i1 + 1] * 200 / 255) + (col.pixels[i1 + 0] * 55 / 255)

        pixels[i1 + 2] = (tex.pixels[i1 + 2] * 200 / 255) + (col.pixels[i1 + 0] * 55 / 255)

​

​

        pixels[i2 + 0] = tex.pixels[i2 + 0]

        pixels[i2 + 1] = tex.pixels[i2 + 1]

        pixels[i2 + 2] = tex.pixels[i2 + 2]

​

​

​

        //         tex.pixels[i + 3] = 126;

        //         tex.pixels[i1 + 3] = 200;

        //         tex.pixels[i2 + 3] = 255;

​

        //         man.pixels[i + 3] = 26;

        //         man.pixels[i1 + 3] = 0;

        //         man.pixels[i2 + 3] = 0;

​

        //         col.pixels[i + 3] = 0;

        //         col.pixels[i1 + 3] = 55;

        //         col.pixels[i2 + 3] = 0; 

      } 

//       else if (mouseX > width / 5 && mouseX < width * 2 / 5) {

//         // default

//         tex.pixels[i + 3] = 0;

//         tex.pixels[i1 + 3] = 126;

//         tex.pixels[i2 + 3] = 255;

​

//         man.pixels[i + 3] = 126;

//         man.pixels[i1 + 3] = 255;

//         man.pixels[i2 + 3] = 0;

​

//         col.pixels[i + 3] = 255;

//         col.pixels[i1 + 3] = 0;

//         col.pixels[i2 + 3] = 126;

      // }

    else if (mouseX > width * 2 / 5 && mouseX < width * 3 / 5) {

        //man

        pixels[i + 0] = (tex.pixels[i + 0] * 55 / 255) + (man.pixels[i + 0] * 200 / 255) 

        pixels[i + 1] = (tex.pixels[i + 1] * 55 / 255) + (man.pixels[i + 1] * 200 / 255) 

        pixels[i + 2] = (tex.pixels[i + 2] * 55 / 255) + (man.pixels[i + 2] * 26 / 255) 

​

        pixels[i1 + 0] = man.pixels[i1 + 0] 

        pixels[i1 + 1] = man.pixels[i1 + 1] 

        pixels[i1 + 2] = man.pixels[i1 + 2] 

​

​

        pixels[i2 + 0] = (man.pixels[i2 + 0] * 126 / 255) + (col.pixels[i2 + 0] * 26 / 255) + (c * 103 / 255)

        pixels[i2 + 1] = (man.pixels[i2 + 0] * 126 / 255) + (col.pixels[i2 + 0] * 26 / 255) + (c * 103 / 255)

        pixels[i2 + 2] = (man.pixels[i2 + 0] * 126 / 255) + (col.pixels[i2 + 0] * 26 / 255) + (c * 103 / 255)

//         tex.pixels[i + 3] = 55;

//         tex.pixels[i1 + 3] = 0;

//         tex.pixels[i2 + 3] = 0;

​

//         man.pixels[i + 3] = 200;

//         man.pixels[i1 + 3] = 255;

//         man.pixels[i2 + 3] = 126;

​

//         col.pixels[i + 3] = 0;

//         col.pixels[i1 + 3] = 0;

//         col.pixels[i2 + 3] = 26;

      } 

//       else if (mouseX > width * 3 / 5 && mouseX < width * 4 / 5) {

//         // default

//         tex.pixels[i + 3] = 0;

//         tex.pixels[i1 + 3] = 126;

//         tex.pixels[i2 + 3] = 255;

​

//         man.pixels[i + 3] = 126;

//         man.pixels[i1 + 3] = 255;

//         man.pixels[i2 + 3] = 0;

​

//         col.pixels[i + 3] = 255;

//         col.pixels[i1 + 3] = 0;

//         col.pixels[i2 + 3] = 126;

//       } 

      else if (mouseX > width * 4 / 5 && mouseX < width) {

        //col

        pixels[i + 0] = col.pixels[i + 0] 

        pixels[i + 1] = col.pixels[i + 1] 

        pixels[i + 2] = col.pixels[i + 2] 

​

        pixels[i1 + 0] = (col.pixels[i1 + 0] * 126 / 255) + (man.pixels[i1 + 0] * 26 / 255) + (c * 103 / 255) 

        pixels[i1 + 1] = (col.pixels[i1 + 1] * 126 / 255) + (man.pixels[i1 + 1] * 26 / 255) + (c * 103 / 255) 

        pixels[i1 + 2] = (col.pixels[i1 + 2] * 126 / 255) + (man.pixels[i1 + 2] * 26 / 255) + (c * 103 / 255) 

​

​

        pixels[i2 + 0] = (tex.pixels[i2 + 0] * 55 / 255) + (col.pixels[i2 + 0] * 200 / 255) 

        pixels[i2 + 1] = (tex.pixels[i2 + 1] * 55 / 255) + (col.pixels[i2 + 1] * 200 / 255) 

        pixels[i2 + 2] = (tex.pixels[i2 + 2] * 55 / 255) + (col.pixels[i2 + 2] * 200 / 255) 

//         tex.pixels[i + 3] = 0;

//         tex.pixels[i1 + 3] = 0;

//         tex.pixels[i2 + 3] = 55;

​

//         man.pixels[i + 3] = 0;

//         man.pixels[i1 + 3] = 26;

//         man.pixels[i2 + 3] = 0;

//         col.pixels[i + 3] = 255;

//         col.pixels[i1 + 3] = 126;

//         col.pixels[i2 + 3] = 200;

      } else {

        // default

        pixels[i + 0] = (man.pixels[i + 0] * 120 / 255) + (col.pixels[i + 0] * 120 / 255) + (c * 15 / 255) 

        pixels[i + 1] = (man.pixels[i + 1] * 120 / 255) + (col.pixels[i + 1] * 120 / 255) + (c * 15 / 255) 

        pixels[i + 2] = (man.pixels[i + 2] * 120 / 255) + (col.pixels[i + 2] * 120 / 255) + (c * 15 / 255) 

​

        pixels[i1 + 0] = (tex.pixels[i1 + 0] * 120 / 255) + (man.pixels[i1 + 0] * 120 / 255) + (c * 15 / 255) 

        pixels[i1 + 1] = (tex.pixels[i1 + 1] * 120 / 255) + (man.pixels[i1 + 1] * 120 / 255) + (c * 15 / 255) 

        pixels[i1 + 2] = (tex.pixels[i1 + 2] * 120 / 255) + (man.pixels[i1 + 2] * 120 / 255) + (c * 15 / 255) 

​

​

        pixels[i2 + 0] = (tex.pixels[i2 + 0] * 120 / 255) + (col.pixels[i2 + 0] * 120 / 255) + (c * 15 / 255) 

        pixels[i2 + 1] =  (tex.pixels[i2 + 1] * 120 / 255) + (col.pixels[i2 + 1] * 120 / 255) + (c * 15 / 255) 

        pixels[i2 + 2] =  (tex.pixels[i2 + 2] * 120 / 255) + (col.pixels[i2 + 2] * 120 / 255) + (c * 15 / 255) 

//         tex.pixels[i + 3] = 0;

//         tex.pixels[i1 + 3] = 120;

//         tex.pixels[i2 + 3] = 120;

//         man.pixels[i + 3] = 120;

//         man.pixels[i1 + 3] = 120;

//         man.pixels[i2 + 3] = 0;

//         col.pixels[i + 3] = 120;

//         col.pixels[i1 + 3] = 0;

//         col.pixels[i2 + 3] = 120;

      }

​

​

    }

  }

​

  // tex.updatePixels();

  // man.updatePixels();

  // col.updatePixels();

  updatePixels()

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

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

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

​

}