### Stairways to heaven

Test of rendering a 3D scene (using gl-matrix)

```Canvas.setpenopacity(0.5);

// gl-matrix
EPSILON = 0.00001;
function vec4() {
this.transformMat4 = function(out, a, m) {
let x = a[0], y = a[1], z = a[2], w = a[3];
out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
return out;
}
}
function mat4() {
this.create = function() {
return new Float32Array(16)
}

this.identity = function(out) {
out[0] = 1;
out[1] = 0;
out[2] = 0;
out[3] = 0;
out[4] = 0;
out[5] = 1;
out[6] = 0;
out[7] = 0;
out[8] = 0;
out[9] = 0;
out[10] = 1;
out[11] = 0;
out[12] = 0;
out[13] = 0;
out[14] = 0;
out[15] = 1;
return out;
}

this.lookAt = function(out, eye, center, up) {
let x0, x1, x2, y0, y1, y2, z0, z1, z2, len;
let eyex = eye[0];
let eyey = eye[1];
let eyez = eye[2];
let upx = up[0];
let upy = up[1];
let upz = up[2];
let centerx = center[0];
let centery = center[1];
let centerz = center[2];
if (Math.abs(eyex - centerx) < EPSILON &&
Math.abs(eyey - centery) < EPSILON &&
Math.abs(eyez - centerz) < EPSILON) {
return identity(out);
}
z0 = eyex - centerx;
z1 = eyey - centery;
z2 = eyez - centerz;
len = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
z0 *= len;
z1 *= len;
z2 *= len;
x0 = upy * z2 - upz * z1;
x1 = upz * z0 - upx * z2;
x2 = upx * z1 - upy * z0;
len = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
if (!len) {
x0 = 0;
x1 = 0;
x2 = 0;
} else {
len = 1 / len;
x0 *= len;
x1 *= len;
x2 *= len;
}
y0 = z1 * x2 - z2 * x1;
y1 = z2 * x0 - z0 * x2;
y2 = z0 * x1 - z1 * x0;
len = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
if (!len) {
y0 = 0;
y1 = 0;
y2 = 0;
} else {
len = 1 / len;
y0 *= len;
y1 *= len;
y2 *= len;
}
out[0] = x0;
out[1] = y0;
out[2] = z0;
out[3] = 0;
out[4] = x1;
out[5] = y1;
out[6] = z1;
out[7] = 0;
out[8] = x2;
out[9] = y2;
out[10] = z2;
out[11] = 0;
out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
out[15] = 1;
return out;
}

this.multiply = function(out, a, b) {
let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
// Cache only the current line of the second matrix
let b0  = b[0], b1 = b[1], b2 = b[2], b3 = b[3];
out[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
out[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
out[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
out[3] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
b0 = b[4]; b1 = b[5]; b2 = b[6]; b3 = b[7];
out[4] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
out[5] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
out[6] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
out[7] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
b0 = b[8]; b1 = b[9]; b2 = b[10]; b3 = b[11];
out[8] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
out[9] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
out[10] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
out[11] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
b0 = b[12]; b1 = b[13]; b2 = b[14]; b3 = b[15];
out[12] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
out[13] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
out[14] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
out[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
return out;
}

this.perspective = function(out, fovy, aspect, near, far) {
let f = 1.0 / Math.tan(fovy / 2), nf;
out[0] = f / aspect;
out[1] = 0;
out[2] = 0;
out[3] = 0;
out[4] = 0;
out[5] = f;
out[6] = 0;
out[7] = 0;
out[8] = 0;
out[9] = 0;
out[11] = -1;
out[12] = 0;
out[13] = 0;
out[15] = 0;
if (far != null && far !== Infinity) {
nf = 1 / (near - far);
out[10] = (far + near) * nf;
out[14] = (2 * far * near) * nf;
} else {
out[10] = -1;
out[14] = -2 * near;
}
return out;
}

this.translate = function(out, a, v) {
let x = v[0], y = v[1], z = v[2];
let a00, a01, a02, a03;
let a10, a11, a12, a13;
let a20, a21, a22, a23;
if (a === out) {
out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
} else {
a00 = a[0]; a01 = a[1]; a02 = a[2]; a03 = a[3];
a10 = a[4]; a11 = a[5]; a12 = a[6]; a13 = a[7];
a20 = a[8]; a21 = a[9]; a22 = a[10]; a23 = a[11];
out[0] = a00; out[1] = a01; out[2] = a02; out[3] = a03;
out[4] = a10; out[5] = a11; out[6] = a12; out[7] = a13;
out[8] = a20; out[9] = a21; out[10] = a22; out[11] = a23;
out[12] = a00 * x + a10 * y + a20 * z + a[12];
out[13] = a01 * x + a11 * y + a21 * z + a[13];
out[14] = a02 * x + a12 * y + a22 * z + a[14];
out[15] = a03 * x + a13 * y + a23 * z + a[15];
}
return out;
}
}

vec4 = new vec4() // mimic static functions behavior
mat4 = new mat4()
// end gl-matrix

// classes
function Plane() {
this.vertices = [
[-1, 0, -0.25],
[1, 0, -0.25],
[1, 0, 0.25],
[-1, 0, 0.25],
]

this.position = [0, 0, 0]
}

function Camera() {
this.position = [0, 0, -3]
this.lookAt = [0, 0, 3]
}

// scene
camera = new Camera()
camera.position = [-0.5, 2, -3]
camera.lookAt = [0, 1, 6]

planes = []
for (p = 0; p < 100; p++) {
let plane = new Plane()
plane.position = [3, p / 5, p / 4]
planes.push(plane)
}
for (p = 0; p < 100; p++) {
let plane = new Plane()
plane.position = [0, p / 5, p / 4]
planes.push(plane)
}
for (p = 0; p < 100; p++) {
let plane = new Plane()
plane.position = [-3, p / 5, p / 4]
planes.push(plane)
}

cameraMatrix = mat4.create()
mat4.lookAt(cameraMatrix, camera.position, camera.lookAt, [0,1,0])

projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 0.75, 1, 1, 1000)

modelMatrix = mat4.create()
finalMatrix = mat4.create()

// prepare 2D points
lineStrips = []

for (plane of planes) {
let planePoints = renderPoints(plane.vertices, plane.position)
lineStrips.push(planePoints)
}

function renderPoints(vertices, position) {
mat4.identity(modelMatrix)
mat4.translate(modelMatrix, modelMatrix, position)

mat4.multiply(finalMatrix, cameraMatrix, modelMatrix)
mat4.multiply(finalMatrix, projectionMatrix, finalMatrix)

let points = []
for (vertex of vertices) {
vertex = vertex.concat(1)
vec4.transformMat4(vertex, vertex, finalMatrix)
x = vertex[0] / vertex[3]
y = vertex[1] / vertex[3]

// to canvas coords
x = -x * 50
y = -y * 50

points.push([x, y])
}
return points
}

// actual drawing
const turtle = new Turtle();

function walk(i) {
lineStrip = lineStrips[i]

let end = lineStrip[lineStrip.length - 1]
turtle.penup()
turtle.goto(end)
turtle.pendown()

for (point of lineStrip) {
turtle.goto(point)
}

return i < lineStrips.length - 1
}
```