Help - lines from right to left

Processing Coding Questions
1

Hello, I´m new to Processing.

What I am trying to do is to create an animation of many black lines (like on the following picture) on a white background going smoothly from left to right in a never ending flow.

36

I manage to do an animation with one line moving in a loop (code enclosed) but I can´t manage to do it with many lines (code enclosed).

If anyone can point me in the right direction I will really appreciate it.

Thanks in advance!

int x = 100;

void setup() {
  size(640, 360);  
  strokeWeight(14);
  stroke(0);     
  frameRate(80);
}

void draw() { 
  background(255);   
  x = x - 1; 
  if (x < 0) { 
    x = width; 
  } 
  line(x,0,x,height);
}

Many lines

int x = 100;

void setup() {
  size(640, 360);  // Size must be the first statement
}

void draw () {
  background(0);
  

  stroke(255);
  strokeWeight(14);
  
  x=7;
  while(x<width){
  line(x,0,x,height);
  x=x+28;
  
  
}
}
1 Like
2

Hi @maxwestermann.

Rather than moving each line 1 by 1, what you can do is just shift all of the lines at once.
To do this, you can use the translate function (it would have to be placed before you draw all the lines) and translate the lines by an increasing amount each frame.
translate(-frameCount, 0) will translate everything to the left by one pixel each frame.

This will not loop the lines though. One way to make loop is to use the modulus operator (%). What this does is it gets the remainder of a division so by applying it here, every time a line goes off the screen, we can just shift it back a bit so it looks like it’s looping. Because all of the lines look exactly the same we don’t need to shift it all the way back to the other side of the screen (though this would work) but instead we could just shift it back to where the last line before the edge was.
So…
that would make our translate function become translate(-frameCount%28, 0) as 28 is the distance between each end point of the lines (the distance between the lines plus the width of the lines).

Of course, a simpler (but less concise way) to do this would to translate by your x variable
But this line:

would become:

Finally, you have to draw one extra line (or (2*the number of lines)+1 if you are looping from one side of the screen to the other. This is because if on the left edge half of a line is off the screen then there would a gap of half a line’s width on the right edge but there should be a half a line there.

So new code would be this:

int x = 100;

void setup() {
  size(640, 360);
}

void draw () {
  translate(-frameCount%28,0);
  background(0);

  stroke(255);
  strokeWeight(14);

  x=7;
  while (x<width+28) { //+28 as you need to draw an extra line
    line(x, 0, x, height);
    x=x+28;
  }
}
1 Like
3

Thanks a lot for your help and time!

4

No problem!
p.s. annoyingly there is a min character limit so I have to write a bit extra

1 Like