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

**URL:** <https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637>\
**Category:** Beginners\
**Created:** [April 6, 2023, 3:38pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637 "2023-04-06T15:38:44Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [April 6, 2023, 3:38pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/1 "2023-04-06T15:38:44Z")

</div>

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

```auto
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 :

```auto
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 !

```auto
https://editor.p5js.org/WaningJupiter/sketches/MftNh2pfT

```

---

<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:** [April 6, 2023, 4:50pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/2 "2023-04-06T16:50:26Z")

</div>

Hi

Change direction

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

```

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [April 6, 2023, 5:02pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/3 "2023-04-06T17:02:29Z")

</div>

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.

---

<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:** [April 6, 2023, 5:05pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/4 "2023-04-06T17:05:00Z")

</div>

> [@WaningJupiter](#):
>
> `offset`

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

try (this gives an animation)

```auto
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 :

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

```

---

<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:** [April 6, 2023, 5:13pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/5 "2023-04-06T17:13:43Z")

</div>

Hello @WaningJupiter,

Example to scrutinize:

```auto
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.

`:)`

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [April 6, 2023, 5:19pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/6 "2023-04-06T17:19:53Z")

</div>

Yeah ! Totally right !

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [April 6, 2023, 5:20pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/7 "2023-04-06T17:20:26Z")

</div>

very elegant, thank you !

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 6, 2023, 5:21pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/8 "2023-04-06T17:21:50Z")

</div>

> [@WaningJupiter](#):
>
> I truly don’t know why…

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](https://forum.processing.org/two/discussion/8082/from-several-variables-to-arrays.html) 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:

https://OpenProcessing.org/sketch/1890488/embed/

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [April 6, 2023, 5:25pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/9 "2023-04-06T17:25:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JoseMY](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josemy/32/2016_2.png) [@JoseMY](https://discourse.processing.org/u/JoseMY)\
**Post date:** [April 9, 2023, 8:45pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637/10 "2023-04-09T20:45:36Z")

</div>

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.