# Line Loop bouncing

**URL:** <https://discourse.processing.org/t/line-loop-bouncing/44090>\
**Category:** Coding Questions\
**Created:** [March 12, 2024, 9:19pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090 "2024-03-12T21:19:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 12, 2024, 9:19pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/1 "2024-03-12T21:19:32Z")

</div>

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

```auto
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);
 }

}

```

---

<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:** [March 12, 2024, 9:48pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/2 "2024-03-12T21:48:49Z")

</div>

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

---

<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:** [March 12, 2024, 9:56pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/3 "2024-03-12T21:56:43Z")

</div>

> [@humano](#):
>
> Hello! how could I reduce speed of these lines in this sketch?

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]

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 12, 2024, 10:04pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/4 "2024-03-12T22:04:33Z")

</div>

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

---

<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:** [March 12, 2024, 10:27pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/5 "2024-03-12T22:27:57Z")

</div>

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 12, 2024, 10:42pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/6 "2024-03-12T22:42:46Z")

</div>

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

---

<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:** [March 12, 2024, 10:52pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/7 "2024-03-12T22:52:13Z")

</div>

Try set xDirection to 0.1

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 12, 2024, 11:48pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/8 "2024-03-12T23:48:50Z")

</div>

Thanks @crisir, but speed is the same with 0.1

---

<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:** [March 13, 2024, 12:50am UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/9 "2024-03-13T00:50:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 13, 2024, 1:51am UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/10 "2024-03-13T01:51:47Z")

</div>

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)?

---

<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:** [March 13, 2024, 2:25am UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/11 "2024-03-13T02:25:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 13, 2024, 12:16pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/12 "2024-03-13T12:16:44Z")

</div>

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

```auto
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);
 }

}

```

---

<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:** [March 13, 2024, 1:40pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/13 "2024-03-13T13:40:05Z")

</div>

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

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 13, 2024, 4:58pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/14 "2024-03-13T16:58:13Z")

</div>

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

```auto
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);
 //}

}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 13, 2024, 7:42pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/15 "2024-03-13T19:42:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 13, 2024, 9:19pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/16 "2024-03-13T21:19:41Z")

</div>

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?

```auto
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;
    }
  }
  
}

```

---

<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:** [March 13, 2024, 10:19pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/17 "2024-03-13T22:19:06Z")

</div>

> [@humano](#):
>
> how could I give different speeds to the lines?

> [@humano](#):
>
> `lineX[i]++;`

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

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 13, 2024, 10:43pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/18 "2024-03-13T22:43:26Z")

</div>

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

---

<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:** [March 13, 2024, 11:54pm UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/19 "2024-03-13T23:54:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [March 14, 2024, 12:08am UTC](https://discourse.processing.org/t/line-loop-bouncing/44090/20 "2024-03-14T00:08:51Z")

</div>

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?

[Next page](https://discourse.processing.org/t/line-loop-bouncing/44090.md?page=2)