title: WebGL rotating over a given center
body: <p>So I have a XML document that I parse in order to execute actions in a WebGL scene.
  So I have Nodes that can or cannot be animated.
  Then I have a CircularAnimation that has a Center(x, y, z) that the Node should rotate around with a Radius distance from that center. A Span of time for the Animation, a satrting Angle and a Rotation Angle.</p>
  
  <pre><code>&lt;ANIMATION id="cir1" span="5" type="circular" center="0 0 0" radius="3" startang="0" rotang="360"/&gt;
  </code></pre>
  
  <p>In my CircularAnimation class I have a function to make the object move and update it's horizontal orientation. Similar to the way the earth rotates over the sun.</p>
  
  <p>I use the currTime defined in the Animation class to calculate if the span has ended or not.</p>
  
  <pre><code>if(this.beg_time == null) this.beg_time = currTime;
  else 
  {
      if((currTime-this.beg_time) &gt;= this.span) return;
      else 
      {
          // Calculates angles to rotate
          var ang_inc = (this.angle_rot*(currTime-this.beg_time))/this.span;
          var total_rot = ang_inc+this.angle_beg;
  
          // Rotates node Matrix from the Matrix_Beg
          mat4.rotateY(this.node.matrix, this.node.beg_matrix, total_rot);
  
  
          // Moves the node to the desired center
          mat4.translate(this.node.matrix, this.node.matrix, [this.x, this.y, this.z]);
  
          // Moves the node according to the given radius
          mat4.translate(this.node.matrix, this.node.matrix, [this.radius*Math.cos(ang_inc), 0, this.radius*Math.sin(ang_inc)]);
      }
  }
  </code></pre>
  
  <p>However this doesn't seem to work properly, any ideas why?</p>