# Overlap multiple PGraphics with copy() function

**URL:** <https://discourse.processing.org/t/overlap-multiple-pgraphics-with-copy-function/30177>\
**Category:** Coding Questions\
**Created:** [May 19, 2021, 9:39pm UTC](https://discourse.processing.org/t/overlap-multiple-pgraphics-with-copy-function/30177 "2021-05-19T21:39:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![afkqs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/afkqs/32/12925_2.png) [@afkqs](https://discourse.processing.org/u/afkqs)\
**Post date:** [May 19, 2021, 9:39pm UTC](https://discourse.processing.org/t/overlap-multiple-pgraphics-with-copy-function/30177/1 "2021-05-19T21:39:04Z")

</div>

Hi there,

I’m trying to overlap multiple fades using the copy() function that was suggested to me in a [previous topic](https://discourse.processing.org/t/directional-halo-on-2d-graphic/29832/2).

My issue is that, as the top layer is fading away, because the shape is copied to the top of the canvas, the bottom colour is somewhat hidden and not as bright as I’d like to be.

How could I overlap the two fades and still keep the colours as bright as possible?

Here’s the code to exemplify better what I mean:

```auto
PGraphics pg;
PGraphics pg2;
PImage screen;
PImage screen2;

void setup() {
  size(400, 400); 
  pg = createGraphics(400, 400);
  pg2 = createGraphics(400, 400);
  frameRate(25);
  
  screen=createImage(width, height, RGB);
  screen2=createImage(width, height, RGB);

  noStroke();
  fill(255);
  imageMode(CENTER);
  ellipseMode(CENTER);
  background(0);
}

void draw() {
  
  // fade 1
  pg.beginDraw();
  pg.clear();
  pg.background(0);
  pg.fill(255);
  pg.noStroke();
  pg.imageMode(CENTER);
  pg.ellipseMode(CENTER);
  pg.tint(#5DC407, 245);
  pg.image(screen, width / 2, height / 2.1 );
  pg.ellipse(width/2, height/2, 50, 50);
  pg.loadPixels();
  screen=pg.copy();
  pg.updatePixels();
  pg.endDraw();
   
  // fade 2
  pg2.beginDraw();
  pg2.clear();
  pg2.background(255,0);
  pg2.fill(255);
  pg2.noStroke();
  pg2.imageMode(CENTER);
  pg2.ellipseMode(CENTER);
  pg2.tint(#CD3D05, 220);
  pg2.image(screen2, width / 2, height / 2.06 );
  pg2.ellipse(width/2, height/2, 50, 50);
  pg2.loadPixels();
  screen2=pg2.copy();
  pg2.updatePixels();
  pg2.endDraw();
  
  image(pg, width / 2, height / 2, 400, 400);
  image(pg2, mouseX, mouseY, 400, 400);
 
}

```

---

<div class="post-metadata">

**Author:** ![th75](https://avatars.discourse-cdn.com/v4/letter/t/ebca7d/32.png) [@th75](https://discourse.processing.org/u/th75)\
**Post date:** [May 22, 2021, 10:20am UTC](https://discourse.processing.org/t/overlap-multiple-pgraphics-with-copy-function/30177/2 "2021-05-22T10:20:42Z")

</div>

Hi afkqs,

you can use [processing blend() function](https://processing.org/reference/blend_.html):

```auto
  image(pg, width / 2, height / 2, 400, 400);
  blend(pg2, 0,0,400,400,mouseX-200, mouseY-200, 400, 400,ADD);

```

last argument is the rule used to mix colors, you can try few to see if one fit what you need,  
otherwise, if you want to go further, you can do a loop where for each pixel you calculate mixing, you will have more freedom on what to do (can slow down quite fast)  
and last, if you want to do huge pixel manipulation , you can explore [PShader.html](https://processing.org/reference/PShader.html) but this is another world