Best practice to merge images

p5.js
1

Hello everyone. I am trying to merge 3 pictures into 1. Right now I am loading their pixels, getting the average colour of each pixel and simply putting that pixel back on the screen, like this -


img_one = loadImage(rand1);
img_two = loadImage(rand2);
img_three = loadImage(rand3);

  img_one.loadPixels();
  img_two.loadPixels();
  img_three.loadPixels();


for (let y = 0; y <= img_one.height; y++) {
    for (let x = 0; x <= img_one.width; x++) {

      let avg_red = (red(img_one.get(x, y)) + red(img_two.get(x, y)) + red(img_three.get(x, y)) ) / 3;
      let avg_green = (green(img_one.get(x, y)) + green(img_two.get(x, y)) + green(img_three.get(x, y)) / 3;
      let avg_blue = (blue(img_one.get(x, y)) + blue(img_two.get(x, y)) + blue(img_three.get(x, y)) / 3;
      stroke(avg_red, avg_green, avg_blue);
      point(x, y);
    }
  }

It works just fine (even though there’s some contract which is getting lost along the process) but I felt that this approach and solution are quite cumbersome and quite pricey, in terms of resources… So I was wondering if there’s any other approach in combining X images together rather than actually looping through all their pixels and getting the average colors.

Thanks in advance.

2

I would use tint-function to make each image 66% transparent and then add them on top of each other. End result should be pretty similar and pretty fast

1 Like
3

Thanks!
I played with tint before I chose the above approach… tint() gives a much more flat result, not something I was looking for, aesthetically speaking.
Maybe I could have fine-tuned tints() parameters a bit more to achieve that, but sadly - no success yet.

4
5

As @hotfooted pointed you can also play with blend modes. Normal is probably not the best blend mode one for this case. Add might give better results.

If you want to play with pixels then loadPixels()-updatePixels() is the way to go. It’s significantly faster than using get to access pixels of the image.

Images and Pixels / Processing.org has examples on how to use loadPixels(). It works in p5.js as well.