Clip() flickering

Processing Coding Questions
1

I want to create an effect, where I have 2 source images which are copied onto a destination image made up of n tiles and then slide the tiles to reveal the other image.

The way I want to achieve this is by copying a tile and then clipping it.
The problem I face is that when I run the sketch there’s a very annoying flickering going on.

Here’s the code I’ve got so far:


PGraphics pg1, pg2;

void setup() {
  size(800, 800, P2D);
  pg1 = createGraphics(800, 800, P2D);
  pg2 = createGraphics(800, 800, P2D);
  //noLoop();
}

void draw() {
  background(0);

  //blue
  pg1.beginDraw();
  pg1.background(0, 0, 255);
  pg1.endDraw();
  
  //red
  pg2.beginDraw();
  pg2.background(255, 0, 0);
  pg2.endDraw();
  
  int tiles = 2;
  int tileW = int(width/tiles);
  int tileH = int(height/tiles);
  
  int sx, sy, sw, sh, dx, dy, dw, dh;
  sw = dw = tileW;
  sh = dh = tileH;
  sx = dx = 0;
  sy = dy = 0;
  
  copy(pg1, sx, sy, sw, sh, dx, dy, dw, dh);
  copy(pg2, sx + tileW, sy, sw, sh, dx + tileW, dy, dw, dh);
    
   clip(sx, sy, tileW, tileH);
}

The above is just a basic test for 1 tile.

I’ll try again to describe what I’d love to get:
Each section consists of 2 tiles where only 1 is visible.
What I want is that the blue image is displayed and then by moving each tile the red image is revealed.

Any help appreciated, be it on the flickering topic or even having another suggestion on how to achieve this effect.

2

-a- here have no flickering, it just not works ( this way )

first must set clip, then draw the canvas

  clip(sx, sy, tileW, tileH);
//  clip(mouseX,mouseY, tileW, tileH);
  
  copy(pg1, sx, sy, sw, sh, dx, dy, dw, dh);
  copy(pg2, sx + tileW, sy, sw, sh, dx + tileW, dy, dw, dh);

-b-
but actually, it is an active selection of a rectangle
( and hide all the rest )
but you might want handle tiles,
what i suggest is to use a grid of rects ( or images ) as array of class
where you can enable/disable each…