CODEWITHSUNDEEP
collisionp5.js
Nafiz Hisham
Nafiz Hisham

Reputation: 79

P5.JS: Collisions?

I have an idea of getting a circle grow in size if anywhere in the circle's area there is this object called "food". Though I have no idea how to implement it on my code. I have tried but of course the whole concept of my idea was off in trying to pull this off.

this.touch = function(){
    if (x > this.x && y > this.y){
        this.radius += 0.5;
    }
}

This is one of my functions in a constructor, the variable x and y is referencing the "food"'s position. The this.(variables) are referring to the object reacting to the food.

The code snippet on top does not work simply for the fact that I am asking the object to increase in size based on x and y positions, and that just doesn't work for my concept.

Can anyone give me some tips or send a link to something which could help.

Thanks in advance!

Upvotes: 1

Views: 164

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

I'd start by googling something like collision detection for a ton of results.

You can also narrow your search by adding the type of shapes you're talking about. For example, if your food is shown as a point, you might google (point circle collision detection". If your food is shown as a circle, you might google "circle circle collision detection".

If you're dealing with circles, you basically want to check the distance from the center of the circle. If that distance is less than the radius of the circle, then you have a collision. The dist() function will come in handy here.

Shameless self-promotion: here is a tutorial on collision detection. It's written for Processing, but all of the concepts apply to P5.js as well.

Upvotes: 1

Related Questions