# Translate indefinitely in a for loop

**URL:** <https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373>\
**Category:** Coding Questions\
**Created:** [June 6, 2022, 6:15pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373 "2022-06-06T18:15:38Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![yves](https://avatars.discourse-cdn.com/v4/letter/y/9e8a1a/32.png) [@yves](https://discourse.processing.org/u/yves)\
**Post date:** [June 6, 2022, 6:15pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/1 "2022-06-06T18:15:38Z")

</div>

Hi everyone,  
I try to translate indefinitely a loop of rectangles, but it doesn’t work properly  
my code :

```auto
    pushMatrix() ;
    pushStyle();
    fill(255);
for (float i=0; i < width; i = i + 100) {
    for (int x = 0; x <= width; x += 120) { 
       translate(i, 0);
  rect(x, 0, 60, height);
}
      }

    popStyle();
    popMatrix();

```

Thank’s for any help

Yves

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 6, 2022, 7:39pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/2 "2022-06-06T19:39:39Z")

</div>

What do you mean by “translate indefinitely” ?

```auto
    pushMatrix() ;
    pushStyle();
    fill(255);
    for (float i=0; i < width-100; i = i + 100) {
         pushMatrix();
         translate(i,0);
         rect(0, 0, 100, height);
         popMatrix();
     }
    popStyle();
    popMatrix();

```

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [June 6, 2022, 10:18pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/3 "2022-06-06T22:18:13Z")

</div>

One issue i see is that you’re translating by i yet have that jumping through the loop by 100, the screen is only 100,100 as default i believe, so it is working its just drawing the next rectangle off the screen, if you put it all in an active sketch by using setup and draw then make the screen size bigger you can see whats happening

EDIT: Turns out you dont even need the setup and draw, just add a size(1000,500); at the beginning

```auto
void setup() {
  size(1000, 100);
}

void draw() {
  pushMatrix() ;
  pushStyle();
  fill(255);
  for (float i=0; i < width; i = i + 100) {
    for (int x = 0; x <= width; x += 120) { 
      translate(i, 0);
      rect(x, 0, 60, height);
    }
  }

  popStyle();
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![yves](https://avatars.discourse-cdn.com/v4/letter/y/9e8a1a/32.png) [@yves](https://discourse.processing.org/u/yves)\
**Post date:** [June 7, 2022, 4:42pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/4 "2022-06-07T16:42:44Z")

</div>

Thank’s for help.  
I got my loop with stripes on the all screen :

```auto
    pushMatrix() ;
    pushStyle();
    fill(255);
    for (int x = 0; x <= width; x += 120) { 
  rect(x, 0, 60, height); // stripes all over the screen
}
popStyle();
    popMatrix();

```

I want to make a translation of all the stripes from left to right, with no end of stripes  
Yves

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 7, 2022, 5:47pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/5 "2022-06-07T17:47:02Z")

</div>

Sorry,.really not get it what you mean … 🙂

Do you want that the stripes lets say shift to the left in an endless way, or somthing. Like an animation or similar ?

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![yves](https://avatars.discourse-cdn.com/v4/letter/y/9e8a1a/32.png) [@yves](https://discourse.processing.org/u/yves)\
**Post date:** [June 7, 2022, 6:26pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/6 "2022-06-07T18:26:04Z")

</div>

yes, that’s it, an animation of stripes who move from left to right indefinitely  
thank’s  
Y

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 7, 2022, 6:46pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/7 "2022-06-07T18:46:17Z")

</div>

Ok!

There are several ways to do …  
If you want to try yourself now an easy one would be…

- draw bars alternately with two colors + two additional bars offscreen.
- Shift the starting x value left (negative) till the bars from offscreen is completely visible
- Reset the shift counter
- And so on …

Otherwise I’ll send you an example tomorrow, as I’m not on PC now…

Cheers  
—mnse

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 8, 2022, 8:01am UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/8 "2022-06-08T08:01:25Z")

</div>

did you already get something?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 8, 2022, 10:23am UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/9 "2022-06-08T10:23:01Z")

</div>

As promised, here’s a plain vanilla solution …

```auto
int visiblebars = 10;
int barwidth;
int barwidthtwice;
int shift;
int speed = 1;

