<canvas></canvas>

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	color: #fff;
	background-color: #000;
}

canvas {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

// Wobble by @neave

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

Array.prototype.shuffle = function() {
	var j, temp;
	for (var i = this.length - 1; i > 0; i--) {
		j = Math.floor(Math.random() * (i + 1));
		temp = this[i];
		this[i] = this[j];
		this[j] = temp;
	}
	return this;
};

Math.clamp = function(n, min, max) {
	return Math.max(min, Math.min(n, max));
};

var get = document.querySelector.bind(document),
	on = document.addEventListener.bind(document),
	mouseOff = -1000,
	mouseX,
	mouseY,
	viscosity = 25,
	damping = 0.1,
	totalPoints,
	dist,
	scale,
	canvas,
	context,
	surfaces,
	palleteNum = 0,
	palleteFirst = ['0cf', '0fc', 'ff0', 'f0c', 'c0f'],
	palletes = [
		['000', 'ff0', 'f0f', '0ff', 'fff'],
		['000', 'fff', '000', 'fff', '000'],
		['333', '666', '999', 'ccc', 'fff'],
		['300', '600', 'f00', '600', '300'],
		['305', '606', '907', 'c08', 'f09'],
		['036', '067', '098', '0c9', '0fa'],
		['00a0b0', '6a4a3c', 'cc333f', 'eb6841', 'edc951'],
		['264653', '2a9d8f', 'e9c46a', 'f4a261', 'e76f51'],
		['300018', '5a3d31', '837b47', 'adb85f', 'e5edb8'],
		['343838', '005f6b', '008c9e', '00b4cc', '00dffc'],
		['3fb8af', '7fc7af', 'dad8a7', 'ff9e9d', 'ff3d7f'],
		['413e4a', '73626e', 'b38184', 'f0b49e', 'f7e4be'],
		['452632', '91204d', 'e4844a', 'e8bf56', 'e2f7ce'],
		['594f4f', '547980', '45ada8', '9de0ad', 'e5fcc2'],
		['5d4157', '838689', 'a8caba', 'cad7b2', 'ebe3aa'],
		['81657e', '3ea3af', '9fd9b3', 'f0f6b9', 'ff1d44'],
		['899aa1', 'bda2a2', 'fbbe9a', 'fad889', 'faf5c8'],
		['99b898', 'fecea8', 'ff847c', 'e84a5f', '2a363b'],
		['ab526b', 'bca297', 'c5ceae', 'f0e2a4', 'f4ebc3'],
		['acdeb2', 'e1eab5', 'edad9e', 'fe4b74', '390d2d'],
		['b9d7d9', '668284', '2a2829', '493736', '7b3b3b'],
		['bbbb88', 'ccc68d', 'eedd99', 'eec290', 'eeaa88'],
		['cff09e', 'a8dba8', '79bd9a', '3b8686', '0b486b'],
		['d1f2a5', 'effab4', 'ffc48c', 'ff9f80', 'f56991'],
		['d3e2b6', 'c3dbb4', 'aaccb1', '87bdb1', '68b3af'],
		['e0ffb3', '61c791', '31797d', '2a2f36', 'f23c55'],
		['e25858', 'e9d6af', 'ffffdd', 'c0efd2', '384252'],
		['e8608c', '71cbc4', 'fff9f4', 'cdd56e', 'ffbd68'],
		['e8ddcb', 'cdb380', '036564', '033649', '031634'],
		['e94e77', 'd68189', 'c6a49a', 'c6e5d9', 'f4ead5'],
		['eee6ab', 'c5bc8e', '696758', '45484b', '36393b'],
		['efffcd', 'dce9be', '555152', '2e2633', '99173c'],
		['f04155', 'ff823a', 'f2f26f', 'fff7bd', '95cfb7'],
		['f8b195', 'f67280', 'c06c84', '6c5b7b', '355c7d'],
		['f8f4d7', 'f4dec2', 'f2b4a8', 'e98977', 'f4b36c'],
		['fad089', 'ff9c5b', 'f5634a', 'ed303c', '3b8183'],
		['fe4365', 'fc9d9a', 'f9cdad', 'c8c8a9', '83af9b'],
		['ff4e50', 'fc913a', 'f9d423', 'ede574', 'e1f5c4'],
		['ff9900', '424242', 'e9e9e9', 'bcbcbc', '3299bb'],
		['ffed90', 'a8d46f', '359668', '3c3251', '341139']
	];

function Point(x, y) {
	this.x = x;
	this.y = y;

	this.ix = x;
	this.iy = y;

	this.vx = 0;
	this.vy = 0;
}

Point.prototype.move = function() {
	var width = canvas.width / scale;
	var height = canvas.height / scale;
	this.vx += (this.ix - this.x) / viscosity * width;
	this.vy += (this.iy - this.y) / viscosity * height;

	var dx = this.x * width - mouseX / scale,
		dy = this.y * height - mouseY / scale;

	if (Math.sqrt(dx * dx + dy * dy) < dist) {
		var a = Math.atan2(dy, dx);
		this.vx += (Math.cos(a) * viscosity - dx) / viscosity;
		this.vy -= (Math.sin(a) * viscosity - dy) / viscosity;
	}

	this.vx *= (1 - damping);
	this.vy *= (1 - damping);
	this.x += this.vx / width;
	this.y += this.vy / height;

	if (this.y < 0) {
		this.y = 0;
	} else if (this.y > 1) {
		this.y = 1;
	}
};

function Surface(y) {
	this.y = y;
	this.resize();
}

Surface.prototype.draw = function() {
	var p = this.points[totalPoints - 1],
		cx,
		cy;

	context.fillStyle = this.color;
	context.beginPath();
	context.moveTo(p.x * canvas.width, p.y * canvas.height);

	for (var i = totalPoints - 1; i > 0; i--) {
		p = this.points[i];
		p.move();

		cx = (p.x + this.points[i - 1].x) / 2 * canvas.width;
		cy = (p.y + this.points[i - 1].y) / 2 * canvas.height;

		if (i === 1) {
			cx = canvas.width;
		} else if (i === totalPoints - 1) {
			context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
			p.x = 0;
		}

		context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
	}

	context.lineTo(canvas.width, canvas.height);
	context.lineTo(0, canvas.height);
	context.closePath();
	context.fill();
};

Surface.prototype.resize = function() {
	this.points = [];
	for (var i = totalPoints; i--; ) {
		this.points.push(new Point(i / (totalPoints - 3), this.y));
	}
};

Surface.prototype.wobble = function() {
	for (var i = totalPoints - 1; i > 0; i--) {
		this.points[i].vy += (Math.random() - 0.5) * dist * 0.6;
	}
};

function setPallete() {
	canvas.style.backgroundColor = '#' + palletes[palleteNum][0];
	for (var i = surfaces.length; i--; ) {
		surfaces[surfaces.length - i - 1].color = '#' + palletes[palleteNum][i + 1];
	}
}

function nextPallete() {
	palleteNum++;
	if (palleteNum >= palletes.length) {
		palleteNum = 0;
		palletes.shuffle();
	}
	setPallete();
}

function wobbleSuraces() {
	resizeSuraces();

	for (var i = surfaces.length; i--; ) {
		surfaces[i].wobble();
	}
	nextPallete();
}

function drawSurfaces() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	for (var i = surfaces.length; i--; ) {
		surfaces[i].draw();
	}
}

