Can I rotate PGraphics by its center axis?

Processing Coding Questions
1

Hello processing forum! I have this little code working, it starts by creating a few PGraphics on an array like this:

void shapesCreation(int nShapes) {
  shapes = new PGraphics[nShapes]; 
  for (int i = 0; i < shapes.length; i++) {
    shapes[i]= createGraphics(tileSizeX, tileSizeY);
  }
  shapes[0].beginDraw(); 
  shapes[0].beginShape();
  shapes[0].fill(hue);
  shapes[0].noStroke();
  shapes[0].endShape(CLOSE);
  shapes[0].endDraw();

  shapes[1].beginDraw(); 
  shapes[1].beginShape();
  shapes[1].fill(hue);
  shapes[1].noStroke();
  shapes[1].vertex(0, 0);
  shapes[1].vertex(width, 0);
  shapes[1].vertex(width, height);
  shapes[1].vertex(0, height);
  shapes[1].endShape(CLOSE);
  shapes[1].endDraw();

  shapes[2].beginDraw();
  shapes[2].beginShape();
  shapes[2].fill(hue);
  shapes[2].noStroke();
  shapes[2].vertex(0, 0);
  shapes[2].vertex(tileSizeX, 0);
  shapes[2].vertex(tileSizeX, tileSizeY);
  shapes[2].vertex(0, 0);
  shapes[2].endShape(CLOSE);
  shapes[2].endDraw();

  shapes[3].beginDraw();
  shapes[3].beginShape();
  shapes[3].fill(hue);
  shapes[3].noStroke();
  shapes[3].vertex(0, 0);
  shapes[3].vertex(0, tileSizeY);
  shapes[3].vertex(tileSizeX, tileSizeY);
  shapes[3].endShape(CLOSE);
  shapes[3].endDraw();

  shapes[4].beginDraw();
  shapes[4].beginShape();
  shapes[4].fill(hue);
  shapes[4].noStroke();
  shapes[4].vertex(0, 0);
  shapes[4].vertex(tileSizeX, 0);
  shapes[4].vertex(0, tileSizeY);
  shapes[4].endShape(CLOSE);
  shapes[4].endDraw();
}

Then i create a 2D PGraphics grid and store some random shapes:

void gridCreation() {

  for (int i=0; i < grid.length; i++) {
    for (int j=0; j < grid[i].length; j++) {
      int a = int(random(shapes.length));
      grid[i][j] = shapes[a];
    }
  }
}

I also have a render function that works like this:

void render() {
  background(back);

  for (int i=0; i < grid.length; i++) {
    for (int j=0; j < grid[i].length; j++) {
      int x = i * tileSizeX;
      int y = j * tileSizeY;

      pushMatrix();
      translate(x+tileSizeX/2, y);
      rotateY(radians(deg));
      image(grid[i][j], 0, 0);
      popMatrix();
    }
  }
  deg += 1;
  if (deg == 0) {
    gridCreation();
  }
  if (deg == 90) {
    gridCreation();
  }
  if (deg == 180+90) {
    gridCreation();
  }
  if (deg==360) {
    deg = 0;
  }
}

And my main program finally look like this:


int tileSizeX;
int tileSizeY;
int rows = 4;
int cols = 4;
float deg;
color hue = 220;
color back = 80;
PGraphics render;
PGraphics[][] grid = new PGraphics[rows][cols];
PGraphics[] shapes;
void setup() {
  size (800, 800, P3D);
  render = createGraphics(width, height, P3D); 
  camera(width/2.0, height/2.0, (height*0.9) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0);
  //Determine the size of all tiles
  if (rows > cols) {
    tileSizeX = width/rows;
    tileSizeY = tileSizeX;
  }
  if (cols > rows) {
    tileSizeY = height/cols;
    tileSizeX = tileSizeY;
  } else {
    tileSizeX = width/rows;
    tileSizeY = tileSizeX;
  }

  shapesCreation(15);
  gridCreation();
}
void draw() {
  render();
}


void gridCreation() {

  for (int i=0; i < grid.length; i++) {
    for (int j=0; j < grid[i].length; j++) {
      int a = int(random(shapes.length));
      grid[i][j] = shapes[a];
    }
  }
}

Thing is working! as you can see in the render() function i added a rotation, i was struggling to make all the shapes rotate by the middle of the axis instead of upper left corner, then i went back to the reference and found this:

Shapes are always rotated around the upper-left corner of their bounding box.

And now i just really dont know what to do :sweat_smile:
Maybe i have to convert every shape to an PImage to do this? Or maybe another way around this?
Also, feel free to point out bad decisions/code in my sketch, i am having tons of fun with processing but i doubt my code is really nice or efficient.

2

Hello,

Another approach:

:)

1 Like