PGraphics pg;

void setup() {
  size(1000,600,P2D);
  barwidth = width/visiblebars;
  barwidthtwice = 2*barwidth;
  int[] colors = {color(0,0,255), color(255,0,255)};
  
  pg = createGraphics(width+barwidthtwice, height, P2D);
  pg.beginDraw();
  pg.noStroke();
  for (int x = 0; x < visiblebars+2; x++) {
    pg.fill(colors[x % 2]);
    // without translate do
    // pg.rect(x*barwidth,0,(x+1)*barwidth,height);
    // if you want to use translate do this
    // pg.pushMatrix();
    // pg.translate(x*barwidth,0);
    // pg.rect(0,0,barwidth,height);
    // pg.popMatrix();
    // or even shorter this
    pg.translate(x>0 ? barwidth : 0 , 0);
    pg.rect(0,0,barwidth,height);    
  }
  pg.endDraw();
  shift = 0;  
}

void draw() {
  // for left shift use
  image(pg, -shift, 0);
  // or for right shift use
  // image(pg, -barwidthtwice+shift, 0);
  shift = (shift+speed) % barwidthtwice;
}

```

Cheers  
— mnse

![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/e/fec86608bcd40c2b506d6276c9a80f63446b3111.gif)

---

<div class="post-metadata">

**Author:** ![yves](https://avatars.discourse-cdn.com/v4/letter/y/9e8a1a/32.png) [@yves](https://discourse.processing.org/u/yves)\
**Post date:** [June 8, 2022, 2:16pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/10 "2022-06-08T14:16:17Z")

</div>

> [@mnse](#):
>
> ```auto
> int visiblebars = 10;
> int barwidth;
> int barwidthtwice;
> int shift;
> int speed = 1;
> 
> PGraphics pg;
> 
> void setup() {
> size(1000,600,P2D);
> barwidth = width/visiblebars;
> barwidthtwice = 2*barwidth;
> int[] colors = {color(0,0,255), color(255,0,255)};
>   
> pg = createGraphics(width+barwidthtwice, height, P2D);
> pg.beginDraw();
> pg.noStroke();
> for (int x = 0; x < visiblebars+2; x++) {
> pg.fill(colors[x % 2]);
> // without translate do
> // pg.rect(x*barwidth,0,(x+1)*barwidth,height);
> // if you want to use translate do this
> // pg.pushMatrix();
> // pg.translate(x*barwidth,0);
> // pg.rect(0,0,barwidth,height);
> // pg.popMatrix();
> // or even shorter this
> pg.translate(x>0 ? barwidth : 0 , 0);
> pg.rect(0,0,barwidth,height);    
> }
> pg.endDraw();
> shift = 0;  
> }
> 
> void draw() {
> // for left shift use
> image(pg, -shift, 0);
> // or for right shift use
> // image(pg, -barwidthtwice+shift, 0);
> shift = (shift+speed) % barwidthtwice;
> }
> 
> ```

yes thank’s a lot !  
Yves

---

<div class="post-metadata">

**Author:** ![yves](https://avatars.discourse-cdn.com/v4/letter/y/9e8a1a/32.png) [@yves](https://discourse.processing.org/u/yves)\
**Post date:** [June 9, 2022, 3:30pm UTC](https://discourse.processing.org/t/translate-indefinitely-in-a-for-loop/37373/11 "2022-06-09T15:30:52Z")

</div>

Hi,  
thank’s for the quick answers  
I made also an alternative solution width random displacements 🙂

```auto
 pushMatrix() ;
    pushStyle();
    fill(255);
    for (int x = 0; x <= width; x += 120) { 
       translate(random(width), 0);
  rect(x, 0, 60, height);
}
 popStyle();
    popMatrix();

```

++  
Y