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"); } }

var emitter = void 0,
    mouse = void 0;

var Mouse = function () {
	function Mouse(x, y) {
		var _this = this;

_classCallCheck(this, Mouse);

this.hover = false;
		this.targetPosition = new Vector2(0.5 * window.innerWidth, 0.6 * window.innerHeight);
		this.position = new Vector2(0.5 * window.innerWidth, 0.4 * window.innerHeight);
		window.addEventListener("mousemove", function (e) {
			_this.targetPosition.x = e.clientX;
			_this.targetPosition.y = e.clientY;
			_this.hover = true;
		});

window.addEventListener("mouseout", function () {
			_this.targetPosition.x = 0.5 * window.innerWidth;
			_this.targetPosition.y = 0.6 * window.innerHeight;
			_this.hover = false;
		});

window.addEventListener("resize", this.resize.bind(this));
	}

_createClass(Mouse, [{
		key: "resize",
		value: function resize() {
			this.targetPosition.x = 0.5 * window.innerWidth;
			this.targetPosition.y = 0.6 * window.innerHeight;
		}
	}, {
		key: "update",
		value: function update() {
			this.position.lerp(this.targetPosition, 0.025);
		}
	}]);

return Mouse;
}();

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

this.init();
	}

_createClass(Ray, [{
		key: "init",
		value: function init() {
			this.ttl = 100 + rand(200);
			this.life = 0;
			this.growth = round(rand(1)) ? 0.5 : -0.5;
			this.len = round(0.35 * window.innerHeight * rand(1)) + 100;
			this.width = 3 * rand(0.5);
			this.velocity = 0.25 - rand(0.5);
			this.position = {};
			this.position.start = new Vector2(window.innerWidth * rand(1), window.innerHeight * 0.5 + (15 - rand(30)));
			this.angle = this.position.start.angleTo(mouse.position);
			this.position.end = new Vector2(this.position.start.x + this.len * cos(this.angle), this.position.start.y + this.len * sin(this.angle));
			this.hue = round(40 + rand(20));
			this.saturation = round(50 + rand(20));
		}
	}, {
		key: "color",
		value: function color(ctx) {
			this.alpha = fadeInOut(this.life, this.ttl);

var color1 = "hsla(" + this.hue + ",100%,100%,0)",
			    color2 = "hsla(" + this.hue + "," + this.saturation + "%,70%," + this.alpha + ")",
			    color3 = "hsla(" + this.hue + ",50%,70%,0)",
			    gradient = ctx.createLinearGradient(this.position.start.x, this.position.start.y, this.position.end.x, this.position.end.y);

gradient.addColorStop(0, color1);
			gradient.addColorStop(0.25, color2);
			gradient.addColorStop(1, color3);

return gradient;
		}
	}, {
		key: "update",
		value: function update() {
			this.life++;
			this.len += this.growth;
			this.angle = mouse.position.angleTo(this.position.start);
			this.position.end.x = this.position.start.x + this.len * cos(this.angle);
			this.position.end.y = this.position.start.y + this.len * sin(this.angle);
			this.position.start.addScalarX(this.velocity);
			this.position.end.addScalarX(this.velocity);
			if (this.life > this.ttl) this.init();
		}
	}, {
		key: "draw",
		value: function draw(canvas) {
			canvas.line(this.position.start.x, this.position.start.y, this.position.end.x, this.position.end.y, this.width, this.color(canvas.buffer));
		}
	}]);

return Ray;
}();

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

this.life = Math.round(rand(200));
		this.init();
	}

