# Best practice to merge images

**URL:** <https://discourse.processing.org/t/best-practice-to-merge-images/34461>\
**Category:** p5.js\
**Created:** [January 4, 2022, 12:32pm UTC](https://discourse.processing.org/t/best-practice-to-merge-images/34461 "2022-01-04T12:32:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AAAnatoly](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@AAAnatoly](https://discourse.processing.org/u/AAAnatoly)\
**Post date:** [January 4, 2022, 12:32pm UTC](https://discourse.processing.org/t/best-practice-to-merge-images/34461/1 "2022-01-04T12:32:01Z")

</div>

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 -

```auto

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.

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [January 4, 2022, 2:27pm UTC](https://discourse.processing.org/t/best-practice-to-merge-images/34461/2 "2022-01-04T14:27:07Z")

</div>

I would use [tint-function](https://processing.org/reference/tint_.html) to make each image 66% transparent and then add them on top of each other. End result should be pretty similar and pretty fast

---

<div class="post-metadata">

**Author:** ![AAAnatoly](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@AAAnatoly](https://discourse.processing.org/u/AAAnatoly)\
**Post date:** [January 4, 2022, 7:04pm UTC](https://discourse.processing.org/t/best-practice-to-merge-images/34461/3 "2022-01-04T19:04:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [January 5, 2022, 12:15am UTC](https://discourse.processing.org/t/best-practice-to-merge-images/34461/4 "2022-01-05T00:15:31Z")

</div>

> **[reference | p5.js](https://p5js.org/reference/#/p5.Image/blend)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [January 5, 2022, 1:40am UTC](https://discourse.processing.org/t/best-practice-to-merge-images/34461/5 "2022-01-05T01:40:58Z")

</div>

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()](https://p5js.org/reference/#/p5/loadPixels)-[updatePixels()](https://p5js.org/reference/#/p5/updatePixels) is the way to go. It’s significantly faster than using get to access pixels of the image.

[Images and Pixels / Processing.org](https://processing.org/tutorials/pixels) has examples on how to use loadPixels(). It works in p5.js as well.