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, canvasWidth, canvasHeight);
			var k = nLayers - p;
			layers[k % nLayers].transform(layers[(k + 1) % nLayers]);
			for (var i = 1; i < nLayers; ++i) {
				layers[++k % nLayers].draw(i + 1);
			}
			p = ++p % nLayers;
		};

var Layer = function () {
			function Layer(nPoints) {
				_classCallCheck(this, Layer);

this.n = nPoints;
				this.points = [];
				for (var i = 0; i < this.n; i++) {
					this.points[i] = {
						x: canvasWidth / (this.n - 1) * i,
						y: Math.random() * canvasHeight * 0.5
					};
				}
			}

Layer.prototype.transform = function transform(layer) {
				for (var i = 0; i < this.n; i++) {
					var _p = this.points[i];
					var v = vel[i];
					v.y += Math.random() * 1 - 0.5;
					v.y *= 0.99;
					_p.y = layer.points[i].y + v.y;
					if (_p.y < 0) {
						_p.y = 0;
						v.y *= -1;
					} else if (_p.y > canvasHeight * 0.5) {
						_p.y = canvasHeight * 0.5;
						v.y *= -1;
					}
				}
				var w = canvasWidth / (this.n - 1);
				for (var i = 1; i < this.n - 1; i++) {
					var _p2 = this.points[i];
					var v = vel[i];
					v.x += Math.random() * 0.5 - 0.25;
					v.x *= 0.99;
					_p2.x = layer.points[i].x + v.x;
					if (_p2.x < w * i - w * 0.45) {
						_p2.x = w * i - w * 0.45;
						v.x *= -1;
					} else if (_p2.x > w * i + w * 0.45) {
						_p2.x = w * i + w * 0.45;
						v.x *= -1;
					}
				}
			};

Layer.prototype.draw = function draw(i) {
				var z = 1.0 + i * zoom;
				var x = -canvasWidth * (i * zoom) * 0.5;
				ctx.beginPath();
				ctx.fillStyle = "hsla(42,20%," + (100 - 1.5 * i * 100 / nLayers) + "%,1)";
				ctx.moveTo(0, canvasHeight);
				for (var _i = 1; _i < this.n - 1; ++_i) {
					var p0 = this.points[_i];
					var p1 = this.points[_i + 1];
					ctx.quadraticCurveTo(x + p0.x * z, p0.y * z, x + (p0.x + p1.x) / 2 * z, (p0.y + p1.y) / 2 * z);
				}
				ctx.lineTo(canvasWidth, canvasHeight);
				ctx.fill();
			};

return Layer;
		}();
		// init canvas

CSS

HTML

Recommendation

Join Effecthub.com