_createClass(Particle, [{
		key: "init",
		value: function init() {
			this.ttl = 100 + rand(300);
			this.radius = 3 + rand(3);
			this.position = new Vector2(window.innerWidth * rand(1), window.innerHeight * 0.5 + (15 - rand(30)));
			this.velocity = new Vector2(0.25 - rand(0.5), 0.25 - rand(0.5));
			this.hue = Math.round(50 + rand(20));
		}
	}, {
		key: "color",
		value: function color(ctx) {
			this.alpha = 0.65 * this.wave;
			return "hsla(" + this.hue + ",50%,75%," + this.alpha + ")";
		}
	}, {
		key: "update",
		value: function update() {
			this.life++;
			this.wave = fadeInOut(this.life, this.ttl);
			var nTheta = noise.simplex3(this.position.x * 0.0025, this.position.y * 0.0025, this.life * 0.0025) * TAU;
			var mTheta = mouse.position.angleTo(this.position);
			this.velocity.lerp({
				x: cos(nTheta),
				y: sin(nTheta)
			}, 0.05).lerp({
				x: cos(mTheta),
				y: sin(mTheta)
			}, 0.075);
			this.position.add(this.velocity);
			if (this.life > this.ttl) {
				this.life = 0;
				this.init();
			}
		}
	}, {
		key: "draw",
		value: function draw(canvas) {
			canvas.arc(this.position.x, this.position.y, this.radius * this.wave + 1, 0, TAU, this.color(canvas.buffer));
		}
	}]);

return Particle;
}();

var Canvas = function () {
	function Canvas(selector) {
		_classCallCheck(this, Canvas);

this.element = document.querySelector(selector) || function () {
			var element = document.createElement("canvas");
			element.style = "position: absolute; width: 100vw; height: 100vh;";
			document.body.appendChild(element);
			return element;
		}();
		this.ctx = this.element.getContext("2d");
		this.frame = document.createElement("canvas");
		this.buffer = this.frame.getContext("2d");
		this.dimensions = new Vector2();
		window.addEventListener("resize", this.resize.bind(this));
		this.resize();
	}

_createClass(Canvas, [{
		key: "resize",
		value: function resize() {
			this.dimensions.x = this.frame.width = this.element.width = window.innerWidth;
			this.dimensions.y = this.frame.height = this.element.height = window.innerHeight;
		}
	}, {
		key: "clear",
		value: function clear() {
			this.ctx.clearRect(0, 0, this.dimensions.x, this.dimensions.y);
			this.buffer.clearRect(0, 0, this.dimensions.x, this.dimensions.y);
		}
	}, {
		key: "line",
		value: function line(x1, y1, x2, y2, w, c) {
			this.buffer.beginPath();
			this.buffer.strokeStyle = c;
			this.buffer.lineWidth = w;
			this.buffer.moveTo(x1, y1);
			this.buffer.lineTo(x2, y2);
			this.buffer.stroke();
			this.buffer.closePath();
		}
	}, {
		key: "rect",
		value: function rect(x, y, w, h, c) {
			this.buffer.fillStyle = c;
			this.buffer.fillRect(x, y, w, h);
		}
	}, {
		key: "arc",
		value: function arc(x, y, r, s, e, c) {
			this.buffer.beginPath();
			this.buffer.fillStyle = c;
			this.buffer.arc(x, y, r, s, e);
			this.buffer.fill();
			this.buffer.closePath();
		}
	}, {
		key: "render",
		value: function render() {
			this.ctx.drawImage(this.frame, 0, 0);
		}
	}, {
		key: "drawImage",
		value: function drawImage(image) {
			var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
			var y = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;

this.buffer.drawImage(image, x, y);
		}
	}]);

return Canvas;
}();

