colorhexsort.js

/*
colorhexsort.js
small canvas script for drawing protruding 
orthogonally projected cubes
by Nicholas McDonald, 2022
*/

window.onload = init;

var canvas, ctx;

var rad = 40;
var width = 10;
var height = 15;

function startRecording() {
  const chunks = []; // here we will store our recorded media chunks (Blobs)
  const stream = canvas.captureStream(); // grab our canvas MediaStream
  const rec = new MediaRecorder(stream); // init the recorder
  // every time the recorder has new data, we will store it in our array
  rec.ondataavailable = e => chunks.push(e.data);
  // only when the recorder stops, we construct a complete Blob from all the chunks
  rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));
  
  rec.start();
  setTimeout(()=>rec.stop(), 15000); // stop recording in 3s
}

function exportVid(blob) {
  const vid = document.createElement('video');
  vid.src = URL.createObjectURL(blob);
  vid.controls = true;
  document.body.appendChild(vid);
  const a = document.createElement('a');
  a.download = 'myvid.webm';
  a.href = vid.src;
  a.textContent = 'download the video';
  document.body.appendChild(a);
}


function drawHexagon(x, y, rad){
		
	let region;

	ctx.strokeStyle = "white";

	region = new Path2D();
	region.moveTo(x, y);
	region.lineTo(x-rad*Math.cos(Math.PI*1/6), y-rad*Math.sin(Math.PI*1/6));
	region.lineTo(x+rad*Math.cos(3*Math.PI/2), y+rad*Math.sin(3/2*Math.PI));
	region.lineTo(x+rad*Math.cos(Math.PI*1/6), y-rad*Math.sin(Math.PI*1/6));
	region.closePath();
	ctx.fillStyle = '#F6BD60';
	ctx.fill(region, 'nonzero');
	ctx.stroke(region, 'nonzero');

	region = new Path2D();
	region.moveTo(x, y);
	region.lineTo(x+rad*Math.cos(3/2*Math.PI), y-rad*Math.sin(3/2*Math.PI));
	region.lineTo(x-rad*Math.cos(Math.PI*1/6), y+rad*Math.sin(Math.PI*1/6));
	region.lineTo(x-rad*Math.cos(Math.PI*1/6), y-rad*Math.sin(Math.PI*1/6));
	region.closePath();
	ctx.fillStyle = '#84A59D';
	ctx.fill(region, 'nonzero');
	ctx.stroke(region, 'nonzero');

	region = new Path2D();
	region.moveTo(x, y);
	region.lineTo(x+rad*Math.cos(3/2*Math.PI), y-rad*Math.sin(3/2*Math.PI));
	region.lineTo(x+rad*Math.cos(Math.PI*1/6), y+rad*Math.sin(Math.PI*1/6));
	region.lineTo(x+rad*Math.cos(Math.PI*1/6), y-rad*Math.sin(Math.PI*1/6));
	region.closePath();
	ctx.fillStyle = '#F28482';
	ctx.fill(region, 'nonzero');
	ctx.stroke(region, 'nonzero');

}

function hexPos(i, j, rad){
	return {
		x: 2*rad*i*Math.cos(Math.PI*1/6) + ((j%2)?rad*Math.cos(Math.PI*1/6):0),
		y: 1.5*rad*j
	}
}

function init(){

	canvas = document.getElementById("canvas")
	ctx = canvas.getContext('2d');

	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	for(var i = 0; i < width; i++){
		for(var j = 0; j < height; j++){
			var h = hexPos(i, j, rad);
			drawHexagon(h.x, h.y, rad);
		}
	}

	var x = Math.floor(Math.random()*width);
	var y = Math.floor(Math.random()*height);
	var r = Math.floor(Math.random()*3);
	var t = 0.0;

	var dx = 0, dy = 0;
		
	if(r == 0){
		dx = 0;
		dy = -1.0*rad;
	}
	if(r == 1){
		dx = rad*Math.cos(Math.PI*1/6);
		dy = 0.5*rad;
	}
	if(r == 2){
		dx = -rad*Math.cos(Math.PI*1/6);
		dy = 0.5*rad;
	}

	function shiftHex(timestamp){

		var h = hexPos(x, y, rad);
		drawHexagon(h.x + t*dx, h.y + t*dy, rad);

		t += 0.1;

		if(t >= 1.0){

			x = Math.floor(Math.random()*width);
			y = Math.floor(Math.random()*height);
			r = Math.floor(Math.random()*3);
			t = 0.0;

			if(r == 0){
				dx = 0;
				dy = -1.0*rad;
			}
			if(r == 1){
				dx = rad*Math.cos(Math.PI*1/6);
				dy = 0.5*rad;
			}
			if(r == 2){
				dx = -rad*Math.cos(Math.PI*1/6);
				dy = 0.5*rad;
			}
		
		}

		window.requestAnimationFrame(shiftHex);

	}

	shiftHex();
	startRecording();

}