# Rotating rectangles to face mouseX, mouseY

**URL:** <https://discourse.processing.org/t/rotating-rectangles-to-face-mousex-mousey/18690>\
**Category:** Coding Questions\
**Created:** [March 15, 2020, 8:01pm UTC](https://discourse.processing.org/t/rotating-rectangles-to-face-mousex-mousey/18690 "2020-03-15T20:01:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![spoke123](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@spoke123](https://discourse.processing.org/u/spoke123)\
**Post date:** [March 15, 2020, 8:01pm UTC](https://discourse.processing.org/t/rotating-rectangles-to-face-mousex-mousey/18690/1 "2020-03-15T20:01:52Z")

</div>

Hi everyone! I’ve taken a few years out from using processing so I’m sorry if I’m missing something pretty basic!

I’m trying to individually rotate each rectangle generated from a nested for loop to face the mouse coordinates - but at the moment each rectangle is rotating as a group. The rotation isn’t right yet either but I’m more concerned that they are rotating in unison for now… does anyone have any advice for getting them to act independently?

Thanks!

```auto
void setup() {
  pixelDensity(displayDensity());
  size(1000, 500);
  background(0);
  colorMode(HSB, 100);
  fill(0, 70, 70);
  rectMode(CENTER);
}

int totalRows = 5;
int totalColumns = 5;

void draw() {
  background(0);
  for (int row = 1; row <= totalRows; row++) {
    for (int column = 1; column <= totalColumns; column++) {
      
      float x1 = column * (width * 0.8 / totalColumns) + (0.05 * width); //set the center points of the rectangles
      float y1 = row * (height * 0.8 / totalRows) + (0.05 * height); //set the center points of the rectangles
      
      pushMatrix();
      translate(x1, y1); //go to center point
      float mX = mouseX + 1; //set to floats to allow division, + 1 to avoid division by 0 errors
      float mY = mouseY + 1; //set to floats to allow division, + 1 to avoid division by 0 errors
      rotate(atan((mY/(mX)))); //arctan of mouse coordiantes, considering rectangle center is now at (0,0) due to translation.
      rect(0, 0, width*0.05, height*0.01, width*0.005);
      popMatrix();
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![spoke123](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@spoke123](https://discourse.processing.org/u/spoke123)\
**Post date:** [March 15, 2020, 8:13pm UTC](https://discourse.processing.org/t/rotating-rectangles-to-face-mousex-mousey/18690/2 "2020-03-15T20:13:09Z")

</div>

I thought it might be helpful to show what I’m trying to achieve - here’s a rough illustration!

 ![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/50777665eb935be2714a3a62c2779905cf481f23.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 16, 2020, 1:35am UTC](https://discourse.processing.org/t/rotating-rectangles-to-face-mousex-mousey/18690/4 "2020-03-16T01:35:03Z")

</div>

Hello,

Try:

```auto
rotate(atan2(y1-mY, x1-mX));

```

See the reference:  
[https://processing.org/reference/atan2\_.html](https://processing.org/reference/atan2_.html)

`:) `

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f7ae6655a1b2afc3c0239ccb9ab033ac68d784e9.png)

---

<div class="post-metadata">

**Author:** ![spoke123](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@spoke123](https://discourse.processing.org/u/spoke123)\
**Post date:** [March 16, 2020, 1:34pm UTC](https://discourse.processing.org/t/rotating-rectangles-to-face-mousex-mousey/18690/5 "2020-03-16T13:34:07Z")

</div>

Amazing thank you so much!