SOURCE

'use strict';

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

var Vector2 = function () {
	function Vector2() {
		var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
		var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];

		_classCallCheck(this, Vector2);

		this.x = x;
		this.y = y;
	}

	Vector2.prototype.addScalar = function addScalar(s) {
		return new Vector2(this.x + s, this.y + s);
	};

	Vector2.prototype.divideScalar = function divideScalar(s) {
		return new Vector2(this.x / s, this.y / s);
	};

	Vector2.prototype.multiply = function multiply(v) {
		return new Vector2(this.x * v.x, this.y * v.y);
	};

	return Vector2;
}();

var Line = function () {
	function Line(position) {
		var size = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
		var rotation = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
		var color = arguments.length <= 3 || arguments[3] === undefined ? '#000' : arguments[3];

		_classCallCheck(this, Line);

		this.position = position;
		this.size = size;
		this.rotation = rotation;
		this.color = color;
	}

	Line.prototype.render = function render(context) {
		var cos = Math.cos(this.rotation);
		var sin = Math.sin(this.rotation);
		var halfSize = this.size / 2;

		context.beginPath();
		context.moveTo(this.position.x + cos * -halfSize, this.position.y + sin * -halfSize);
		context.lineTo(this.position.x + cos * halfSize, this.position.y + sin * halfSize);

		context.strokeStyle = this.color;
		context.stroke();
	};

	Line.createColor = function createColor(rotation) {
		var hue = Math.round(rotation / Math.PI * 360) / 4;
		return 'hsl(' + hue + ', 80%, 60%)';
	};

	return Line;
}();

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

		this.canvas = document.createElement('canvas');
		this.context = this.canvas.getContext('2d');

		this.canvas.height = window.innerHeight;
		this.canvas.width = window.innerWidth;

		this.loop();
	}

	Simulation.prototype.getRandomLine = function getRandomLine() {
		var canvasSize = new Vector2(this.canvas.width, this.canvas.height);
		var cyclusProgres = performance.now() / Simulation.CYCLUS_DURATION;

		var length = Simulation.LINE_LENGTH + (Math.random() * 2 - 1) * Simulation.LINE_LENGTH_VARIATION;

		var position = new Vector2(Math.random() * 2 - 1, Math.random() * 2 - 1);
		var rotation = position.x * position.x + position.y * position.y + cyclusProgres;

		var color = Line.createColor(rotation);

		return new Line(position.addScalar(1).divideScalar(2).multiply(canvasSize), length, rotation, color);
	};

	Simulation.prototype.loop = function loop() {
		requestAnimationFrame(this.loop.bind(this));
		this.render();
	};

	Simulation.prototype.render = function render() {
		var start = performance.now();
		var linesDrawn = 0;

		// Clear frame
		this.context.save();
		this.context.globalAlpha = Simulation.CLEAR_ALPHA;

		this.context.fillStyle = Simulation.CLEAR_COLOR;
		this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
		this.context.fill();
		this.context.restore();

		this.context.save();
		this.context.globalAlpha = Simulation.LINE_ALPHA;
		this.context.globalCompositeOperation = 'lighter';

		do {
			this.getRandomLine().render(this.context);
			linesDrawn++;
		} while (performance.now() - start < 10 && linesDrawn < Simulation.MAX_LINES_PER_FRAME);
		this.context.restore();
	};

	Simulation.getInstance = function getInstance() {
		if (!Simulation._instance) {
			Simulation._instance = new Simulation();
		}

		return Simulation._instance;
	};

	return Simulation;
}();

Simulation.CLEAR_ALPHA = 1 / 16;
Simulation.CLEAR_COLOR = '#000';

Simulation.LINE_ALPHA = 1 / 2;
Simulation.LINE_LENGTH = 24;
Simulation.LINE_LENGTH_VARIATION = 8;

Simulation.CYCLUS_DURATION = 4000;
Simulation.MAX_LINES_PER_FRAME = 512;

document.body.appendChild(Simulation.getInstance().canvas);
Simulation.getInstance().loop();

canvas {
	display: block;
}