javascript - Agar.io style ripple effect for canvas arcs - Stack Overflow

admin管理员组

文章数量:1324078

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 plex than that?

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 plex than that?

• javascript
• canvas

Share Improve this question Follow edited Nov 8, 2015 at 4:19 markE 105k1111 gold badges170170 silver badges183183 bronze badges asked Nov 7, 2015 at 19:08 AspergerAsperger 3,2221111 gold badges5959 silver badges106106 bronze badges 4

• @markE just enter a guest name and hit play and you will see the effect agar.io – Asperger Commented Nov 8, 2015 at 2:55
• Better than an image ; ) – Asperger Commented Nov 8, 2015 at 2:55
• @markE flockdraw./gallery/view/2097796 – Asperger Commented Nov 8, 2015 at 3:17
• Might not be a very good drawing but you can see what I mean. The edges are somehow liquid. Kind of like some bacteria or cell movement of the membrane. I think this might only be achievable with svg or maybe even creating a canvas polygon and animating the points. Not sure what the best method would be – Asperger Commented Nov 8, 2015 at 3:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 plete 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

本文标签： javascriptAgario style ripple effect for canvas arcsStack Overflow