# Collision detection with rotated objects

**URL:** <https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810>\
**Category:** Coding Questions\
**Created:** [June 3, 2019, 8:22pm UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810 "2019-06-03T20:22:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lizzy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lizzy/32/2064_2.png) [@lizzy](https://discourse.processing.org/u/lizzy)\
**Post date:** [June 3, 2019, 8:22pm UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810/1 "2019-06-03T20:22:20Z")

</div>

I am trying to detect collision between a rotated and non-rotated object. I’m using the p5 rotate function, and the objects are not in the same coordinate space. Thanks for your help!

```auto
   translate(width/2,height/2);
   t.drawTarget();
   a = atan2(mouseY - height / 2, mouseX - width / 2);
   push();
   rotate(a);
   me.drawMe();
   me.moveMe();
   for (let i = 0; i < arrow.length; i++) {
        arrow[i].drawArrow();
        arrow[i].moveArrow();
        arrow[i].hitTarget();
      }
    pop();

```

[link to the full code](https://editor.p5js.org/lizzybrooks/sketches/VV9y0sqhI)

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 4, 2019, 12:53am UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810/2 "2019-06-04T00:53:33Z")

</div>

My suggestion is that - if you need to do collision - don’t rely on rotate() to determine the position of your things. Instead, track the actual positions of your things, along with their actual velocities and actual accelerations. It’s fine to track the X- and Y- components of these things! Then any forces you apply can be broken into X- and Y- components with a little trig…

---

<div class="post-metadata">

**Author:** ![bigboss01](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bigboss01](https://discourse.processing.org/u/bigboss01)\
**Post date:** [December 26, 2021, 10:43pm UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810/3 "2021-12-26T22:43:47Z")

</div>

Hello,  
Many of Daniel Shiffman’s examples on youtube use rotate() to rotate a vector object, such as [this](https://editor.p5js.org/codingtrain/sketches/o5PwECj42) . When I replicate this code on my computer, the rectangles pass through the obstacle, due to this rotate difference.

How do I rotate my object without using `rotate(this.vel.heading())`? That’s a pretty convenient function because it allows me to tether the direction of my movement and my object’s direction.

I’m not so strong on vector math so I’d appreciate some help on how to rotate my object according to `this.vel.heading`.

---

<div class="post-metadata">

**Author:** ![lizzy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lizzy/32/2064_2.png) [@lizzy](https://discourse.processing.org/u/lizzy)\
**Post date:** [July 28, 2023, 4:19am UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810/4 "2023-07-28T04:19:04Z")

</div>

In case anyone is searching these old threads, I eventually learned not to use rotate() for collision detection and instead to rotate the objects using polar coordinates. My students run into this problem a lot, and now I always point them toward this nice tutorial [https://www.youtube.com/watch?v=N633bLi\_YCw](https://www.youtube.com/watch?v=N633bLi_YCw) (by the great Daniel Shiffman of course)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 28, 2023, 1:29pm UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810/5 "2023-07-28T13:29:34Z")

</div>

> [@lizzy](#):
>
> ```auto
> arrow[i].drawArrow();
> arrow[i].moveArrow();
> arrow[i].hitTarget();
> 
> ```

In pseudocode you are trying use one loop to do everything -

```auto
for each shape
    render the shape
    update the shape's position
    perform collision detection

```

This is not a good idea it is far better to separate these into different functions like this

```auto
perform 1:1 collision detection between all shapes
for each shape
    update the shape's position
for each shape
    render the shape

```

This simplifies the programming because you split the code into useful functions that can be written and debugged independently.