canvas
input(type='text' id='imgURL' placeholder='Custom Image (URL) - From twitter, facebook, ...')

body {
	margin: 0px;
	background: #ffd2bb;
}

input[type='text']{
	position: fixed;
	font-family: 'Tajawal', sans-serif;
	width: 300px;
	height: 18px;
	top: -5px;
	left: calc(50vw - 150px);
	color: #480032;
	
	padding: 2px 10px 2px 10px;
	border: 2px solid #480032;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	background: #ffd2bb;
	opacity: 0.08;
	transition: 0.8s opacity ease,  0.8s transform ease;
}

input[type='text']:hover {
	opacity: 1;
	transform: translateY(15px);
}

canvas {
	display: block;
	margin: 25px auto 0px auto;
	padding: 0px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

let ctx, img, qt;

// Color palette from colorhunt.co/palette/120066
let color_pallete = [
	"#480032",
	"#df0054",
	"#ff8b6a",
	"#ffd2bb"
];

function QuadTree(x, y, w, h){
	if(w <= 1 || h <= 1) {
		return (
			0.2989*parseFloat(img.data[4*(y*ctx.canvas.width + x)]	) + 
			0.5870*parseFloat(img.data[4*(y*ctx.canvas.width + x) + 1]	) + 
			0.1140*parseFloat(img.data[4*(y*ctx.canvas.width + x) + 2]	) 
		) >>> 6;
	}

	let mw = Math.round(w/2), mh = Math.round(h/2);

	let q = [
		QuadTree(x, y, mw, mh), 
		QuadTree(x + mw, y, mw, mh),
		QuadTree(x, y + mh, mw, mh),
		QuadTree(x + mw, y + mh, mw, mh)
	];

	if(!(q[0] instanceof Array) && q[0] == q[1] && q[1] == q[2] && q[2] == q[3]) {
		return q[0];
	} else {
		return q;
	}
}

let history = [], i = [];

function animate(){
	if(i > history.length) return;

	let l = history[i];

	for(j = 0; j < 200 && i+j < history.length; j++) {
		l = history[i+j];
		ctx.fillStyle = color_pallete[l[4]];
		ctx.fillRect(l[0], l[1], l[2], l[3]);
		ctx.strokeRect(l[0], l[1], l[2], l[3]);
	}

	i+=j;
	requestAnimationFrame(animate);
}

function drawQT(x, y, w, h, q){
	if(!(q instanceof Array)){
		history.push([x, y, w, h, q]);
	} else {
		let mw = Math.round(w/2), mh = Math.round(h/2);

		drawQT(x, y, mw, mh, q[0]);
		drawQT(x + mw, y, mw, mh, q[1]);
		drawQT(x, y + mh, mw, mh, q[2]);
		drawQT(x + mw, y + mh, mw, mh, q[3]);
	}
}

function setup(argument) {
	let canvas = document.querySelector('canvas');
	let imgURL = document.querySelector('input');
	canvas.height = 512;
	canvas.width = 512;
	ctx = canvas.getContext('2d');

	imgHTML = new Image();
	imgHTML.crossOrigin = "Anonymous";

	imgHTML.onload = function(){
		canvas.width = imgHTML.naturalWidth/imgHTML.naturalHeight*512;

		ctx.strokeStyle = "rgba(0,0,0,0.1)";
		ctx.drawImage(imgHTML, 0, 0, canvas.width, canvas.height);
		img = ctx.getImageData(0, 0, canvas.width, canvas.height);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		generateQuadTree();
	}

	imgHTML.src = 'https://pbs.twimg.com/media/DcZ_xlaWAAAz2wS.jpg';
	imgURL.onchange = function(){
		imgHTML.src = imgURL.value;
	}

}

function generateQuadTree(){
	qt = QuadTree(0, 0, ctx.canvas.width, ctx.canvas.height);
	history = [];
	i = 0;

	drawQT(0, 0, ctx.canvas.width, ctx.canvas.height, qt);

	requestAnimationFrame(animate);
}

window.onload = setup;