Agar.io style ripple effect for canvas arcs

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>

(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