Canvas.setpenopacity(0.04);

// gl-matrix
EPSILON = 0.00001;
halfToRad = 0.5 * Math.PI / 180.0;
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.fromRotationTranslationScale = function(out, q, v, s) {
      // Quaternion math
      let x = q[0], y = q[1], z = q[2], w = q[3];
      let x2 = x + x;
      let y2 = y + y;
      let z2 = z + z;
      let xx = x * x2;
      let xy = x * y2;
      let xz = x * z2;
      let yy = y * y2;
      let yz = y * z2;
      let zz = z * z2;
      let wx = w * x2;
      let wy = w * y2;
      let wz = w * z2;
      let sx = s[0];
      let sy = s[1];
      let sz = s[2];
      out[0] = (1 - (yy + zz)) * sx;
      out[1] = (xy + wz) * sx;
      out[2] = (xz - wy) * sx;
      out[3] = 0;
      out[4] = (xy - wz) * sy;
      out[5] = (1 - (xx + zz)) * sy;
      out[6] = (yz + wx) * sy;
      out[7] = 0;
      out[8] = (xz + wy) * sz;
      out[9] = (yz - wx) * sz;
      out[10] = (1 - (xx + yy)) * sz;
      out[11] = 0;
      out[12] = v[0];
      out[13] = v[1];
      out[14] = v[2];
      out[15] = 1;
      return out;
    }
}
function quat() {
    this.fromEuler = function(out, x, y, z) {
        x *= halfToRad;
        y *= halfToRad;
        z *= halfToRad;
        let sx = Math.sin(x);
        let cx = Math.cos(x);
        let sy = Math.sin(y);
        let cy = Math.cos(y);
        let sz = Math.sin(z);
        let cz = Math.cos(z);
        out[0] = sx * cy * cz - cx * sy * sz;
        out[1] = cx * sy * cz + sx * cy * sz;
        out[2] = cx * cy * sz - sx * sy * cz;
        out[3] = cx * cy * cz + sx * sy * sz;
        return out;
    }
}
vec4 = new vec4() // mimic static functions behavior
quat = new quat()
mat4 = new mat4()
// end gl-matrix

// classes
function Cube() {
    this.vertices = [
      //+z
      [1, 1, 1],
      [-1, 1, 1],
      [1, -1, 1],
      [-1, -1, 1],

      //-z
      [1, 1, -1],
      [-1, 1, -1],
      [1, -1, -1],
      [-1, -1, -1],
    ];

    this.indices = [
      0, 3, 2,
      0, 1, 3,
      5, 6, 7,
      5, 4, 6,
      1, 7, 3,
      1, 5, 7,
      4, 2, 6,
      4, 0, 2,
      0, 5, 1,
      0, 4, 5,
      6, 3, 7,
      6, 2, 3,
    ];
    
    this.position = [0, 0, 0]
    this.rotation = [0, 0, 0, 1]
    this.scale = [1, 1, 1]
}

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

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

const dofAmount = 1.75
const cubeScale = 0.05
const numCubes = 300
cubes = []
for (p = 0; p < numCubes; p++) {
    let cube = new Cube()
    progress = (p / numCubes) * 2 - 0.5
    cube.position = [
        Math.sin(6 * Math.PI * progress) * 2 * (0.5 + progress * 0.5), 
        2 * (progress * 2 - 1), 
        Math.cos(6 * Math.PI * progress) * (0.5 + progress * 0.5) 
    ]
    
    // move backward and outward
    // cube.position[0] *= 1 + cube.position[2] * 3
    // cube.position[1] *= 1 + cube.position[2] * 3
    // cube.position[2] = cube.position[2] * 2 + 1 
    
    quat.fromEuler(cube.rotation, rand() * 180, rand() * 180, rand() * 180)
    cube.scale = [cubeScale, cubeScale, cubeScale]
    cubes.push(cube)
}

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 (cube of cubes) {
    let points = renderPoints(cube.vertices, cube.indices, cube.position, cube.rotation, cube.scale)
    lineStrips.push(points)
}

function renderPoints(vertices, indices, position, rotation, scale) {
    mat4.fromRotationTranslationScale(modelMatrix, rotation, position, scale)

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

    let points = []
    for (index of indices) {
        let vertex = vertices[index]
        vertex = vertex.concat(1)
        vec4.transformMat4(vertex, vertex, finalMatrix)
        x = vertex[0] / vertex[3]
        y = vertex[1] / vertex[3]
        z = vertex[2] / vertex[3]
        
        // to canvas coords
        x = -x * 50
        y = -y * 50
    
        points.push([x, y, z])
    }
    return points
}


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

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

    for (j = 0; j < 10; j++) {
        let end = lineStrip[lineStrip.length - 1]
        turtle.penup()
        turtle.goto(end)
        turtle.pendown()
    
        for (point3D of lineStrip) {
            point = [point3D[0] + rand() * point3D[2] * dofAmount, point3D[1] + rand() * point3D[2] * dofAmount]
            turtle.goto(point)
        }
    }

    return i < lineStrips.length - 1
}

function rand() {
    return Math.random() * 2 - 1;
}