Вращаем Тессеракт

<canvas id="canvas1" style="background: white" width="800" height="800"></canvas>
<script>
var canvas = document.getElementById("canvas1")
var ctx = canvas.getContext("2d")
var w = canvas.width
var h = canvas.height
ctx.translate(w/2, h/2);
ctx.lineWidth = 5
 
function dot(x,y,z,v){ //структура: 4D точка
	this.x = x
	this.y = y
	this.z = z
	this.v = v
}
function point(x,y){ //структура: 2D точка
	this.x = x
	this.y = y
}
//параметры 4D-параллелепипеда (если равны - тессеракт)
var w1=1 //ширина
var h1=1 //высота
var l1=1 //длина
var u1=1 //4-ый параметр
 
var d=3 //глубина (расстояние до куба от экрана)
var u=3 //аналог глубины
//массив с координатами всех вершин тессеракта (глубина по умолчанию отрицательна)
var dots = [
new dot(-w1/2,-h1/2,-d,-u), new dot(w1/2,-h1/2,-d,-u), new dot(-w1/2,h1/2,-d,-u),new dot(w1/2,h1/2,-d,-u),
new dot(-w1/2,-h1/2,-(d+l1),-u), new dot(w1/2,-h1/2,-(d+l1),-u), new dot(-w1/2,h1/2,-(d+l1),-u), new dot(w1/2,h1/2,-(d+l1),-u),
new dot(-w1/2,-h1/2,-d,-(u+u1)), new dot(w1/2,-h1/2,-d,-(u+u1)), new dot(-w1/2,h1/2,-d,-(u+u1)),new dot(w1/2,h1/2,-d,-(u+u1)),
new dot(-w1/2,-h1/2,-(d+l1),-(u+u1)), new dot(w1/2,-h1/2,-(d+l1),-(u+u1)), new dot(-w1/2,h1/2,-(d+l1),-(u+u1)), new dot(w1/2,h1/2,-(d+l1),-(u+u1))
]
 
//массив для проекций точек на плоскость
var points = []
//массив ребер тессеракта
var edges = [
[0,1], [0,2], [0,4], [1,3],
[1,5], [2,3], [2,6], [3,7],
[4,5], [4,6], [5,7], [6,7],
 
[8,9], [8,10], [8,12], [9,11],
[9,13], [10,11], [10,14], [11,15],
[12,13], [12,14], [13,15], [14,15],
 
[0,8], [1,9], [2,10], [3,11],
[4,12], [5,13], [6,14], [7,15],
]
//функция поворота по разным осям (в 4D - плоскостям?)
function rotate(t1,t2,t3,t4,t5){
	for(var i of dots){
		var x = i.x; var z = i.z
		i.x = x*Math.cos(t1)-(z+d+l1/2)*Math.sin(t1)
		i.z = (z+d+l1/2)*Math.cos(t1)+x*Math.sin(t1) - (d+l1/2)
 
		var y = i.y; var z = i.z
		i.y = y*Math.cos(t2)-(z+d+l1/2)*Math.sin(t2)
		i.z = (z+d+l1/2)*Math.cos(t2)+y*Math.sin(t2) - (d+l1/2)
 
		var y = i.y; var v = i.v;
		i.y = y*Math.cos(t3)-(v+u+u1/2)*Math.sin(t3)
		i.v = (v+u+u1/2)*Math.cos(t3)+y*Math.sin(t3) - (u+u1/2)
 
		var x = i.x; var v = i.v;
		i.x = x*Math.cos(t4)-(v+u+u1/2)*Math.sin(t4)
		i.v = (v+u+u1/2)*Math.cos(t4)+x*Math.sin(t4) - (u+u1/2)
 
		var z = i.z; var v = i.v;
		i.z = (z+d+l1/2)*Math.cos(t5)-(v+u+u1/2)*Math.sin(t5) - (d+l1/2)
		i.v = (v+u+u1/2)*Math.cos(t5)+(z+d+l1/2)*Math.sin(t5) - (u+u1/2)
	}
}
function draw(){
	ctx.clearRect(-w/2,-h/2,w,h)//очищаем canvas
	//вращаем вокруг yz
	rotate(0.01,0,0,0,0.01)
	rotate(-0.3,0,0,0,0)
	points = [] //каждый фрейм очищаем массив спроецированных точек
	for(var i of dots)
		points.push(new point(w*i.x/-i.z, h*i.y/-i.z)) //и проецируем заново (перспективная проекция)
 
	for(var i of edges){//прорисовывем ребра
		ctx.beginPath()
		ctx.moveTo(points[i[0]].x,points[i[0]].y);
		ctx.lineTo(points[i[1]].x,points[i[1]].y);
		ctx.stroke()
		ctx.closePath()
	}
	rotate(0.3,0,0,0,0)
	requestAnimationFrame(draw)
}
draw()
</script>