Having trouble rotating each individual element in a double for loop with Processing

Question

So if you run this sketch you'll see a grid of plus signs. I want to rotate each individual but i can't seem to figure it out. I tried translate, pushMatrix/popMatrix. But maybe it's not on the right place. I removed it now, maybe someone can point out how to rotate each individual plus sign around its own axis.

int rib;
void setup() {
  size(1200, 800);
  rib = 7;
}


void draw() {
  background(0);
  for (int i = -100; i < width+100; i = i + rib * 10) {
    for (int j = -100; j < height+100; j = j + rib * 10) {
      noStroke();
      fill(255);

      plus(i, j);
      plus(3*rib+i, 1*rib+j);
      plus(6*rib+i, 2*rib+j);
      plus(9*rib+i, 3*rib+j);
      plus(2*rib+i, 4*rib+j);
      plus(5*rib+i, 5*rib+j);
      plus(8*rib+i, 6*rib+j);
      plus(1*rib+i, 7*rib+j);
      plus(4*rib+i, 8*rib+j);
      plus(7*rib+i, 9*rib+j);
    }
  }
}

void plus(int x, int y) {
  pushMatrix();
  beginShape();
  vertex(x+0, y+0);
  vertex(x+0, y+-rib);
  vertex(x+rib, y+-rib);
  vertex(x+rib, y+0);
  vertex(x+2*rib, y+0);
  vertex(x+2*rib, y+rib);
  vertex(x+rib, y+rib);
  vertex(x+rib, y+2*rib);
  vertex(x+0, y+2*rib);
  vertex(x+0, y+rib);
  vertex(x+-rib, y+rib);
  vertex(x+-rib, y+0);
  endShape(CLOSE);
  popMatrix();
}

Answer 1

Step 1: Use pushMatrix() to save the state of the current matrix.

You need to do this because you don't want the rotations to accumulate. If you rotate one shape 30 degrees and another one 45 degrees, you don't want the second shape to be rotated (30+45) degrees.

Here is the reference for pushMatrix().

Step 2: Use translate() to move your shape where it needs to be.

Make sure you then draw your shape with that coordinate as the origin! Right now you're drawing the shapes with x,y as the origin, when you need to be using 0,0 as the origin after a translate.

Here is the reference for translate().

Step 3: Use rotate() to rotate your shape around the origin.

Remember, you've now "moved" 0,0 to the x,y you passsed into the translate() function!

Step 4: Draw your shape.

Again, remember to use 0,0 as the origin, not x,y.

Here is the reference for rotate().

Step 5: Call popMatrix() to restore the matrix you had when you called `pushMatrix()'.

This restores the rotation and translation back to normal, so the next translation and rotations don't accumulate.

Here is the reference for popMatrix().

Step 6: Repeat.

Put all of the above into a function and then call it from a for loop to draw more than one shape.

Here is a simplified examples that draws rectangles:

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

void draw() {
  background(0);

  noStroke();
  fill(255);

  plus(100, 100);
  plus(200, 200);
}

void plus(float x, float y) {
  pushMatrix();
  translate(x, y);
  rotate(mouseX);
  rect(-20, -40, 40, 80);
  popMatrix();
}

Answer 2

Rotation axis is always at origin (0,0). So we gotta translate the origin to where we want the axis of rotation to be. In your case, draw the plus with it's center at (0,0) and use translate to move it to desired position. I made this example using a simpler square, but the idea is the same. (I'm out of time here:) See if this can help you.

void setup() {
  size(1200, 800);
  noStroke();
  fill(255);
}


void draw() {
  background(0);
  float a  = map(mouseY, 0, height, 30, 270);
  for (int i = -100; i < width+100; i+=40) {
    for (int j = -100; j < height+100; j+=40) {

      plus(i, j, a);
    }
  }
}

void plus(int x, int y, float a) {

  pushMatrix();
  translate(x, y);
  rotate(radians(a));
  beginShape();
  vertex(-10, -10);
  vertex(10, -10);
  vertex(10, 10);
  vertex(-10, 10);
  endShape(CLOSE);
  popMatrix();
}

You might like these tutorials:

http://processing.org/tutorials/transform2d/

https://processing.org/tutorials/pshape/