Skip to content

Instantly share code, notes, and snippets.

@weigert
Created September 25, 2022 17:34
Show Gist options
  • Save weigert/ea3894f13cd6c19583071a6ed0fd0a6c to your computer and use it in GitHub Desktop.
Save weigert/ea3894f13cd6c19583071a6ed0fd0a6c to your computer and use it in GitHub Desktop.
/*
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment