Agar.io style ripple effect for canvas arcs

Question

I really like how they created online agario. I thought, "How did they create this ripple effect for the edges?"

There are a few things I could think of:

1) The border consists of many vector points, so it allows flexible animation of the border.

2) A border is a predefined gif animation.

3) There are a lot of invisible pixels on the edge. They rotate around the arc and activate several groups of these pixels, so they create the illusion that the border is “compressed” and “removed”.

How can this be done in HTML5 canvas? Do you think that one of my three ideas for the solution is applicable or more complicated?

Answer 1

, .

[x, y] :

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

centerX, centerY and radius .

amplitude , .

sineCount - , .

angle - , "" [x, y].

:

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>

Hide result

Answer 2

( , , , , )

, , , .

-, , , . , . , , ( , - ). , , . , ( ).

() . , .

. Scala.js: https://scalafiddle.io/sf/FMoNM7c/0