# Bouncing line with for loops

**URL:** <https://discourse.processing.org/t/bouncing-line-with-for-loops/29972>\
**Category:** Beginners\
**Created:** [May 9, 2021, 2:06am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972 "2021-05-09T02:06:59Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bromo](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bromo](https://discourse.processing.org/u/Bromo)\
**Post date:** [May 9, 2021, 2:06am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/1 "2021-05-09T02:06:59Z")

</div>

Hi, I’m currently trying to make a program that draws a line moving across the screen, if it reaches the edge ideally it’ll move in the opposite direction. When I run the program it seems to be stuck on the far left side, but when I println the variables it increases and decreases appropriately. Can someone help? Here’s what I have so far:

```auto
int xAxis = 150;

void setup()
{ 
  size(500, 500);
  stroke(#21DBEA);
}

void draw()
{
  background(250);

  for (int edgeRight = 1; edgeRight > 0; edgeRight++)
  {
    if (xAxis == width)
    {
      edgeRight = -1;
    } 
    else
    {
      background(250);
      line(xAxis, 0, xAxis, height);
      xAxis ++;
      println(xAxis + " " + edgeRight);
    }
  }
  for (int edgeLeft = -1; edgeLeft < 0; edgeLeft--)
  {
    if (xAxis == 0)
    {
      edgeLeft = 1;
    } 
    else
    {
      background(250);
      line(xAxis, 0, xAxis, height);
      xAxis --;
      println(xAxis + " " + edgeLeft);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 9, 2021, 2:48am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/2 "2021-05-09T02:48:40Z")

</div>

here is how to move line in one direction see how to draw and move the line

[https://processing.org/examples/linear.html](https://processing.org/examples/linear.html)

---

<div class="post-metadata">

**Author:** ![Bromo](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bromo](https://discourse.processing.org/u/Bromo)\
**Post date:** [May 9, 2021, 3:06am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/3 "2021-05-09T03:06:07Z")

</div>

Sorry if I wasn’t clear, that’s not quite what I’m trying to do. I’m trying to make it so that when the line touches the edge of the screen, it starts moving in the opposite direction. So when it touches the right side of the canvas it then moves to the left side and vice versa

---

<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:** [May 9, 2021, 3:47am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/4 "2021-05-09T03:47:20Z")

</div>

Get rid of the for loops.

Add a value c to the position of the line

When the line reaches a wall what must happen to c?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 9, 2021, 3:53am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/5 "2021-05-09T03:53:21Z")

</div>

you have to start with moving line first then you think how to use if and for and else

```auto
float a;

void setup() {
  size(640, 360);
  stroke(255);
  a = height/2;
}

void draw() {
  background(51);
  line(a, 0, a, height );  
  a = a - 0.5;
  if (a < 0) { 
  
  a = width;
  
}
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 9, 2021, 3:58am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/6 "2021-05-09T03:58:31Z")

</div>

> [@Chrisir](#):
>
> When the line reaches a wall what must happen to c?

```auto
 c= c * -1;

```

to revers direction

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 9, 2021, 4:08am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/7 "2021-05-09T04:08:26Z")

</div>

this can replace all for loops

```auto
line(move, width, move, 0); 
  if (move>= width || move <= 0 ) { 

```

---

<div class="post-metadata">

**Author:** ![Bromo](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bromo](https://discourse.processing.org/u/Bromo)\
**Post date:** [May 9, 2021, 4:21am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/8 "2021-05-09T04:21:53Z")

</div>

> [@Chrisir](#):
>
> When the line reaches a wall what must happen to c?

I have no clue, how would processing know to continue modifying c without using a loop?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 9, 2021, 4:35am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/9 "2021-05-09T04:35:32Z")

</div>

try this code it is without for loop

```auto
int c = 1;
int move=0; 
void setup() { 
  size(600, 600);
} 
void draw() { 
  background(255); 
  move= move + c; 
  line(move, width, move, 0); 
  if (move>= width || move <= 0 ) { 
    c= c * -1;
  }
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 9, 2021, 4:37am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/10 "2021-05-09T04:37:41Z")

</div>

@Chrisir

thanks for you , you are great teacher

---

<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:** [May 9, 2021, 6:30am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/11 "2021-05-09T06:30:40Z")

</div>

> [@Bromo](#):
>
> without using a loop?

draw in itself loops automatically, that’s one of the main ideas of processing.

In fact, something that happens in a for-loop cannot be seen as an animation since the canvas is not updated throughout but only at the end of draw(). So a for-loop adds everything to the internal canvas and only once at the end of draw () the internal canvas gets displayed on screen.

---

<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:** [May 9, 2021, 2:55pm UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/12 "2021-05-09T14:55:53Z")

</div>

> [@Bromo](#):
>
> I have no clue, how would processing know to continue modifying c

The command for this is an if-clause; it checks if a value c is higher than width (or equal or smaller…)

---

<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:** [May 9, 2021, 11:57pm UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/13 "2021-05-09T23:57:25Z")

</div>

> [@Bromo](#):
>
> I have no clue, how would processing know to continue modifying c without using a loop?

Hello @Bromo,

> **Processing Resources \< Click to open!**
>
> - The Processing website has references, examples, tutorials, etc.  
> [https://processing.org/](https://processing.org/)
> - Processing has lots to offer!  
> An exploration of the tabs will reveal what is available; libraries, tools, _ **examples** _ and more.  
> ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1d6a45100f4930df324acb8966086c8eaa28eee4.png)
> - The Coding Train  
> [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)

Check out these references to understand the flow of a program:

- [setup() / Reference / Processing.org](https://processing.org/reference/setup_.html)
- [draw() / Reference / Processing.org](https://processing.org/reference/draw_.html) \< Line example in here using draw() as the loop
- [frameRate() / Reference / Processing.org](https://processing.org/reference/frameRate_.html)
- And the related references on each page… as required.

`:)`

---

<div class="post-metadata">

**Author:** ![Bromo](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@Bromo](https://discourse.processing.org/u/Bromo)\
**Post date:** [May 10, 2021, 12:25am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/14 "2021-05-10T00:25:41Z")

</div>

> [@Chrisir](#):
>
> canvas is not updated throughout but only at the end of draw().

Ahh that answers a lot of questions, I didn’t know that. Thanks everyone for the help, much appreciated 🙂 guess the answer was a lot simpler than I thought it’d be lol

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 10, 2021, 12:35am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/15 "2021-05-10T00:35:04Z")

</div>

@Bromo

hi we have great teacher here [Chrisir](https://discourse.processing.org/u/Chrisir)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 10, 2021, 1:06am UTC](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972/16 "2021-05-10T01:06:44Z")

</div>

> [@jafal](#):
>
> @Bromo

as [Chrisir](https://discourse.processing.org/u/Chrisir) said adding c to position and check when reaching both borders  
The command for this is an if-clause; it checks if a value c is higher than width (or equal or smaller…)

```auto
 move= move + c; 
  line(move, width, move, 0); 
  if (move>= width || move <= 0 ) { 

```