# Clip() flickering

**URL:** https://discourse.processing.org/t/clip-flickering/12227
**Category:** Coding Questions
**Created:** [June 21, 2019, 6:22am UTC](https://discourse.processing.org/t/clip-flickering/12227 "2019-06-21T06:22:27Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![lsk](https://avatars.discourse-cdn.com/v4/letter/l/a6a055/32.png) [@lsk](https://discourse.processing.org/u/lsk)
#### Post date: [June 21, 2019, 6:22am UTC](https://discourse.processing.org/t/clip-flickering/12227/1 "2019-06-21T06:22:27Z")

</div>

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:

```auto

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.

---

<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: [June 21, 2019, 11:08am UTC](https://discourse.processing.org/t/clip-flickering/12227/2 "2019-06-21T11:08:57Z")

</div>

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

first must set clip, then draw the canvas

```auto
  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…