Bouncing line with for loops

Processing Beginners
1

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

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

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

3

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

4

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
5

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;
  
}
}
6 
 c= c * -1;

to revers direction

7

this can replace all for loops

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

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

9

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
10

@Chrisir

thanks for you , you are great teacher

11

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
12

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

2 Likes
13

Hello @Bromo,

Processing Resources < Click to open!

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

:)

2 Likes
14

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

15

@Bromo

hi we have great teacher here Chrisir

16

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