Translate indefinitely in a for loop

Processing Coding Questions
1

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

    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

2

What do you mean by “translate indefinitely” ?

    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

3

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

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();
}
4

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

    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

5

Sorry,.really not get it what you mean … :slight_smile:

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

6

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

7

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

8

did you already get something?

9

As promised, here’s a plain vanilla solution …

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

1 Like
10

yes thank’s a lot !
Yves

11

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

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

++
Y