Loading...
Logo
Processing Forum
Having a little trouble shifting a for loop pattern. Guessing this isn't impossible..

This is my code:

void setup() { 
  size(500,500);
  smooth();
 }

void draw() {
  
 for (int s = 0; s < 640; s += 90) {
    for (int t = 0; t < 4800; t += 30) {
      
       fill(#0770FF);
       rect(s,t,10,10);
       rect(s+10,t+10,20,20);
      fill(#777FFF);
        rect(s+30,t,10,10);
         rect(s+40,t+10,20,20);
        fill(#07700F);
          rect(s+60,t,10,10);
           rect(s+70,t+10,20,20);
     
     
      
    }
  }

What I'm trying to do is shift the pattern so the colors line up in diagonals. Sort of like when you add a   translate(s/3,0); but for the whole screen. 

thanks


 

Replies(6)

@alphachap, He is specifying the hexadecimal color notation, see Color.

@pjacobso, What exactly do you you mean?
If you just want to rotate it so that the boxes are slanted 45°, I did the following:

Copy code
  1. void setup() {
  2.   size(500,500);
  3.   smooth();
  4.  }
  5. void draw() {
  6.  
  7.  for (int s = 0; s < 640; s += 90) {
  8.     for (int t = 0; t < 4800; t += 30) {
  9.       pushMatrix();
  10.       translate(width / 2, -height / 2);
  11.       rotate(radians(45));
  12.      
  13.       fill(#0770FF);
  14.      
  15.       rect(s,t,10,10);
  16.       rect(s+10,t+10,20,20);
  17.      
  18.       fill(#777FFF);
  19.      
  20.       rect(s+30,t,10,10);
  21.       rect(s+40,t+10,20,20);
  22.      
  23.       fill(#07700F);
  24.      
  25.       rect(s+60,t,10,10);
  26.       rect(s+70,t+10,20,20);
  27.      
  28.       popMatrix();
  29.     }
  30.   }
  31. }
Basically rotated it 45° and translated it so that it appeared on the screen, not much else to it
(I also formatted you code so that it was slightly easier to read)
I hope this helped
Hi. Thanks for answering. I didn't really want to rotate the whole thing, I wanted to stagger the lines rectangles so they have something of this effect while remaining perpendicular to the horizon. So the same thing I have just shifted each new line..
OK; this isn't perfect (it doesn't fill the whole program) but:

Copy code
  1. void setup() {
  2.   size(500,500);
  3.   smooth();
  4.  }
  5. void draw() {
  6.   translate(-width / 2, 0);
  7.  
  8.  for (int s = 0; s < 640; s += 90) {
  9.     for (int t = 0; t < 4800; t += 30) {
  10.       fill(#0770FF);
  11.      
  12.       rect(s+t,t,10,10);
  13.       rect(s+t+10,t+10,20,20);
  14.      
  15.       fill(#777FFF);
  16.      
  17.       rect(s+t+30,t,10,10);
  18.       rect(s+t+40,t+10,20,20);
  19.      
  20.       fill(#07700F);
  21.      
  22.       rect(s+t+60,t,10,10);
  23.       rect(s+t+70,t+10,20,20);
  24.     }
  25.   }
  26. }
Basically, I just added t to the x position of every rectangle, as well as the translation as to fit the most on the screen...
I hope this helped
OK: I just expanded the length of the for loop so that it fills the entire screen, it's not perfect though:

Copy code
  1. void setup() {
  2.   size(500,500);
  3.   smooth();
  4.  }
  5. void draw() {
  6.   translate(-width, 0);
  7.  
  8.  for (int s = 0; s < 1000; s += 90) {
  9.     for (int t = 0; t < 6000; t += 30) {
  10.       fill(#0770FF);
  11.      
  12.       rect(s+t,t,10,10);
  13.       rect(s+t+10,t+10,20,20);
  14.      
  15.       fill(#777FFF);
  16.      
  17.       rect(s+t+30,t,10,10);
  18.       rect(s+t+40,t+10,20,20);
  19.      
  20.       fill(#07700F);
  21.      
  22.       rect(s+t+60,t,10,10);
  23.       rect(s+t+70,t+10,20,20);
  24.     }
  25.   }
  26. }
Thanks! That's awesome. I see what you did with adding the y value to the Xs and translate x -width. Super good. Much obliged.  
You can also cycle the colors:
The 1st draw() below makes colored diagonals, the 2nd draw() makes nice pattern too.
Copy code
  1. void setup() {
      size(1210,700);
      smooth();
      noLoop();
    }
  2. void draw() {
    color[] colA;
    colA=new color[3];
    colA[0]=color(#0770FF);
    colA[1]=color(#777FFF);
    colA[2]=color(#07700F);
    int ci=2;
    for (int s = 0; s < 1180; s += 90) {
        for (int t = 0; t < 4800; t += 30) {
          fill(colA[ci]);
          rect(s,t,10,10);
          rect(s+10,t+10,20,20);
          fill(colA[(ci+1)%3]);
          rect(s+30,t,10,10);
          rect(s+40,t+10,20,20);
          fill(colA[(ci+2)%3]);
          rect(s+60,t,10,10);
          rect(s+70,t+10,20,20);
          ci=(ci+2)%3;
        }
          ci=(ci+1)%3;
      }
    }
  3. void draw() {
    color[] colA;
    colA=new color[3];
    colA[0]=color(#0770FF);
    colA[1]=color(#777FFF);
    colA[2]=color(#07700F);
    int ci=2;
    for (int s = 0; s < 1180; s += 90) {
        for (int t = 0; t < 4800; t += 30) {
          fill(colA[ci]);
          rect(s,t,10,10);
          rect(s+10,t+10,20,20);
          fill(colA[(ci+1)%3]);
          rect(s+30,t,10,10);
          rect(s+40,t+10,20,20);
          fill(colA[(ci+2)%3]);
          rect(s+60,t,10,10);
          rect(s+70,t+10,20,20);
          ci=(ci+1)%3;
        }
      }
    }