# Rotated polygons with collision detection

**URL:** <https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755>\
**Category:** Coding Questions\
**Created:** [April 29, 2019, 12:44pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755 "2019-04-29T12:44:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoeM](https://avatars.discourse-cdn.com/v4/letter/j/0ea827/32.png) [@JoeM](https://discourse.processing.org/u/JoeM)\
**Post date:** [April 29, 2019, 12:44pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/1 "2019-04-29T12:44:21Z")

</div>

How can i detect the collision between two polygons with different rotations?

i use the p5.collide2d Lib, but it don´t know how to apply rotation to it.

---

<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:** [May 1, 2019, 9:49pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/2 "2019-05-01T21:49:01Z")

</div>

p5.collide2d compares polygons in the same coordinate space. How are you rotating your polygons? Rather than using `rotate()` to change the display (but keep the value the same), you instead need to replace each point in the polygon with a rotated point. If your polygons are centered around 0,0, then you can just call p5.Vector.rotate() on each.

[https://p5js.org/reference/#/p5.Vector/rotate](https://p5js.org/reference/#/p5.Vector/rotate)

If they are not, first subtract the center from each point, then rotate it, then add the center back. Now your polygon data is rotated and you can compare two polygons as normal with p5.collide2d.

---

<div class="post-metadata">

**Author:** ![JoeM](https://avatars.discourse-cdn.com/v4/letter/j/0ea827/32.png) [@JoeM](https://discourse.processing.org/u/JoeM)\
**Post date:** [May 2, 2019, 5:49pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/3 "2019-05-02T17:49:35Z")

</div>

Thanks, that helped.

Now i have another issue, angleMode(DEGREES) is not working with vectors, it´s always RADIANS.

There was a bug last year fixed, but i have still this bug.  
Newest p5 version downloaded today.

Someone else has this bug too?

On the p5 website DEGREES is working properly

---

<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:** [May 2, 2019, 9:35pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/4 "2019-05-02T21:35:56Z")

</div>

This is the latest p5.js source downloaded from github? OR is this in p5.js mode in the PDE app…? Have you gone into Contributions Manager \> Modes and updated p5.js to latest?

---

<div class="post-metadata">

**Author:** ![JoeM](https://avatars.discourse-cdn.com/v4/letter/j/0ea827/32.png) [@JoeM](https://discourse.processing.org/u/JoeM)\
**Post date:** [May 3, 2019, 10:15am UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/5 "2019-05-03T10:15:51Z")

</div>

I just downloaded the the p5.js file from the [p5js.org](http://p5js.org) website.

The web editor on the [p5.org](http://p5.org) website works properly with vector rotation and angleMode, but not with the downloaded/local p5.js file.

LOCAL  
draw(){  
angleMode(DEGREES) // not respected  
vec.rotate(1) // adds 1 radians every frame  
}

WEB EDITOR  
angle = 1  
draw(){  
angleMode(DEGREES) // works  
vec.roate(angle) // adds 1 degree every frame  
angle++  
}

Looks like i have this issue, but this was fixed? early 2018.

> <https://github.com/processing/p5.js/issues/2541>

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 3, 2019, 10:29am UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/6 "2019-05-03T10:29:54Z")

</div>

> [@JoeM](#):
>
> I just downloaded the the p5.js file from the [p5js.org](http://p5js.org) website.

We don’t need to download anything in order to use JS libraries! 🙅‍♂️

We just need an “.html” template file like this 1: 😮

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

And btW, here’s some sketch that also relies on `angleMode(DEGREES)`: 🔺

> <https://gist.github.com/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267>

More tips to run p5js sketches locally: 💁‍♂️

> [@Code 800A0404 issue](https://discourse.processing.org/t/code-800a0404-issue/2036/3):
>
> Easiest & fastest recipe to run “.js” sketches under p5.js: running_man Install any Firefox-based browser in your OS and use it to open your “index.html” file: fox_faceInstall Notepad2 or Notepad++ (or both) in your OS and use it to type in your “sketch.js” file there: scroll[https://XhmikosR.GitHub.io/notepad2-mod/](https://XhmikosR.GitHub.io/notepad2-mod/)[https://Notepad-Plus-Plus.org](https://Notepad-Plus-Plus.org) You can setup those text editors to use UTF-8 and LF line endings for better compatibility. bulbHere’s my minimum “index.html” te…

---

<div class="post-metadata">

**Author:** ![JoeM](https://avatars.discourse-cdn.com/v4/letter/j/0ea827/32.png) [@JoeM](https://discourse.processing.org/u/JoeM)\
**Post date:** [May 3, 2019, 10:37am UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/7 "2019-05-03T10:37:20Z")

</div>

I tried this too with

\<script src=https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js

no difference

The cube example don´t use vector.rotation() nowhere bdw.  
I just mean the rotation method don´t respects the DEGREES mode.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 3, 2019, 11:04am UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/8 "2019-05-03T11:04:29Z")

</div>

Both [https://cdn.JsDelivr.net/npm/p5](https://cdn.JsDelivr.net/npm/p5) & [https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js](https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js) should grab the latest version `/*! p5.js v0.8.0 April 08, 2019 */`

Method p5.Vector::**rotate()**:

> <https://github.com/processing/p5.js/blob/0.8.0/src/math/p5.Vector.js#L1116-L1123>

Internally invokes “secret” method p5::**\_toRadians()** passing variable _newHeading_ to it:

> <https://github.com/processing/p5.js/blob/0.8.0/src/math/trigonometry.js#L340-L345>

Which is expected to multiply its parameter _angle_ by constant DEG\_TO\_RAD if “secret” property p5::_\_angleMode_’s current value is the constant DEGREES.

---

<div class="post-metadata">

**Author:** ![JoeM](https://avatars.discourse-cdn.com/v4/letter/j/0ea827/32.png) [@JoeM](https://discourse.processing.org/u/JoeM)\
**Post date:** [May 3, 2019, 1:27pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/9 "2019-05-03T13:27:14Z")

</div>

Okay, i found it.

i did vec = new p5.Vector(x,y) instead of createVector(x,y).

Thanks for the answers.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 3, 2019, 1:36pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755/10 "2019-05-03T13:36:59Z")

</div>

`createVector(x, y, z)` is equivalent to `new p5.Vector(this, [x, y, z])`. 🤓

W/o passing the sketch’s p5 reference to PVector, it won’t be able to call p5::**\_toRadians()**. 😬

> <https://github.com/processing/p5.js/blob/0.8.0/src/math/math.js#L42-L48>

  

> <https://github.com/processing/p5.js/blob/0.8.0/src/math/p5.Vector.js#L52-L66>