How can I make lines disappear?

Processing Coding Questions
1

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) {
//???
}
}

1 Like
2

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

3

If you don’t mind a little trickery:

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;
 }
}
}
4

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

5

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

6

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

7

@tlm,

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

Consider looking at the references and examples for:

  • setup()
  • draw()
  • frameRate()
  • background()
  • for()

:)

8

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.

1 Like
9

As soon as

applies

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

Forget about the boolean

10

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



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;
  }
}
11

Hello,

image
image763×523 20.2 KB

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

:)

12

Done. :sweat_smile:

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;
  }
}
1 Like