[SOLVED] How do you individually rotate objects in a grid?

Processing Coding Questions
1

Hello,

I’m fairly new to this forum, and a mostly autodidact Processing user and learner. Apologies if I’m not making myself properly clear, or if I’m making rookie formatting mistakes.

I have created an array of objects using a class called Object. These Objects I have placed in a simple 10x10 grid. I want to rotate each object (which currently is only a square) around their individual center, but I can’t for the life of me seem to figure out how to do it.
I understand that Processing is seen as a bit weird when talking about rotation. I have tried figuring it out with push-/popMatrix(); and translate(); commands, but so far it has only resulted in rotating the entire grid, and not individual squares. I must be doing something wrong with setting each matrix correctly, but I can’t wrap my head around out what. :sweat:

What’s the proper way to do this? Is there a better way to accomplish the result I’m looking for? Any help/advice will be incredibly appreciated.

//Grid data
int w = 500;
int h = 500;
int scl = 50;

int cols = w/scl;
int rows = h/scl;

int index = cols*rows;

//Object data
Object[] thing = new Object[index];

void setup() {
  size(500, 500);
  int k = 0;

  for (int y = 0; y<rows; y++) {
    for (int x = 0; x<cols; x++) {
      thing[k] = new Object((scl/2)+(x*scl), (scl/2)+(y*scl), k*2.7, (x+y)*2, 0);
      k++;
      println(k);
    }
  }
}

void draw() {
  background(0);

  for (int i = 0; i < index; i++) {
    thing[i].showObject();
  }

}


class Object {
  float x;
  float y;
  float size;
  float col;
  float boost = 0.1;

  float rot = 1;


  PVector loc;
  PVector rotation;
  PVector center;


  Object(float _x, float _y, float _col, float _size, float _rot) {

    rot = _rot;
    x = _x;
    y = _y;
    size = _size;
    col = _col;
  }

  void showObject() {
    rectMode(CENTER);
    fill(255);
    //stroke(255);
    noStroke();
    rect(x, y, size, size);

  }
}
2 Likes
2

but that is the right way:

//Grid data
int w = 500;
int h = 500;
int scl = 50;

int cols = w/scl;
int rows = h/scl;

int index = cols*rows;

//Object data
Object[] thing = new Object[index];

void setup() {
  size(500, 500);
  int k = 0;

  for (int y = 0; y<rows; y++) {
    for (int x = 0; x<cols; x++) {
      thing[k] = new Object((scl/2)+(x*scl), (scl/2)+(y*scl), k*2.7, (x+y)*2, random(PI));
      k++;
      println(k);
    }
  }
}

void draw() {
  background(0);

  for (int i = 0; i < index; i++) {
    thing[i].showObject();
  }
}


class Object {
  float x;
  float y;
  float size;
  float col;
  float boost = 0.1;

  float rot = 1;


  PVector loc;
  PVector rotation;
  PVector center;


  Object(float _x, float _y, float _col, float _size, float _rot) {

    rot = _rot;
    x = _x;
    y = _y;
    size = _size;
    col = _col;
  }

  void showObject() {
    rectMode(CENTER);
    fill(255);
    //stroke(255);
    noStroke();
    pushMatrix();
    translate(x,y);
    rotate(rot);
    rect(0, 0, size, size);
    popMatrix();
  }
}
2 Likes
3

Thanks a lot kll!! It works flawlessly.
I can’t believe how close I was. I’ve implemented the push-/popMatrix(); and translate(); functions exactly this way, but I forgot to alter the values of the square. I kept it at rect(x,y,0,0);.
How does the translate function ‘carry’ all the x, y values over to each rect? I don’t know if I understand it 100% completely. If you want could you elaborate a bit more?
If not thanks either way! I can finally keep tinkering on this sketch now, this had me stuck in a rud for nearly a week.

4

if you use push pop it does not,
the rot is a single property of each object
i set by a random ? you see ?
you change that, or disable that
and better write a animation script

where you get lost is when you rotate from the wrong center…
so the change

rectMode(CENTER);
push
translate(x,y)
rotate( angle )
rect(0,0…
pop

is the easy way

1 Like
5

@Namrad – if you aren’t already familiar with it, I strongly suggest reading the transformations tutorial, which contains illustrations to explain the changing frames of reference when you push and pop.

https://processing.org/tutorials/transform2d/

1 Like
6

Thanks for your suggestion Jeremy! I was familiar with how transformations regarding rotation in Processing work. The issue here is that I have only since recently started to make sketches which can be considered ‘somewhat’ more complex than the absolute basics.
I realised that what I wanted to do in this sketch should be possible using rotation transformations, I only couldn’t figure out how to do it exactly – specifically where and how to implement the code. It’s something I’m still struggling with, and have to keep practising.

7

Understood, @Namrad, and glad you are headed in the right direction. Yes, it did take me quite a bit to move from one transformation to looped or nested transformations.

The key thing to remember is that you are changing what “0,0” means each time you push. When you pop, you return to the previous definition of “0,0”.

There was an interesting related example a few months ago with a nested rotation sequence that you might find interesting – depending on where you are in the push / pop stack, 0,0 is the center of planet, or moon, or moon-of-a-moon, et cetera.

1 Like