# How can I make lines disappear?

**URL:** <https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607>\
**Category:** Coding Questions\
**Created:** [September 1, 2022, 10:57pm UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607 "2022-09-01T22:57:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![TLM](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@TLM](https://discourse.processing.org/u/TLM)\
**Post date:** [September 1, 2022, 10:57pm UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/1 "2022-09-01T22:57:46Z")

</div>

Hello, I am really really new to Processing and working on this exercise I just wanted to make the lines disappear (from left to right) when the last lines reaches the right-end of the screen (endX \> width). The final result should be a simple loop. I’m going trough the video tutorials but I haven’t find the solution yet and my mind’s blowing. Thanks.

this is the code so far:

float endX = 0;

void setup() {  
size(displayWidth, displayHeight);  
}

void draw() {  
background(255);  
strokeWeight(2);  
stroke(0);

int lineX = 0;  
while (lineX \< endX) {  
line(lineX, 0, lineX, height);  
lineX = lineX + 50;  
}  
endX = endX + 50;

if (endX \> width) {  
//???  
}  
}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 2, 2022, 7:16am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/2 "2022-09-02T07:16:32Z")

</div>

`draw()` runs automatically 60 times per second.

Invisible for the human eye.

But since you use `background()` at the start which is good,  
ALL lines get erased 60 times per second.

So for your animation when the condition applies set a flag to true that you define before setup(): `boolean flag=false;` .

When it’s true, use a different while loop where you increase the start position of the lines so it appears as the lines would disappear. You just don’t draw the leftmost lines anymore.

Chrisir

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 2, 2022, 7:23am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/3 "2022-09-02T07:23:23Z")

</div>

If you don’t mind a little trickery:

```auto
float endX = 0;
int counter = 0;

void setup() {
size(displayWidth, displayHeight);
}

void draw() {
background(255);
strokeWeight(2);
stroke(0);

int lineX = 0;
while (lineX < endX) {
line(lineX, 0, lineX, height);
lineX = lineX + 50;
}
endX = endX + 50;

if (endX > width) {
 noStroke();
 rect(width - counter,0,width,height);
 counter += 8;
 if(counter > width){
   lineX = 0;
   counter = 0;
 }
}
}

```

---

<div class="post-metadata">

**Author:** ![TLM](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@TLM](https://discourse.processing.org/u/TLM)\
**Post date:** [September 2, 2022, 10:11am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/4 "2022-09-02T10:11:58Z")

</div>

Thank you Chrisir for your help.  
Could you give a sample of this?

---

<div class="post-metadata">

**Author:** ![TLM](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@TLM](https://discourse.processing.org/u/TLM)\
**Post date:** [September 2, 2022, 10:13am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/5 "2022-09-02T10:13:18Z")

</div>

Thank you Svan for your suggestion,  
actually in your code the lines disappear from right to left not creating a loop.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 2, 2022, 10:14am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/6 "2022-09-02T10:14:12Z")

</div>

no, please do it on your own. Show your attempt, debug it and we can help.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 2, 2022, 11:18am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/7 "2022-09-02T11:18:58Z")

</div>

> [@Chrisir](#):
>
> Invisible for the human eye.

> **[Human Eye FPS: How Much Can We See and Process Visually?](https://www.healthline.com/health/human-eye-fps)**
>
> Your eyes and your brain are doing a lot of work to process images — more than you may realize. Learn more about how many frames the human eye can see per second, if you can test human FPS, and more.

@tlm,

There are lots of resources (tutorials, references, examples) here:

> **[Welcome to Processing!](https://processing.org)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

Consider looking at the references and examples for:

- setup()
- draw()
- frameRate()
- background()
- for()

`:)`

---

<div class="post-metadata">

**Author:** ![TLM](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@TLM](https://discourse.processing.org/u/TLM)\
**Post date:** [September 2, 2022, 11:54am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/8 "2022-09-02T11:54:41Z")

</div>

Yes I’ll do of course. I got the general concept of your suggestion but I’m still missing some crucial points because I probably need to study more the false/true variable which is not totally clear to me at the moment. Seeing some examples where things disappear gradually and false/true is applied would help me a lot (I haven’t find any clues at the point of the tutorials I’ve seen so far). Thank you and get back to you soon.  
TLM.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 2, 2022, 11:57am UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/9 "2022-09-02T11:57:29Z")

</div>

As soon as

> [@svan](#):
>
> `if (endX > width) {`

applies

You want increase the value where the line starts (instead of 0)

Forget about the boolean

---

<div class="post-metadata">

**Author:** ![TLM](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@TLM](https://discourse.processing.org/u/TLM)\
**Post date:** [September 2, 2022, 1:53pm UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/10 "2022-09-02T13:53:50Z")

</div>

Almost got it. I just miss how to put it in a loop.

```auto

float startX = 0;
float endX = 0;
int d = 50;

void setup() {
  size(displayWidth, displayHeight);
}

void draw() {
  background(255);
  strokeWeight(4);
  stroke(0);
  //loop();
  frameRate(30);

  for (lineX = startX; lineX < endX; lineX = lineX + d) {
    line(lineX, 0, lineX, height);
  }
  endX = endX + d;

  if (endX > width) {
    startX = startX + d;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 2, 2022, 2:00pm UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/11 "2022-09-02T14:00:24Z")

</div>

Hello,

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/b/ab2201a044b940515605d86535100b096321e51d.png)

Look up the reference for _**for()**_ and you will find working examples there.

`:)`

---

<div class="post-metadata">

**Author:** ![TLM](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@TLM](https://discourse.processing.org/u/TLM)\
**Post date:** [September 2, 2022, 2:55pm UTC](https://discourse.processing.org/t/how-can-i-make-lines-disappear/38607/12 "2022-09-02T14:55:13Z")

</div>

Done. 😅

```auto
float lineX = 0;
float startX = 0;
float endX = 0;
int d = 50;

void setup() {
  size(displayWidth, displayHeight);
}

void draw() {
  background(255);
  strokeWeight(4);
  stroke(0);
  frameRate(30);

  for (lineX = startX; lineX < endX; lineX = lineX + d) {
    line(lineX, 0, lineX, height);
  }
  endX = endX + d;

  if (endX > width) {
    startX = startX + d;
  }

  if (startX > width) {
    startX = 0;
    endX = 0;
  }
}

```