var svgns  = "http://www.w3.org/2000/svg";
var create = document.createElementNS.bind(document, svgns);
var select = document.querySelector.bind(document);

function demo() {

  var group = select("#group");  
  var light = new Light(0, 0, -100, 0);
  var mesh  = new Mesh3D(group)
    .setCenterPoint(0, 0, 100)
    .setVanishingPoint(300, 300)
    .setFocalLength(300)
    .setLight(light);

  var draw = mesh.draw.bind(mesh);

  // Spiral options
  var z1 =  80;
  var z2 = -80;  
  var sides  = 70;
  var index  = 0;
  var offset = 5;
  var rings  = 4;       
  var faces  = [];
  var points = [];   
  var rise   = z1 / sides; 
  var color  = "#6495ED";
  
  // Create vertices
  for (var i = 0; i < sides; i++) {

    var angle = Math.PI * rings * 2 / sides * i;    
    var x = offset * angle * Math.cos(angle);
    var y = offset * angle * Math.sin(angle);

    // Start position
    mesh.addVertex(0, 0, 0);
    mesh.addVertex(0, 0, 0);

    // End Position
    faces.push({ x, y, z: z1 });
    faces.push({ x, y, z: z2 });     

    z1 -= rise;
    z2 += rise;
  }  
  
  // Create faces out of tris
  for (var i = 0; i < sides - 1; i++) {

    var A = mesh.vertices[index];
    var B = mesh.vertices[index + 1];
    var C = mesh.vertices[index + 2];
    var D = mesh.vertices[index + 3];

    mesh.addFace(A, D, B, color);
    mesh.addFace(A, C, D, color);
    index += 2;
  }

  points = mesh.vertices.slice();
  points.reverse();
  faces.reverse();  
  
  var tl = new TimelineMax({ onUpdate: draw })
    .to(light, 2, { brightness: 1, x: 300, y: 300, z: 0 }, "start")
    .to(mesh, 9, { rotationY: Math.PI * 2, repeat: -1, ease: Power0.easeNone }, "start")
    .add(spiralAnimation, "start")
    
  function spiralAnimation() {
        
    return points.reduce((tl, point, i) => {
      var face  = faces[i];
      var start = i % 2 !== 0 ? i - 1 : i;
      var delay = "spiral+=" + start * 0.1;
      return tl.to(point, 0.3, { x0: face.x, y0: face.y, z0: face.z }, delay);
    }, new TimelineMax({ repeat: -1, repeatDelay: 1, yoyo: true }));
  }
}


//
// Vertex
// ===========================================================================
class Vertex {
  
  constructor(x, y, z) {
        
    this.x0 = x;
    this.y0 = y;
    this.z0 = z;
    
    this.x = x;
    this.y = y;
    this.z = z;
    
    this.screenX = 0;
    this.screenY = 0;
  }
  
  transform(matrix, focus, center, vanish) {
    
    var x = this.x0;
    var y = this.y0;
    var z = this.z0;

    this.x = x * matrix[0] + y * matrix[4] + z * matrix[8]  + matrix[12];
    this.y = x * matrix[1] + y * matrix[5] + z * matrix[9]  + matrix[13];
    this.z = x * matrix[2] + y * matrix[6] + z * matrix[10] + matrix[14];
    
    var scale = focus / (focus + this.z + center.z);
    
    this.screenX = vanish.x + (center.x + this.x) * scale;
    this.screenY = vanish.y + (center.y + this.y) * scale;
  }
}


//
// Edge
// ===========================================================================
class Edge {
  
  constructor(v1, v2, color, parent) {
    
    this.v1 = v1;
    this.v2 = v2;
    
    this.parent = parent;
    this.color  = color || "#000000";
    this.node   = create("line");
    
    this.node.setAttribute("stroke", this.color);
    this.node.setAttribute("stroke-width", 3);
    this.parent.appendChild(this.node);    
    this.draw();
  }
  
  draw() {
    this.node.setAttribute("x1", this.v1.screenX);
    this.node.setAttribute("y1", this.v1.screenY);
    this.node.setAttribute("x2", this.v2.screenX);
    this.node.setAttribute("y2", this.v2.screenY);
  }
}

//
// Face
// ===========================================================================
class Face {
  
  constructor(v1, v2, v3, color, parent, light) {
    
    this.vertices = [v1, v2, v3];
    
    this.parent = parent;
    this.light  = light;
    this.color  = color || "#d3d3d3";    
    this.node   = create("polygon");
    
    this.parent.appendChild(this.node);
    this.draw();
  }
  
  get depth() {
    return Math.min(this.vertices[0].z, this.vertices[1].z, this.vertices[2].z);
  }
  
  draw() {
        
    this.parent.appendChild(this.node);
    
    var color  = this.getAdjustedColor();    
    var points = [];
    
    for (let vertex of this.vertices) {
      points.push(vertex.screenX, vertex.screenY);
    } 
    
    this.node.setAttribute("fill",   color);
    this.node.setAttribute("stroke", color);
    this.node.setAttribute("points", points);
  }    
  
