Rotated polygons with collision detection

p5.js Coding Questions
1

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.

1 Like
2

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

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.

2 Likes
3

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

4

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?

5

I just downloaded the the p5.js file from the p5js.org website.

The web editor on the 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.

1 Like
6

We don’t need to download anything in order to use JS libraries! :no_good_man:

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

<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): :small_red_triangle:

More tips to run p5js sketches locally: :tipping_hand_man:

7

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.

8

Both https://cdn.JsDelivr.net/npm/p5 & 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():

Internally invokes “secret” method p5::_toRadians() passing variable newHeading to it:

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.

9

Okay, i found it.

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

Thanks for the answers.

1 Like
10

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

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


1 Like