boop.md

This:

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width = 200;
canvas.height = 200;
var theta = Math.PI/128;

var vertices = [
  [-1, -1, -1, -1],
  [-1, -1, -1, 1],
  [-1, -1, 1, -1],
  [-1, -1, 1, 1],
  [-1, 1, -1, -1],
  [-1, 1, -1, 1],
  [-1, 1, 1, -1],
  [-1, 1, 1, 1],
  [1, -1, -1, -1],
  [1, -1, -1, 1],
  [1, -1, 1, -1],
  [1, -1, 1, 1],
  [1, 1, -1, -1],
  [1, 1, -1, 1],
  [1, 1, 1, -1],
  [1, 1, 1, 1]
]

var edges = [
  [0, 1],
  [0, 2],
  [0, 4],
  [0, 8],
  [1, 3],
  [1, 5],
  [1, 9],
  [2, 3],
  [2, 6],
  [2, 10],
  [3, 7],
  [3, 11],
  [4, 5],
  [4, 6],
  [4, 12],
  [5, 7],
  [5, 13],
  [6, 7],
  [6, 14],
  [7, 15],
  [8, 9],
  [8, 10],
  [8, 12],
  [9, 11],
  [9, 13],
  [10, 11],
  [10, 14],
  [11, 15],
  [12, 13],
  [12, 14],
  [13, 15],
  [14, 15]
]
var rotations = [
  0, 0 // we are only rotating in 2 planes
]

function draw(verts) {
  var context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
  var max_size = Math.min(canvas.width, canvas.height) / 2;
  var corrected = verts.map(vertex => [
    Math.floor(canvas.width / 2 + (0.9 + vertex[2] * 0.3) * max_size * vertex[0] * 0.5) + 0.5,
    Math.floor(canvas.height / 2 - (0.9 + vertex[2] * 0.3) * max_size * vertex[1] * 0.5) + 0.5,
  ]);
  edges.map(edge => {
    var point1 = corrected[edge[0]];
    var point2 = corrected[edge[1]];
    context.beginPath();
    context.moveTo(...point1);
    context.lineTo(...point2);
    context.closePath();
    context.stroke();
  });
}

function go() {
	rotations = rotations.map(x=>x+theta);
	draw(vertices.map(vertex=>rotate(rotations, ...vertex)))
}

function rotate(r,i,j,k,l) {
  c = Math.cos(r[0]), s = Math.sin(r[0]);
  _ = c * j - s * l;
  l = s * j + c * l;
  j = _;
  c = Math.cos(r[1]), s = Math.sin(r[1]);
  _ = c * k - s * l;
 	l = s * k + c * l;
  k = _;
  return [i,j,k,l]
}

setInterval(go,20)

to this:

(t=>{a=document,d=Math,c=d.sin,o=d.cos,i=d.floor,r=0,l=a.body.appendChild(a.createElement("canvas")),s=l.getContext("2d");l.width=l.height=n=200,setInterval(t=>(e=>{r+=.01,s.clearRect(0,0,n,n);t=e.map(e=>[i(100+(h=45+15*e[2])*e[0]),i(100-h*e[1])]);"0102040813151923262a373b45464c575d676e7f898a8c9b9dabaebfcdcedfef".match(/../g).map(e=>{f=e.split("").map(e=>parseInt(e,16)),s.beginPath(),s.moveTo(...t[f[0]]),s.lineTo(...t[f[1]]),s.closePath(),s.stroke()})})(" ".repeat(16).split("").map((t,n)=>((t,n,d,i)=>[t,(a=o(r))*n-(e=c(r))*i,a*d-e*(p=e*n+a*i),e*d+a*p])(...n.toString(2).padStart(4,0).split("").map(e=>2*e-1)))),9)})()