const WIDTH = 480;

const HEIGHT = 640;

​

const images = [];

​

function preload() {

  for (let i = 1; i < NUM_OF_IMAGES; i += 1) {

    let fileName = 'images/beans'+i+'.JPEG';

    images[i] = loadImage(fileName);

  }

}

function setup() {

  createCanvas(WIDTH, HEIGHT);

  for (let i = 1; i < NUM_OF_IMAGES; i += 1) {

    images[i].resize(WIDTH, HEIGHT);

  }

}

​

function draw() {

  let average = createImage(WIDTH, HEIGHT);

  average.loadPixels();

  for (let i = 0; i < WIDTH; i += 1) {

    for (let j = 0; j < HEIGHT; j += 1) {

      let sumRed = 0;

      let sumGreen = 0;

      let sumBlue = 0;

      for (let k = 1; k < NUM_OF_IMAGES; k += 1) {

        const color = images[k].get(i, j);

        sumRed += color[0];

        sumGreen += color[1];

        sumBlue += color[2];

      }

      sumRed /= NUM_OF_IMAGES;

      sumGreen /= NUM_OF_IMAGES;

      sumBlue /= NUM_OF_IMAGES;

      average.set(i, j, color(sumRed, sumGreen, sumBlue));

    }

  }

  average.updatePixels();

  image(average, 0, 0);

  noLoop();

}