# Erasing draw after "x" frames

**URL:** <https://discourse.processing.org/t/erasing-draw-after-x-frames/5707>\
**Category:** Coding Questions\
**Created:** [November 19, 2018, 11:53am UTC](https://discourse.processing.org/t/erasing-draw-after-x-frames/5707 "2018-11-19T11:53:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vayjean](https://avatars.discourse-cdn.com/v4/letter/v/e47c2d/32.png) [@vayjean](https://discourse.processing.org/u/vayjean)\
**Post date:** [November 19, 2018, 11:53am UTC](https://discourse.processing.org/t/erasing-draw-after-x-frames/5707/1 "2018-11-19T11:53:59Z")

</div>

Hi everyone,

I’m a new user of processing and i’m trying to make abstractions drawing with the below code. However I don’t arrive to erase the drawing after a certain amount of frames. Does someone knows how to do this ? Thanks on advance !  
(sorry for my English)

static final int NUM\_LINES = 1;

float t;

void setup () {  
background(0);  
size(800, 800);  
}

void draw() {  
stroke (255);  
strokeWeight (0.1);  
translate(width/2, height/2);

saveFrame(“output/draw\_####”);

for (int i = 0; i \< NUM\_LINES; i++) {  
line (x1(t + i), y1(t + i),x2(t), y2(t + i) );  
}  
t += 0.1;  
}

float x1(float t) {  
return sin(t / 10) \* 150 + sin(t / 15) \* 20;  
}

float y1(float t) {  
return cos(t / 10) \* 200;  
}

float x2(float t) {  
return sin(t / 5) \* 250 + sin(t) \* 2;  
}

float y2(float t) {  
return cos(t / 20) \* 250 + cos(t / 6) \* 70;  
}

---

<div class="post-metadata">

**Author:** ![brunoruchiga](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brunoruchiga/32/2235_2.png) [@brunoruchiga](https://discourse.processing.org/u/brunoruchiga)\
**Post date:** [November 19, 2018, 12:34pm UTC](https://discourse.processing.org/t/erasing-draw-after-x-frames/5707/2 "2018-11-19T12:34:11Z")

</div>

You can use

```auto
if(frameCount % 60 == 0) {
  background(0);
}

```

In this code, 60 is the number of frames. If the sketch is running at the [default 60 frames per second](https://processing.org/reference/frameRate_.html), each 60 frames will be 1 second.

See [% (modulo)](https://processing.org/reference/modulo.html) and [frameCount](https://processing.org/reference/frameCount.html).

---

<div class="post-metadata">

**Author:** ![vayjean](https://avatars.discourse-cdn.com/v4/letter/v/e47c2d/32.png) [@vayjean](https://discourse.processing.org/u/vayjean)\
**Post date:** [November 19, 2018, 2:51pm UTC](https://discourse.processing.org/t/erasing-draw-after-x-frames/5707/3 "2018-11-19T14:51:52Z")

</div>

thanks for your answer ! However it is not exactly what I meant.

What I would like is to erase one frame when an other one is created. The idea is to get a fluid movement, a continuous erasure for a continuous creation.

---

<div class="post-metadata">

**Author:** ![brunoruchiga](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brunoruchiga/32/2235_2.png) [@brunoruchiga](https://discourse.processing.org/u/brunoruchiga)\
**Post date:** [November 19, 2018, 3:01pm UTC](https://discourse.processing.org/t/erasing-draw-after-x-frames/5707/4 "2018-11-19T15:01:35Z")

</div>

Oh! Just put `background(0);` inside draw, in the first line, instead of inside setup. This will “erase” the image every frame. Everything inside draw is executed once per frame.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 21, 2018, 1:57am UTC](https://discourse.processing.org/t/erasing-draw-after-x-frames/5707/5 "2018-11-21T01:57:06Z")

</div>

You can also use image(img,0,0) if you don‘t want to erase the whole screen. Just modify the size of the img to what you want saved for the Next Frame with a PGraphics and use get(x,y,w,h) to get the Part of the background that you want to keep.

Badly explained, so here‘s an example :

```auto
PGraphics sav;

void setup() {
  size(600,400);
  sav = createGraphics(100,100);
}

void draw() {
  background(0); //resets the whole screen to black
  image(sav, 0, 0); //places the saved image in the top left, like what iPhone does shortly after saving a screenshot (best example i know...)
  ellipse(300,300,50,50);//draw something beautiful you want to keep in the Next frame
sav.beginDraw();
sav.background( get(250,250,350,350)); //saves the image around the ellipse
sav.endDraw();
}

```