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)})()