var Emitter = function () {
	function Emitter() {
		var _this2 = this;

_classCallCheck(this, Emitter);

this.background = new Canvas("background");
		this.canvas = new Canvas(".canvas");
		this.rayCount = 200;
		this.particleCount = 200;
		this.title = {
			element: document.querySelector(".title"),
			value: "Rays & Particles"
		};
		this.input = {
			rays: {
				element: document.querySelector("#ray-input"),
				label: document.querySelector(".ray-count"),
				value: "Rays: " + this.rayCount
			},
			particles: {
				element: document.querySelector("#particle-input"),
				label: document.querySelector(".particle-count"),
				value: "Particles: " + this.particleCount
			}
		};
		this.input.rays.element.addEventListener("input", function (e) {
			_this2.rayCount = e.target.value;
			_this2.updateLabels();
		});
		this.input.particles.element.addEventListener("input", function (e) {
			_this2.particleCount = e.target.value;
			_this2.updateLabels();
		});
		this.input.rays.element.addEventListener("change", this.init.bind(this));
		this.input.particles.element.addEventListener("change", this.init.bind(this));
		this.init();
	}

_createClass(Emitter, [{
		key: "init",
		value: function init() {
			this.objects = [];
			for (var i = 0; i < this.rayCount; i++) {
				this.objects.push(new Ray());
			}
			for (var _i = 0; _i < this.particleCount; _i++) {
				this.objects.push(new Particle());
			}
			this.updateTitle();
			this.updateLabels();
		}
	}, {
		key: "updateLabels",
		value: function updateLabels() {
			this.input.rays.value = "Rays: " + this.rayCount;
			this.input.rays.label.innerHTML = this.input.rays.value;
			this.input.particles.value = "Particles: " + this.particleCount;
			this.input.particles.label.innerHTML = this.input.particles.value;
		}
	}, {
		key: "updateTitle",
		value: function updateTitle() {
			if (this.rayCount > 0 || this.particleCount > 0) {
				this.title.value = "\n\t\t\t\t" + (this.rayCount > 0 ? "Rays" : "") + "\n\t\t\t\t" + (this.rayCount > 0 && this.particleCount > 0 ? " & " : "") + "\n\t\t\t\t" + (this.particleCount > 0 ? "Particles" : "") + "\n\t\t\t";
			} else {
				this.title.value = "¯\\_(ツ)_/¯";
			}
			this.title.element.innerHTML = this.title.value;
		}
	}, {
		key: "drawBackground",
		value: function drawBackground() {
			var color1 = "rgb(31,31,18)",
			    color2 = "rgb(159,159,101)",
			    gradient = this.canvas.buffer.createLinearGradient(0.5 * this.canvas.dimensions.x, 0, 0.5 * this.canvas.dimensions.x, this.canvas.dimensions.y);
			gradient.addColorStop(0, color1);
			gradient.addColorStop(0.5, color2);
			gradient.addColorStop(1, color1);
			this.background.rect(0, 0, this.canvas.dimensions.x, this.canvas.dimensions.y, gradient);
			this.background.buffer.save();
			this.background.buffer.filter = "blur(6px)";
			this.background.buffer.globalCompositeOperation = "lighter";
			this.background.drawImage(this.canvas.frame);
			this.background.buffer.restore();
			this.background.render();
		}
	}, {
		key: "render",
		value: function render() {
			this.canvas.clear();
			for (var i = 0; i < this.objects.length; i++) {
				this.objects[i].update();
				this.objects[i].draw(this.canvas);
			}
			this.canvas.render();
			this.drawBackground();
		}
	}]);

return Emitter;
}();

function loop() {
	mouse.update();
	emitter.render();
	window.requestAnimationFrame(loop);
}

window.requestAnimationFrame = function () {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
		window.setTimeout(callback, 1000 / 60);
	};
}();

window.onload = function () {
	noise.seed(Math.round(2000 * rand(1)));
	mouse = new Mouse();
	emitter = new Emitter();
	loop();
};

CSS

.background, .canvas {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.background {
  z-index: 0;
}

.canvas {
  z-index: 1;
  opacity: 0.75;
}

.title {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 2em;
  text-align: center;
  color: #ffffb9;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 3;
  mix-blend-mode: soft-light;
}

form {
  position: absolute;
  padding: 30px;
  width: 150px;
  mix-blend-mode: overlay;
  font-size: 1.1em;
  z-index: 2;
}

label {
  display: block;
  text-align: center;
  font-family: "Open Sans Condensed", sans-serif;
  color: white;
}

input[type=range] {
  -webkit-appearance: none;
  margin-bottom: 18px;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: white;
}
input[type=range]::-webkit-slider-thumb {
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: white;
}
input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 2px solid white;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

HTML

Recommendation

Join Effecthub.com