function resizeSuraces() {
	scale = window.devicePixelRatio || 1;

	canvas.width = innerWidth * scale;
	canvas.height = innerHeight * scale;
	canvas.style.width = innerWidth + 'px';
	canvas.style.height = innerHeight + 'px';

	totalPoints = Math.round(Math.clamp(Math.pow(Math.random() * 8, 2), 16, innerWidth / 35));
	dist = Math.clamp(innerWidth / 4, 150, 200);

	for (var i = surfaces.length; i--; ) {
		surfaces[i].resize();
	}
	drawSurfaces();
}

function update() {
	requestAnimationFrame(update);
	drawSurfaces();
}

function init() {
	canvas = get('canvas');
	context = canvas.getContext('2d');

	canvas.ontouchmove = function(event) {
		mouseX = event.targetTouches[0].pageX * scale;
		mouseY = event.targetTouches[0].pageY * scale;
	};

	canvas.ontouchstart = function(event) {
		event.preventDefault();
	};

	canvas.ontouchend = function(event) {
		wobbleSuraces();
		mouseX = mouseY = mouseOff;
	};

	canvas.onmousemove = function(event) {
		mouseX = event.pageX * scale;
		mouseY = event.pageY * scale;
	};

	canvas.onmousedown = wobbleSuraces;

	canvas.onmouseleave = function() {
		mouseX = mouseY = mouseOff;
	};

	surfaces = [
		new Surface(4/5),
		new Surface(3/5),
		new Surface(2/5),
		new Surface(1/5)
	];

	palletes.shuffle();
	palletes.unshift(palleteFirst);
	setPallete(0);

	window.onresize = resizeSuraces;
	resizeSuraces();
	update();
}

on('DOMContentLoaded', init);