How to make balls hit to each other and how to add url or div inside each ball?

Hey there, i found this cool thing https://jsfiddle.net/wvp4scLL/137/ and got some idea in my maind :smiley:

i m really not so good at this kind js :frowning:
i would like to make balls to change movement when they hit and also to add url or div inside balls !

Is that possible? Well i know it is but how to achieve this?

The normal way is to use the pythagoras theorem of a²+b²=c² where each ball is checked against every other ball. if the distance is smaller than the sum of their radii, you know that they have hit each other.

1 Like

i actually found something that bounce http://jsfiddle.net/vdcSv/50/ but some times it miss

That code’s a little more complex because they’re using squares rather than circles.

With circles, it’s pretty simple: Take the centerpoint of the circle (which is where SVG circles would be easier, because they define themselves as a centerpoint and radius, but the ones in your first fiddle can be found fairly simply too as x+width/2, y+height/2). Compare that to every other circle’s current centerpoint via a^2+b^2=c^2 (IE: dx^2+dy^2 = d^2, dx = x2-x1, dy = y2-y1, solve for d). If d <= radius of the circle * 2, they’ve collided.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.