how to optimize collision in processing.js

sebastiako

how to optimize collision in processing.js

in Processing with Other Languages • 8 months ago

Hi list, i have a simple program in processing.js where a group of spheres are moving randomly and colliding between them .
For calculating the collision im calculating the distance between all the spheres, the problem is that when i have more than 20 spheres my processing.js app become slow.

I would like to know if there is a way of optimizing the calculation of distance between all the spheres in processing.js

is there is a trick for this?

Seb.

Replies(4)

PhiLho

Re: how to optimize collision in processing.js

8 months ago

Basically, there is no special trick for JavaScript: the algorithms are the same whatever the programming language.
Note that you don't need to compute dist(), with its costly (CPU-wise) square-root calculation. If all you need is to check that the distance is below a threshold, you can as well check if the square of the distance (ie. dx^2 + dy^2, so computed with the sqrt) is below the square of the threshold (computed only once, of course).

For complex cases, another trick is to use a quadtree.

sebastiako

Re: how to optimize collision in processing.js

8 months ago

Hi , in standard processing i used to use the glultils library that has a class called hashgrid that allow optimize the distintance. Is it possible to use this same library in processing.js ?

If not do anybody have implemented quadtree in processing? is there is an example of this?

thanks

Seb.

quarks

Re: how to optimize collision in processing.js

8 months ago

I created this sketch to demonstrate using a quadtree to reduce the number of object-object collisions to be processed.

Although created for standard Java it should be psossible to convert for Processing.js

Download the sketch from here and unzip it into your Processing folder.
Before you run Processing open the sketch in Windows Explorer/Finder or whatever and change the file extension of all the extra files from .java to .pde
Delete the import g4p_controls statement
Delete all the code related to creating and updating the GUI control window
Delete all the event handling code
Change all LinkedList references to ArrayList

Hopefully it will now work in JAVASCRIPT mode (BTW I have not tested this)

allonestr..

Re: how to optimize collision in processing.js

8 months ago

I took a slightly different tack and used a grid to determine whether there should be a collision.

If the ball's in a cell on one side of the stage and another ball's in a cell on the other side, then they are not going to collide, so we don't need to check them.

You look at each cell in the grid to see if there are any balls in it, if there are, then you look at the cell's neighbours to see if there are any balls in them, and if there are, pair up the balls in those cells and test for collision.

I've run something up here. I've put lots of comments in and it's reasonably stable. I don't know why it crashes now and then; feel free to let me know!

Top Reply