​

function setup() {

  createCanvas(512, 512);

  //pixelDensity(1);

  img1 = loadImage("redGradient.jpg");

  img2 = loadImage("greenGradient.jpg");

  img3 = loadImage("blueGradient.jpg");

  fin = getBlended(img1, img2, img3);

}

​

function getBlended(i1, i2, i3) {

 //assumes all images are the same dimensions

  let out = createImage(i1.width, i1.height);

  out.loadPixels();

  i1.loadPixels();

  i2.loadPixels();

  i3.loadPixels();

  let y = 0, x = 0, index = 0, r = 0, g = 0, b = 0, a = 0;

  for(; y < i1.height; y++) {

    for(; x < i1.width; x++) {

      index = (x + y * i1.width) * 4;

      r = floor((i1.pixels[index] + i2.pixels[index] + i3.pixels[index]) / 3);

      g = floor((i1.pixels[index+1] + i2.pixels[index+1] + i3.pixels[index+1]) / 3);

      b = floor((i1.pixels[index+2] + i2.pixels[index+2] + i3.pixels[index+2]) / 3);

      a = floor((i1.pixels[index+3] + i2.pixels[index+3] + i3.pixels[index+3]) / 3);

      out.pixels[index] = r;

      out.pixels[index + 1] = g;

      out.pixels[index + 2] = b;

      out.pixels[index + 3] = a;

    }

  }

  out.updatePixels();

  return out;

}

​

function draw() {

  //background(220);

  //text("noooooo! it doesn't work", width / 2, height / 2);

  image(fin, 0, 0, 512, 512);

  //image(img3, 0, 0)

}