 # Bouncing line with for loops

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:

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

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

https://processing.org/examples/linear.html

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

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?

1 Like

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

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

}
}

``````
`````` c= c * -1;
``````

to revers direction

this can replace all for loops

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

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

try this code it is without for loop

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

@Chrisir

thanks for you , you are great teacher

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.

1 Like

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

2 Likes

Hello @Bromo,

Processing Resources < Click to open!

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

`:)`

2 Likes

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

@Bromo

hi we have great teacher here Chrisir

as 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…)

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