If statement in the for loop: how to control behaviour of element based on its index number

p5.js Beginners
1

Hi
Here’s my situation :
I have 3 lines of text, displayed like this :

line1. Hello
line2. Hello 
line3. Hello

I want the first line to move towards the right direction, the second to the left, the third to the right …
So I set a if statement in my for loop in order to sort the pair / impair line :

let interval = 20;
let offset = 0; 

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  for(let i = 0; i<3; i++){
    text('hello', width/2+offset, 10+i*interval);
    if(i%2){
      offset++; 
    }else{
      offset--; 
    }
  }
}

But the if statement doesn’t work cause all lines move to the same direction. I truly don’t know why…
Thank you for the help !

https://editor.p5js.org/WaningJupiter/sketches/MftNh2pfT
1 Like
2

Hi

Change direction

int c = 4;
int move=0; 
void setup() { 
  size(600, 600);
} 
void draw() { 
  textSize(50);

  background(25); 
  move= move + c; 

  text("jafar", move, 300);
text("jafar", 300, move);
 
 
  if (move>= width || move <= 0 ) { 
    c= c * -1;
  }
}
3

Hi, thanks for the code. My problem is more like how to use if statement in a for loop rather than purely moving the text.

4

that’s the same variable for left and right moving text

try (this gives an animation)

for(let i = 0; i<3; i++){
    //  
    if(i%2 == 0 ){   // maybe say == 0 here?
      // using offset2 for right 
      offset2++; 
      text('hello', width/2+offset2, 10+i*interval); // moves right very fast 
    }else{
      // left 
      offset--; 
      text('hello', width/2+offset, 10+i*interval); // moves left
    }
  }

Another Sketch

for static left/right offset :

for(let i = 0; i<3; i++){
    //  
    offset = 0; // reset 
    if(i%2 == 0 ){   // maybe say == 0 here or !=0 ?
      // for right 
      offset +=6; 
    }else{
      // left 
      offset -=6; 
    }
    text('hello', width/2+offset, 10+i*interval); // text out (left or right)
  }
2 Likes
5

Hello @WaningJupiter,

Example to scrutinize:

function draw() 
  {
  background(220);
  offset = 0;
  line(width/2, 0, width/2, height);
  for(let i = 0; i<3; i++)
    {
    if(i%2)  // same as (i%2) != 0
      {
      offset+=50; 
      }
    else
      {
      offset-=50; 
      }
    text(i + 'hello', width/2+offset, 10+i*interval);
    }
  }

Note that I make a decision with if() statement and then apply it after.

:)

1 Like
6

Yeah ! Totally right !

7

very elegant, thank you !

8

As already mentioned by @Chrisir, you need an individual offset variable for each “hello”.

A simple way to do it is by creating an array for each attribute your “hello” strings may require.

Although written for Processing Java Mode, this article link explains it well.

I’ve come up w/ an example sketch that adds 2 arrays for 8 "hello"s, so they not only horizontally move, but also bounce:

2 Likes
9

I will read into that. Thanks again for the help !

10

On the “I don’t know why” part, if you come from basic or another language where code is executed outside of a loop, beware that the animation does not upgrade each time your for loop loops, but every time draw() is executed. And it is executed many times for second.

3 Likes