I really love how they created the online game agario. I have been thinking: "How did they created this ripple effect for the edges?"
There are a few things I could think of:
1) The border is made of many vector points, therefore allowing flexible animation of the border.
2) The border is a predefined gif like animation.
3) There are many invisible pixels around the edge. They loop around the arc and activate a few groups of those pixels, therefore creating an illusion that the border is "contracting" and "retracting".
How can something like this be done in HTML5 canvas? Do you think one of my 3 ideas for a solution apply or is it more complex than that?
What you can do is repeatedly draw a sine wave around the circumference of a circle.
The equations to get the sine wave [x,y] point at any angle around a circle are:
The
centerX, centerY and radius
define the circle.The
amplitude
determines how far from the circle's circumference the sine wave will travel.The
sineCount
is the number of complete sine waves that will be drawn around the circle.The
angle
is the current angle around the circle which you desire the "sined" [x,y].Here's an example and a Demo: