Agar.io style ripple effect for canvas arcs

Question

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?

Answer 1

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);
var y = centerY+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(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 radius=100;
var amp=10;
var sineCount=10;

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

function sineCircleXYatAngle(cx,cy,radius,amplitude,angle,sineCount){
  var x = cx+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);
  var y = cy+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);
  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>

Answer 2

(late reply but probably more accurate than the accepted answer)

I was also wondering how this effect was done and since I couldn't find any informations about it I decided to dive into the obfuscated code.

Firstly, one should note that the cells are not circles but rather polygons. Every point of the polygon is constrained to keep the same distance from the center, which makes the calculations much easier. In addition each point has a velocity which is represented by a scalar (a positive velocity tends to move the point away from the center while a negative one will bring it closer). Whenever a point is out of the map or touches another point of a different cell, its velocity is decreased. At each iteration the velocity is added to the point and then increased by a small amount (natural decay).

With this set of rules and some (minor) additional constraints you should be able to reproduce this effect. I tried myself and ended up with a pretty good result.

Edit: I also made a Scala.js fiddle: https://scalafiddle.io/sf/FMoNM7c/0