eYydGWQ

eyydgwq.markdown

eYydGWQ

A Pen by vineeth on CodePen.

License.

script.js

(function() {

////////////////////
// SiriWave9Curve //
////////////////////

function SiriWave9Curve(opt) {
	opt = opt || {};
	this.controller = opt.controller;
	this.color = opt.color;
	this.tick = 0;

	this.respawn();
}

SiriWave9Curve.prototype.respawn = function() {
	this.amplitude = 0.3 + Math.random() * 0.7;
	this.seed = Math.random();
  console.log(this.seed)
	this.open_class = 2+(Math.random()*3)|0;
};

SiriWave9Curve.prototype.equation = function(i) {
	var p = this.tick;
	var y = -1 * Math.abs(Math.sin(p)) * this.controller.amplitude * this.amplitude * this.controller.MAX * Math.pow(1/(1+Math.pow(this.open_class*i,2)),2);
	if (Math.abs(y) < 0.001) {
		this.respawn();
	}
	return y;
};

SiriWave9Curve.prototype._draw = function(m) {
	this.tick += this.controller.speed * (1-0.5*Math.sin(this.seed*Math.PI));

	var ctx = this.controller.ctx;
	ctx.beginPath();

	var x_base = this.controller.width/2 + (-this.controller.width/4 + this.seed*(this.controller.width/2) );
	var y_base = this.controller.height/2;

	var x, y, x_init;

	var i = -3;
	while (i <= 3) {
		x = x_base + i * this.controller.width/4;
		y = y_base + (m * this.equation(i));
		x_init = x_init || x;
		ctx.lineTo(x, y);
		i += 0.01;
	}

	var h = Math.abs(this.equation(0));
	var gradient = ctx.createRadialGradient(x_base, y_base, h*1.15, x_base, y_base, h * 0.3 );
	gradient.addColorStop(0, 'rgba(' + this.color.join(',') + ',0.4)');
	gradient.addColorStop(1, 'rgba(' + this.color.join(',') + ',0.2)');

	ctx.fillStyle = gradient;

	ctx.lineTo(x_init, y_base);
	ctx.closePath();

	ctx.fill();
};

SiriWave9Curve.prototype.draw = function() {
	this._draw(-1);
	this._draw(1);
};


//////////////
// SiriWave //
//////////////

function SiriWave9(opt) {
	opt = opt || {};

	this.tick = 0;
	this.run = false;

	// UI vars

	this.ratio = opt.ratio || window.devicePixelRatio || 1;

	this.width = this.ratio * (opt.width || 320);
	this.height = this.ratio * (opt.height || 100);
	this.MAX = this.height/2;

	this.speed = 0.1;
	this.amplitude = opt.amplitude || 1;

	// Interpolation

	this.speedInterpolationSpeed = opt.speedInterpolationSpeed || 0.005;
	this.amplitudeInterpolationSpeed = opt.amplitudeInterpolationSpeed || 0.05;

	this._interpolation = {
		speed: this.speed,
		amplitude: this.amplitude
	};

	// Canvas

	this.canvas = document.createElement('canvas');
	this.canvas.width = this.width;
	this.canvas.height = this.height;

	if (opt.cover) {
		this.canvas.style.width = this.canvas.style.height = '100%';
	} else {
		this.canvas.style.width = (this.width / this.ratio) + 'px';
		this.canvas.style.height = (this.height / this.ratio) + 'px';
	};

	this.container = opt.container || document.body;
	this.container.appendChild(this.canvas);

	this.ctx = this.canvas.getContext('2d');

	// Create curves

	this.curves = [];
	for (var i = 0; i < SiriWave9.prototype.COLORS.length; i++) {
		var color = SiriWave9.prototype.COLORS[i];
		for (var j = 0; j < (3 * Math.random())|0; j++) {
			this.curves.push(new SiriWave9Curve({
				controller: this,
				color: color
			}));
		}
	}

	if (opt.autostart) {
		this.start();
	}
}

SiriWave9.prototype._interpolate = function(propertyStr) {
	increment = this[ propertyStr + 'InterpolationSpeed' ];

	if (Math.abs(this._interpolation[propertyStr] - this[propertyStr]) <= increment) {
		this[propertyStr] = this._interpolation[propertyStr];
	} else {
		if (this._interpolation[propertyStr] > this[propertyStr]) {
			this[propertyStr] += increment;
		} else {
			this[propertyStr] -= increment;
		}
	}
};

SiriWave9.prototype._clear = function() {
	this.ctx.globalCompositeOperation = 'destination-out';
	this.ctx.fillRect(0, 0, this.width, this.height);
	this.ctx.globalCompositeOperation = 'lighter';
};

SiriWave9.prototype._draw = function() {
	for (var i = 0, len = this.curves.length; i < len; i++) {
		this.curves[i].draw();
	}
};

SiriWave9.prototype._startDrawCycle = function() {
	if (this.run === false) return;
	this._clear();

	// Interpolate values
	this._interpolate('amplitude');
	this._interpolate('speed');

	this._draw();
	this.phase = (this.phase + Math.PI*this.speed) % (2*Math.PI);

	if (window.requestAnimationFrame) {
		window.requestAnimationFrame(this._startDrawCycle.bind(this));
	} else {
		setTimeout(this._startDrawCycle.bind(this), 20);
	}
};

SiriWave9.prototype.start = function() {
	this.tick = 0;
	this.run = true;
	this._startDrawCycle();
};

SiriWave9.prototype.stop = function() {
	this.tick = 0;
	this.run = false;
};

SiriWave9.prototype.setSpeed = function(v, increment) {
	this._interpolation.speed = v;
};

SiriWave9.prototype.setNoise = SiriWave9.prototype.setAmplitude = function(v) {
	this._interpolation.amplitude = Math.max(Math.min(v, 1), 0);
};

SiriWave9.prototype.COLORS = [
[32,133,252],
[94,252,169],
[253,71,103]
];

if (typeof define === 'function' && define.amd) {
	define(function(){ return SiriWave9; });
} else {
	window.SiriWave9 = SiriWave9;
}

})();

var w = window.innerWidth,
    h = w / 10;

new SiriWave9({
  width: w,
  height: h,
  speed: 0.1,
  container: document.getElementById('container9'),
	autostart: true
});

style.css

html, body {
  padding-top: 10%;
  background: black;
}