# Agar.io style ripple effect for canvas arcs

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?

On Best Solutions

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:

``````var x = centerX+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);
``````

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:

``````var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var cx=150;
var cy=150;
var amp=10;
var sineCount=10;

ctx.beginPath();
for(var i=0;i<360;i++){
var angle=i*Math.PI/180;
ctx.lineTo(pt.x,pt.y);
}
ctx.closePath();
ctx.stroke();

return({x:x,y:y});
}``````
``````body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }``````
``<canvas id="canvas" width=300 height=300></canvas>``

On