const _C = document.getElementById('canvas') /* canvas element */, 
			C = _C.getContext('2d') /* 2L canvas context */, 
			L = _C.width /* edge length of canvas square */, 
			O = -.5*L /* top left corner coord if 0,0 is in the middle */, 
			R = L/Math.SQRT2 /* half diagonal of canvas square */, 
			RC = .04*L /* polygon circumradius */, 
			UA = 2*Math.PI/360 /* unit angle = 1 degree */, 
			
			/* hex values for paint buckets */
			THEME = ["#696D88", "#CB687C", "#FBAC74", "#F4E4CD", "#D6D5C3"],
			NT = THEME.length /* number of paint buckets */, 
			
			NA = 2 /* number of arms per hex value */, 
			
			POLY = [] /* array to fill with polygons */, 
			N = 39 /* number of polygons per arm */, 
			
			OPTS = ['fill', 'stroke'], 
			NO = OPTS.length, 
			
			FN = ['line', 'move'];

function rand(max = 1, min = 0, dec = 0) {
	return +(min + (max - min)*Math.random()).toFixed(dec)
};

class RandPoly {
	constructor(i) {
		/* SHAPE PROPERTIES */
		this.n = rand(8, 3); /* number of vertices */
		this.α = 2*Math.PI/this.n; /* base angle corresp to an edge */
		
		/* PAINT PROPERTIES */
		this.o = rand(); /* option: filled (0) or stroked (1) */
		this.b = i%NT; /* number of paint bucket we put it in */
		
		/* POSITION PROPERTIES */
		this.γ = UA; /* revolution speed */
		this.ψ = rand(2, -3, .2)*UA; /* rotation speed */
		
		/* polar coordinates */
		this.l = Math.floor(i/NT/NA); /* level number */
		this.p = i%(NT*NA);
		this.u = (R + RC)/N;
		this.r = +(this.l*this.u); /* position radius */
		this.β = this.p*2*Math.PI/NT/NA + this.l*this.u*this.γ; /* position angle */
		this.φ = Math.random()*2*Math.PI; /* initial rotation */
	}
	
	get coords() {
		let vx = [], f;
		
		this.r += 1;
		
		if(this.r > R + RC) {
			this.r = 0;
			this.n = rand(8, 3);
			this.α = 2*Math.PI/this.n;
			this.o = rand();
			this.β = this.p*2*Math.PI/NT/NA;
		}
		
		this.φ += this.ψ;
		this.β += this.γ;
		f = this.r/R;
		
		for(let i = 0; i < this.n; i++) {
			let ca = this.β + this.φ + i*this.α;
			
			vx.push([
				Math.round(this.r*Math.cos(this.β) + f*RC*Math.cos(ca)), 
				Math.round(this.r*Math.sin(this.β) + f*RC*Math.sin(ca))
			])
		}
		
		return vx
	}
};

function draw() {
	C.clearRect(O, O, L, L);
	
	for(let i = 0; i < NT; i++) {
		let b = POLY.filter(c => c.b === i);
		
		for(let j = 0; j < NO; j++) {
			let opt = b.filter(c => c.o === j);
			
			C[`${OPTS[j]}Style`] = THEME[i];
			C.beginPath();

			opt.forEach(p => {
				let vx = p.coords;

				for(let k = 0; k <= p.n; k++) {
					C[k ? 'lineTo' : 'moveTo'](...vx[k%p.n])
				}
			});

			C.closePath();
			C[`${OPTS[j]}`]();
		}
	}
	
	requestAnimationFrame(draw);
};

function init() {
	C.translate(-O, -O);
	C.lineWidth = 3;
	C.globalCompositeOperation = 'screen'

	for(let i = 0; i < N*NT*NA; i++) {		
		POLY.push(new RandPoly(i));
	}

	draw()
};

init();