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

**URL:** <https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510>\
**Category:** Coding Questions\
**Created:** [January 14, 2019, 4:22pm UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510 "2019-01-14T16:22:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Namrad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/namrad/32/15938_2.png) [@Namrad](https://discourse.processing.org/u/Namrad)\
**Post date:** [January 14, 2019, 4:22pm UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510/1 "2019-01-14T16:22:56Z")

</div>

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. 😓

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.

```auto
//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);

  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 14, 2019, 4:34pm UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510/2 "2019-01-14T16:34:30Z")

</div>

> [@Namrad](#):
>
> I have tried figuring it out with _push-/popMatrix();_ and _translate();_ commands, but so far it has only resulted in rotating the entire grid,

but that is the right way:

```auto
//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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Namrad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/namrad/32/15938_2.png) [@Namrad](https://discourse.processing.org/u/Namrad)\
**Post date:** [January 14, 2019, 4:41pm UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510/3 "2019-01-14T16:41:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 14, 2019, 4:45pm UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510/4 "2019-01-14T16:45:50Z")

</div>

> [@Namrad](#):
>
> How does the translate function ‘carry’ all the x, y values over to each rect?

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 22, 2019, 1:18am UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510/5 "2019-01-22T01:18:05Z")

</div>

@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/](https://processing.org/tutorials/transform2d/)

---

<div class="post-metadata">

**Author:** ![Namrad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/namrad/32/15938_2.png) [@Namrad](https://discourse.processing.org/u/Namrad)\
**Post date:** [January 22, 2019, 11:43am UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510/6 "2019-01-22T11:43:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 23, 2019, 9:07pm UTC](https://discourse.processing.org/t/solved-how-do-you-individually-rotate-objects-in-a-grid/7510/7 "2019-01-23T21:07:54Z")

</div>

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.

> [@Namrad](#):
>
> How does the translate function ‘carry’ all the x, y values over to each rect?

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.

> [@Sequence of rotation](https://discourse.processing.org/t/sequence-of-rotation/3184/6):
>
> It does if you are not using translations between the rotations. If not, no. You can try this out with a physical object in your hand to confirm – rotate a stick of butter 90 x, then 90 y, or 90 y then 90 x, and it ends up in the same orientation. If you translate, however, (See expanded examples below) IN GENERAL everything is order-dependent. You may want to make sure that you have completely worked out the 2D case, then add another dimension of rotation to tilt the axes. For example, her…