Эффект пульсации Agar.io для дуг холста

Question

Мне очень нравится, как они создали онлайн-агарио. Я думал: «Как они создали этот эффект пульсации для краев?»

Есть несколько вещей, которые я мог думать:

1) Граница состоит из множества векторных точек, поэтому позволяет гибкую анимацию границы.

2) Граница представляет собой предопределенный gif, такой как анимация.

3) Существует множество невидимых пикселей вокруг края. Они вращаются вокруг дуги и активируют несколько групп этих пикселей, поэтому создают иллюзию, что граница «сжимается» и «убирается».

Как это можно сделать в холсте HTML5? Считаете ли вы, что одна из моих 3 идей для решения применима или сложнее?

Answer 1

Что вы можете сделать, это многократно нарисовать синусоидальную волну вокруг окружности круга.

Уравнения, чтобы получить синусоиду [х, у] точка под любым углом по окружности являются:

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>

Answer 2

(поздний ответ, но, вероятно, более точным, чем принято отвечать)

Мне было также интересно, как это эффект был сделан, и поскольку я не мог найти никакой информации об этом, я решил погрузиться в запутанный код.

Во-первых, следует отметить, что ячейки не являются кругами, а полигонами. Каждая точка многоугольника ограничена тем же углом с центром, что значительно упрощает вычисления. Кроме того, каждая точка имеет скорость, которая представляется скаляром (положительная скорость стремится перемещать точку от центра, а отрицательный - ближе). Всякий раз, когда точка выходит из карты или касается другой точки другой ячейки, ее скорость уменьшается. На каждой итерации скорость добавляется к точке, а затем увеличивается на небольшое количество (естественный распад).

С помощью этого набора правил и некоторых (дополнительных) дополнительных ограничений вы сможете воспроизвести этот эффект. Я попробовал себя и ended up with a pretty good result.

Редактировать: Я также сделал Scala.js скрипку: https://scalafiddle.io/sf/FMoNM7c/0