Overlap multiple PGraphics with copy() function

Processing Coding Questions
1

Hi there,

I’m trying to overlap multiple fades using the copy() function that was suggested to me in a previous topic.

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:

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);
 
}
2

Hi afkqs,

you can use processing blend() function:

  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 but this is another world

1 Like