# Collision with curved vertex

**URL:** <https://discourse.processing.org/t/collision-with-curved-vertex/7818>\
**Category:** Libraries\
**Created:** [January 24, 2019, 7:37pm UTC](https://discourse.processing.org/t/collision-with-curved-vertex/7818 "2019-01-24T19:37:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![animofa](https://avatars.discourse-cdn.com/v4/letter/a/f9ae1b/32.png) [@animofa](https://discourse.processing.org/u/animofa)\
**Post date:** [January 24, 2019, 7:37pm UTC](https://discourse.processing.org/t/collision-with-curved-vertex/7818/1 "2019-01-24T19:37:17Z")

</div>

Hello everyone,  
I am trying to make a simple game where one object is moving between to curvedVertexes.  
Now I want to add an event incase the object is colliding with the obstacles aka the curvedVertexes. I have found “collidePointPoly()” ([https://github.com/bmoren/p5.collide2D#collidepointpoly](https://github.com/bmoren/p5.collide2D#collidepointpoly)) to be a simular case. But once I have tried it out, the function stayed false even if there was a collision.

[https://glitch.com/edit/#!/wave-collision?path=index.html:181:1](https://glitch.com/edit/#!/wave-collision?path=index.html:181:1) (this is the link to my glitch project, since I find this the easiest to share)

 ![35](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0bf2cb1b98654e95951613e84d346a06e3c7104e.png)  
lowerhit should turn true, once the ball enters the tourquise area.

Does anyone know why this is not working?  
Thank you very much for the support

---

<div class="post-metadata">

**Author:** ![BennyHacker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bennyhacker/32/2969_2.png) [@BennyHacker](https://discourse.processing.org/u/BennyHacker)\
**Post date:** [January 24, 2019, 10:15pm UTC](https://discourse.processing.org/t/collision-with-curved-vertex/7818/2 "2019-01-24T22:15:23Z")

</div>

Not sure why the collision code isn’t working 😕

I do however have an alternative. It’s not p5.js, but I’m sure it should be easy to implement.

> **[Collision Detection](http://www.jeffreythompson.org/collision-detection/poly-circle.php)**
>
> An online book about collision detection using Processing.

The only problem is the collision isn’t accurate. I made an example where it’s clear what the difference between the graphic and the collision would be :  
 ![example5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e7c364354d5dd344d9f8ef75f82bb30f85487601.png)

The only way I can think of to fix this is somehow extracting the vertex data from the curveVertex and using that to define the polygon

---

<div class="post-metadata">

**Author:** ![animofa](https://avatars.discourse-cdn.com/v4/letter/a/f9ae1b/32.png) [@animofa](https://discourse.processing.org/u/animofa)\
**Post date:** [January 25, 2019, 2:19pm UTC](https://discourse.processing.org/t/collision-with-curved-vertex/7818/3 "2019-01-25T14:19:29Z")

</div>

Thank you for your response.  
I don’t mind the incorrectness too much, but I don’t really understand how I am able to transfer this script into javascript.  
Could you help me?

> **[Glitch](https://glitch.com/edit/#!/wave-collision-3?path=index.html:186:16)**
>
> Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

This is the project I have created therefore. I am very confused on how to transfer boolean into javascript. Also: Am I supposed to replace every PVector with creatVector?  
Thank you in advance

---

<div class="post-metadata">

**Author:** ![BennyHacker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bennyhacker/32/2969_2.png) [@BennyHacker](https://discourse.processing.org/u/BennyHacker)\
**Post date:** [January 25, 2019, 5:33pm UTC](https://discourse.processing.org/t/collision-with-curved-vertex/7818/4 "2019-01-25T17:33:46Z")

</div>

I’m afraid I’m too unfamiliar with p5.js to convert the code 😨

But I did manage to find a resource full of conversion tips on github

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Processing-transition)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

I hope this solves trying to make the boolean work

---

<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 28, 2019, 1:02am UTC](https://discourse.processing.org/t/collision-with-curved-vertex/7818/5 "2019-01-28T01:02:11Z")

</div>

You might be interested in this recent discussion of finding an intersection on a curve using line-line detection, where each part of the curve is a line segment.

> [@Get intersection point of line and CIE chromaticity curve](https://discourse.processing.org/t/get-intersection-point-of-line-and-cie-chromaticity-curve/6685):
>
> First, let me lay out what I’ve done so far and what I’m trying to do with this partially completed program. I’m attempting to convert the RGB pixel values to their corresponding wavelength by: Converting RGB to XYZ [check], Converting XYZ to Yxy [check], and Defining the dominant wavelength of xy [in progress]. The process of calculating the dominant wavelength of xy is laid out in [1,2] and summarized as follows for my purposes: 'Construct a line between the chromaticity coordinates of …

You could use circle-line collision detection in a similar approach.

> **[Collision Detection](http://www.jeffreythompson.org/collision-detection/line-circle.php)**
>
> An online book about collision detection using Processing.