EffectHub.com: your best source for gaming

Recommendation

More Effects...

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

{
	(function () {
		// main loop

var run = function run() {
			requestAnimationFrame(run);
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			pointer.lerp(0.05);
			if (M < 0.25 * Math.min(canvas.width, canvas.height)) M += 0.5;
			doots[pos % num].init(M);
			for (var i = pos; i < pos + num; ++i) {
				doots[i % num].move();
			}
			++pos;
		};

var Doots = function () {
			function Doots() {
				_classCallCheck(this, Doots);

this.r = 0;
				this.x = 0;
				this.y = 0;
				this.a = 0;
			}

Doots.prototype.init = function init(d) {
				var x = Math.cos(pos / 40) * d;
				var y = Math.sin(pos / 34) * d;
				this.r = 2;
				this.x = pointer.ex + x;
				this.y = pointer.ey + y;
				this.a = Math.atan2(pointer.y + y - pointer.ey, pointer.x + x - pointer.ex);
			};

Doots.prototype.plot = function plot(x, y) {
				var px = Math.cos(x + this.a);
				var py = Math.sin(y + this.a);
				ctx.beginPath();
				ctx.arc(this.x + this.r * px, this.y + this.r * py, this.r * 0.5, 0, 2 * Math.PI);
				ctx.fill();
			};

Doots.prototype.move = function move() {
				this.r *= 1.05;
				ctx.fillStyle = "hsl(" + (this.x / canvas.width * 180 + this.y / canvas.height * 180) + ", 70%, " + 1 * (K / this.r) + "%";
				var x = 0,
				    y = 0,
				    inc = Math.PI / 2;
				this.plot(x += inc, y += inc);
				this.plot(x += inc, y += inc);
				this.plot(x += inc, y += inc);
				this.plot(x += inc, y += inc);
			};

return Doots;
		}();
		// setup canvas

CSS

HTML

Recommendation

Join Effecthub.com