# Loading on PImage on top of another

**URL:** <https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752>\
**Category:** Coding Questions\
**Created:** [January 23, 2019, 12:38am UTC](https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752 "2019-01-23T00:38:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cres](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Cres](https://discourse.processing.org/u/Cres)\
**Post date:** [January 23, 2019, 12:38am UTC](https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752/1 "2019-01-23T00:38:54Z")

</div>

Hello

I’m trying to load several images into a single PImage object but I’m having issues with transparancy. Rendering the images directly onto the screen goes flawlessly but I’m trying to “buffer” all the layers that make up a single image into a single PImage object.

I’m trying to do this with PImage.pixels[] but it doesn’t seem to work. Here’s what I have;

```auto
void draw() {
  //background(0);
  PImage base = createImage(70, 80, ARGB);
  drawOver(base, images.get("right_arm1.png"), 40, 7);
  drawOver(base, images.get("right_sleeve_wave1.png"), 40, 26);
  image(base, 0, 0);
  /*image(images.get("right_arm1.png"), 40, 7);
  image(images.get("right_sleeve_wave1.png"), 40, 26);*/
  
}

void drawOver(PImage base, PImage toAdd, int x, int y) {
  int index = (base.width) * y + x;
  for (int i = 0; i < toAdd.height; i++) {
    for (int j = 0; j < toAdd.width; j++) {
      base.pixels[index] = toAdd.pixels[i*toAdd.width + j];
      index++;
    }
    index += base.width-toAdd.width;
  }
}

PImage convert(PImage base) {
  PImage newImg = createImage(base.width, base.height, ARGB);
  for (int i = 0; i < base.pixels.length; i++) {
    if (base.pixels[i] == color(255, 255, 255)) {
      newImg.pixels[i] = color(255, 255, 255, 0);
    } else {
      newImg.pixels[i] = base.pixels[i];
    }
  }
  return newImg;
}

```

convert() is used straight after loading the images to remove whitespace by making them transparant. drawOver() is my way of “buffering” one image into another and the core of it works, just that the result image doesn’t allow for transparancy.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 23, 2019, 1:31am UTC](https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752/2 "2019-01-23T01:31:04Z")

</div>

not tested if that solves your problem,  
but try a structure like

```auto
PImage base;

void setup() {
  size(500,500); 
  base = createImage(70, 80, ARGB);
  drawOver(base, images.get("right_arm1.png"), 40, 7);
  drawOver(base, images.get("right_sleeve_wave1.png"), 40, 26);
}

void draw() {
  background(0);
  image(base, 0, 0);
}

```

as transparency goes to black ( better full color )  
if you draw same picture over, again and again 60 times per sec.

---

<div class="post-metadata">

**Author:** ![Cres](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Cres](https://discourse.processing.org/u/Cres)\
**Post date:** [January 23, 2019, 11:19pm UTC](https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752/3 "2019-01-23T23:19:16Z")

</div>

Tried this, same issue

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 23, 2019, 11:30pm UTC](https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752/4 "2019-01-23T23:30:43Z")

</div>

> [@Cres](#):
>
> right\_arm1.png

Can you share right\_arm1.png and right\_sleeve\_wave1.png for testing?

---

<div class="post-metadata">

**Author:** ![JackWitherell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jackwitherell/32/3361_2.png) [@JackWitherell](https://discourse.processing.org/u/JackWitherell)\
**Post date:** [January 23, 2019, 11:41pm UTC](https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752/5 "2019-01-23T23:41:15Z")

</div>

Hope this isn’t too much of a distraction but why not use [blend()?](https://processing.org/reference/blend_.html)  
 ![blended](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8e1f18a0ba311610ee287fb7c65d08f823afe892.png)

```auto
PImage one,two,three;

void setup(){
  size(200,200);
  one=loadImage("/data/img1.png");
  two=loadImage("/data/img2.png");
  //copy of one
  three=loadImage("/data/img1.png");
  //combine part of two with part of the copy of one
  three.blend(two,20,20,30,30,20,20,30,30,NORMAL);
}

void draw(){
  background(0);
  image(one,30,30);
  image(two,100,30);
  //blended image
  image(three,120,110);
}

```

if you wrap blend() in a function that takes in and returns a PImage you might be able to simplify the function as well.

I should add that there’s a ton of different Blend “Modes”, maybe one will match the exact use case that you want.

They’re a bit confusing, so the best thing to do to try it is to make a bunch of demos and figure out which mode does what.  
`BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN`

The [documentation](https://processing.org/reference/blend_.html) for blend describes what each one does. `OVERLAY` or `NORMAL` might do what you want and keep transparency.

---

<div class="post-metadata">

**Author:** ![Cres](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Cres](https://discourse.processing.org/u/Cres)\
**Post date:** [January 24, 2019, 1:35am UTC](https://discourse.processing.org/t/loading-on-pimage-on-top-of-another/7752/6 "2019-01-24T01:35:26Z")

</div>

Thanks for the responses everyone!

I’ve fixed the issue by using PGraphics as a buffer on which I drew the images before drawing the PGraphics onto the screen and that fixed the transparency issue.

I had looked into blend() but refrained from using it because of the modes.