Agar.io风格的波纹效果为帆布弧

Question

我真的很喜欢他们如何创建在线游戏agario。我一直在想：“他们是如何为边缘创造这种涟漪效应的？”

我能想到一些事情：

1）边框由许多矢量点组成，因此可以灵活地绘制边框。

2）边框是预定义的gif，如动画。

3）边缘周围有许多不可见的像素。它们围绕弧线循环并激活这些像素的几组，因此产生了边界“收缩”和“收缩”的错觉。

如何在HTML5画布中完成这样的事情？你认为解决方案的3个想法中有一个适用还是比它更复杂？

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是圆圈周围的当前角度，你想要的是“sined”[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>

Answer 2

（迟到的回复但可能比接受的答案更准确）

我也想知道这种影响是如何完成的，因为我无法找到任何关于它的信息，所以我决定深入研究混淆代码。

首先，应该注意细胞不是圆形而是多边形。多边形的每个点都被约束为与中心保持相同的角度，这使得计算更容易。此外，每个点都有一个由标量表示的速度（正速度往往会使点远离中心，而负值会使点靠近中心）。每当一个点离开地图或触及另一个单元的另一个点时，其速度就会降低。在每次迭代中，速度被加到该点上，然后增加少量（自然衰变）。

使用这组规则和一些（次要）附加约束，您应该能够重现此效果。我试过自己和ended up with a pretty good result。

编辑：我还制作了一个Scala.js小提琴：https://scalafiddle.io/sf/FMoNM7c/0