Line Loop bouncing

Processing Coding Questions
1

Hello! how could I reduce speed of these lines in this sketch? I tried frameRate but it did not work. Thanks!

float x;
float xDirection;


void setup() {
  size(800,1000);
  colorMode(HSB,360,100,100);
  background(360);
  
 
}

void draw(){
  strokeWeight(1);
  background(360);
  x=0;
  xDirection = 1;
 
  x = x + xDirection;
  
  if(x < 0){
    xDirection = - xDirection;
  }
  if(x > width){
    xDirection = - xDirection;
  }
  
 for (int i=0; i<width; i=i+1){
   //frameRate(5);
   stroke(random(360),100,100);
   line(x+i,0,x+i,height);
 }

}
2

Try taking the code out of draw() and placing it in setup().

3

When you are referring to the for-loop: remember that stuff in the for loop gets not animated because the screen is only updated once at the end of draw.

Instead use the fact that the function draw() loops automatically

[EDITED]

1 Like
4

Which fact draws loops automatically? I type it in setup it has no movement

5 
float x;
float xDirection;


void setup() {
  size(800, 1000);
  colorMode(HSB, 360, 100, 100);
  background(360);
  x=0;
  xDirection = 1;
}

void draw() {
  strokeWeight(1);
  background(360);


  x = x + xDirection;

  if (x < 0) {
    xDirection = - xDirection;
  }
  if (x > width) {
    xDirection = - xDirection;
  }

  for (int i=0; i<width; i=i+1) {
    //frameRate(5);
    stroke(random(360), 100, 100);
    line(x+i, 0, x+i, height);
  }
}
1 Like
6

Well, now the animation change and you can see the background, but lines have the same speed than before, they are not shower

7

Try set xDirection to 0.1

1 Like
8

Thanks @crisir, but speed is the same with 0.1

9

Have you tried setting the frameRate from setup(): https://processing.org/reference/frameRate_.html ? Set it to 0.5; that should be slow enough.

10

Thanks @svan but then i am not sure if movement is as free flowing as can be. If that is the only way, how could give different speed to the lines( some of then going slower than others)?

11

It’s difficult for me to tell what type of effect you are trying to achieve. Are there any examples that you could show us? Have you looked into Perlin noise or something similar to draw the lines; I have no experience with it, but might give the variability that you mentioned.

12

We can see it in this example with more space between lines, they dont slide across the screen, as I would like, they skip to the next position

float x;
float xDirection;


void setup() {
  size(800,1000);
  colorMode(HSB,360,100,100);
  background(360);
  frameRate(3);
 
}

void draw(){
  strokeWeight(5);
  background(360);
  x=0;
  xDirection = 1;
 
  x = x + xDirection;
  
  if(x < 0){
    xDirection = - xDirection;
  }
  if(x > width){
    xDirection = - xDirection;
  }
  
 for (int i=0; i<width; i=i+30){
   
   stroke(random(360),random(50,100),random(50,100));
   line(x+i,0,x+i,height);
 }

}
13

Sounds like you want something like the following except with multiple lines instead of just one:

int x = 0;
int speed = 1;

void setup() {
  size(400, 200);
  strokeWeight(3.0);
}

void draw() {
  background(209);
  if (x > width)  x = 0;
  stroke(255, 0, 0);
  line(x += speed, 0, x += speed, height);
}
14

That is what it do when I remove the loop, but why lines dont do the same when I use the loop?

float x;
float xDirection;


void setup() {
  size(800,1000);
  colorMode(HSB,360,100,100);
  background(360);
  //frameRate(3);
 x=0;
  xDirection = 1;
 
}

void draw(){
  strokeWeight(5);
  background(360);
  
  x = x + xDirection;
  
  if(x < 0){
    xDirection = - xDirection;
  }
  if(x > width){
    xDirection = - xDirection;
  }
  
// for (int i=0; i<width; i=i+30){
   
   stroke(random(360),random(50,100),random(50,100));
   line(x,0,x,height);
 //}

}
15

It seems I only can move one line, if I make a loop lines stay motionless (only their color changes) So how can I move several lines?

16

If stuff in the for loop gets not animated I guess I have to change the approach. So I have made this code (based on happy codding) and I have the motion I wanted, but how could I give different speeds to the lines?

float[] lineX = new float[55];
color[] cols = {color( 255, 0, 00 ), color( 255, 255, 0 ), color( 0, 255, 0 ),
                color( 0, 255, 255 ), color( 0, 0, 255 ), color( 255, 0, 255 )};

void setup() {
  size(800, 1000);
  strokeWeight(5);
  
  for (int i = 0; i < lineX.length; i++) {
    lineX[i] = random(width);
  }
  
}


void draw() {
  //background(255);
  
  for (int j = 0; j<width; j=j+10){
    stroke(cols[j%6]);
    line(j,0,j,height);
  } 
  

  for (int i = 0; i < lineX.length; i++) {
    //float lineY = height * i / lineX.length;
    line(lineX[i], 0, lineX[i], height);
    stroke(cols[i%6]);
    lineX[i]++;

    if (lineX[i] > width) {
      lineX[i] = 0;
    }
  }
  
}
17

This increments by 1.
Try incrementing with larger values such as 2, 3, etc.

:)

18

But I mean, different lines with different speeds, not all of them with the same speed

19

different lines with different speeds
lineX[i] = lineX[i]+=random(0,5);

1 Like
20

Thank so much, but I would say this every line is modifing its speed all the time with this approach, but there is not a line overtaking another one, how could I make that?