  getAdjustedColor() {
    
    if (!this.light) return this.color;
    
    var factor = getLightFactor(this.vertices, this.light);
    var color  = parseColor(this.color, true);
    var r = color >> 16;
    var g = color >> 8 & 0xff;
    var b = color & 0xff;
    
    r *= factor;
    g *= factor;
    b *= factor;
    
    return parseColor(r << 16 | g << 8 | b);
  }
}


//
// Light
// ===========================================================================
class Light {
  
  constructor(x = 0, y = 0, z = -100, brightness = 1) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.brightness = brightness;
  }
  
  get brightness() { return this._brightness; }
  set brightness(value) { this._brightness = Math.min(Math.max(value, 0), 1); }
}

//
// Mesh 3D
// ===========================================================================
class Mesh3D {
  
  constructor(parent) {
    
    this.parent = parent;
    
    this.transform = new Transform();    
    this.matrix = this.transform.matrix;
    
    this.vertices = [];
    this.edges = [];
    this.faces = [];
    
    this.focus = 250;
        
    this.x = 0;
    this.y = 0;
    this.z = 0;
    
    this.cpX = 0;
    this.cpY = 0;
    this.cpZ = 0;
    
    this.vpX = 0;
    this.vpY = 0;
    
    this.rotationX = 0;
    this.rotationY = 0;
    this.rotationZ = 0;
  }
  
  setCenterPoint(x, y, z) {       
    this.cpX = x;
    this.cpY = y;
    this.cpZ = z;
    return this;
  }
  
  setFocalLength(focus) {
    this.focus = focus;
    return this;
  }
  
  setLight(light) {
    this.light = light;
    return this;
  }
  
  setVanishingPoint(x, y) {    
    this.vpX = x;
    this.vpY = y;
    return this;
  }
  
  addVertex(x, y, z) {
    this.vertices.push(new Vertex(x, y, z));
    return this;
  }
  
  addEdge(v1, v2, color) {
    this.edges.push(new Edge(v1, v2, color, this.parent));
    return this;
  }
  
  addFace(v1, v2, v3, color) {
    this.faces.push(new Face(v1, v2, v3, color, this.parent, this.light));
    return this;
  }
    
  draw() {
        
    this.transform.translate(this.x, this.y, this.z);
    this.transform.rotate(this.rotationX, this.rotationY, this.rotationZ);

    var vp = { x: this.vpX, y: this.vpY };
    var cp = { x: this.cpX, y: this.cpY, z: this.cpZ };
        
    for (let vertex of this.vertices) {
      vertex.transform(this.matrix, this.focus, cp, vp);
    } 

    this.faces.sort((a, b) => b.depth - a.depth);
        
    for (let edge of this.edges) edge.draw();    
    for (let face of this.faces) face.draw();
  }
}


//
// Transform
// ===========================================================================
class Transform {
  
  constructor() {
    this.matrix = [
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1
    ];
  }
  
  translate(x, y, z) {
    this.matrix[12] = x;
    this.matrix[13] = y;
    this.matrix[14] = z;
  }
  
  rotate(x, y, z) {

    var matrix = this.matrix;

    var cosX = Math.cos(x);
    var sinX = Math.sin(x);
    var cosY = Math.cos(y);
    var sinY = Math.sin(y);
    var cosZ = Math.cos(z);
    var sinZ = Math.sin(z);

    matrix[0]  =  cosY * cosZ + sinY * sinX * sinZ;
    matrix[1]  = -cosY * sinZ + sinY * sinX * cosZ;
    matrix[2]  = -sinY * cosX;
    matrix[4]  =  cosX * sinZ;
    matrix[5]  =  cosX * cosZ;
    matrix[6]  =  sinX;
    matrix[8]  =  sinY * cosZ - cosY * sinX * sinZ;
    matrix[9]  = -sinY * sinZ - cosY * sinX * cosZ;
    matrix[10] =  cosY * cosX;
  }
}


//
// Parse Color
// ===========================================================================
function parseColor(color, toNumber) {

  var type = typeof color;

  if (toNumber) {
    if (type === "number") return (color | 0);
    if (type === "string" && color[0] === "#") color = color.slice(1);
    return parseInt(color, 16);
  } 

  if (type === "number") {
    color = "#" + ("00000" + (color | 0).toString(16)).substr(-6);
  }
  return color;
}


//
// Get Light Factor
// ===========================================================================
function getLightFactor(points, light) {
  
  var a = points[0];
  var b = points[1];
  var c = points[2];

  // Cross products
  var ab = {
    x: a.x - b.x,
    y: a.y - b.y,
    z: a.z - b.z
  };

  var bc = {
    x: b.x - c.x,
    y: b.y - c.y,
    z: b.z - c.z
  };

  // Surface normal
  var normal = {
    x:   (ab.y * bc.z) - (ab.z * bc.y),
    y: -((ab.x * bc.z) - (ab.z * bc.x)),
    z:   (ab.x * bc.y) - (ab.y * bc.x)
  };

  var dot  = dotProduct(normal, light);
  var mag1 = magnitude(normal);
  var mag2 = magnitude(light);  
  
  return (Math.acos(dot / (mag1 * mag2)) / Math.PI) * light.brightness;
}

function magnitude(v) {
  return Math.sqrt(dotProduct(v));
}

function dotProduct(v1, v2) {
  v2 = v2 || v1;
  return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
}

////////////////
demo();