add methods for enabling better animation; edit some demos to make use of them

Author: peteroupc

README.md

@@ -76,10 +76,14 @@ Examples
   scene.addShape(shape);
   // Set the starting rotation
   var rotation=[0,0,0];
+  // Create a timer
+  var timer={};
   // Set up the render loop
-  GLUtil.renderLoop(function(){
-   rotation[0]+=.5; // Adjust x-rotation by .5 degree
-   rotation[1]+=1.0; // Adjust y-rotation by 1 degree
+  GLUtil.renderLoop(function(time){
+   // Adjust x-rotation
+   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
+   // Adjust y-rotation
+   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
    // Update the shape's rotation
    shape.setQuaternion(GLMath.quatFromTaitBryan(rotation));
    // Render the scene

demos/compositeMesh.html

@@ -79,10 +79,11 @@
   scene.addShape(shape1);
   // Set the starting rotation
   var rotation=[0,0,0];
+  var timer={};
   // Set up the render loop
-  GLUtil.renderLoop(function(){
-   rotation[0]+=.5; // Adjust x-rotation by .5 degree
-   rotation[1]+=1.0; // Adjust y-rotation by 1 degree
+  GLUtil.renderLoop(function(time){
+   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
+   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
    // Update the shape's rotation
    var q=GLMath.quatFromTaitBryan(rotation);
    scene.shapes[0].setQuaternion(q);

demos/demoutil.js

@@ -1,4 +1,3 @@
-
 window.addEventListener("load",function(){
  var a=document.createElement("a")
  a.setAttribute("style","margin-left:2px;margin-top:2px;margin-bottom:2px;position:absolute;left:80%;top:0;"+
@@ -21,7 +20,7 @@ window.addEventListener("load",function(){
    } else {
     viewed=true;
     a.innerHTML="Hide Source"
-    e.style.display="block"   
+    e.style.display="block"
    }
  })
-})
+})

demos/gradient.html

@@ -106,10 +106,11 @@
    var shape=scene.makeShape(mesh).setTexture(tex)
    scene.addShape(shape);
    var rotation=[0,0,0];
-   GLUtil.renderLoop(function(){
+   var timer={};
+   GLUtil.renderLoop(function(time){
     fc.update();
-    rotation[0]+=0.5;
-    rotation[1]+=1;
+    rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
+    rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
     var q=GLMath.quatFromTaitBryan(rotation);
     shape.setQuaternion(q);
     scene.render();

demos/platonic.html

@@ -131,14 +131,15 @@
   scene.addShape(
     scene.makeShape(mesh).setMaterial(shiny("yellow")).setPosition(-15,-5,0))
   var rotation=[0,0,0];
-  GLUtil.renderLoop(function(){
+  var timer={};
+  GLUtil.renderLoop(function(time){
    scene.setOrthoAspect(-20,20,-10,10,-20,20);
    for(var i=0;i<scene.shapes.length;i++){
     scene.shapes[i].setQuaternion(
       GLMath.quatFromTaitBryan(rotation));
    }
-   rotation[0]+=0.5;
-   rotation[1]+=1;
+   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
+   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
    scene.render();
   });
 //-->

demos/simple.html

@@ -35,10 +35,14 @@
   scene.addShape(shape);
   // Set the starting rotation
   var rotation=[0,0,0];
+  // Create a timer
+  var timer={};
   // Set up the render loop
-  GLUtil.renderLoop(function(){
-   rotation[0]+=.5; // Adjust x-rotation by .5 degree
-   rotation[1]+=1.0; // Adjust y-rotation by 1 degree
+  GLUtil.renderLoop(function(time){
+   // Adjust x-rotation
+   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
+   // Adjust y-rotation
+   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
    // Update the shape's rotation
    var q=GLMath.quatFromTaitBryan(rotation);
    shape.setQuaternion(q);

demos/squares.html

@@ -390,17 +390,16 @@
   linknone();
   link2a();
   var rotation=[0,0,0];
+  var timer={};
   var c=[1,2,3,4,5,6,7,6,5,4,3,2]
-  var time=0
   var rot=0
-  GLUtil.renderLoop(function(){
+  GLUtil.renderLoop(function(time){
    if(currentFilter){
     currentFilter.setUniforms({
-      "coarseness":c[(Math.floor(time/5))%c.length],
-      "time":Math.floor(time/3)
+      "coarseness":c[Math.floor(c.length*GLUtil.getTimePosition(timer,time,1500))],
+      "time":100*GLUtil.getTimePosition(timer,time,5000)
     })
    }
-   time+=1
    for(var i=0;i<blinds.shapes.length;i++){
     blinds.shapes[i].setQuaternion(
       GLMath.quatFromAxisAngle(rot,0,1,0));
@@ -409,10 +408,9 @@
     platonic.shapes[i].setQuaternion(
       GLMath.quatFromTaitBryan(rotation));
    }
-   rot+=5
-   rot%=360
-   rotation[0]+=0.5;
-   rotation[1]+=1;
+   rot=360*GLUtil.getTimePosition(timer,time,2000);
+   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
+   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
    scene.render();
    fc.update();
   });

demos/starfield.html

@@ -59,88 +59,17 @@
  }
 }
 
-
-/**
-* Stores time values to help enable frame-rate independent
-* animation.
-*/
-var Timer=function(){
- this.time=null;
- this.lastTime=null;
-}
-/**
-* Gets the position of a time value within an interval.
-* This is useful in animation cycles lasting a certain number
-* of seconds, such as rotating a shape in a 5-second cycle.
-* @param {number} timeInMs A time value, in milliseconds.
-* This could be the parameter received in a
-* <code>requestAnimationFrame()</code> callback method.
-* </code>.
-* @param {number} interval The length of the interval
-* (animation cycle), in milliseconds.
-* @return {number} A value in the range [0, 1), where closer
-* to 0 means closer to the start, and closer to 1 means closer
-* to the end of the interval.  If an initial time wasn't set
-* by this timer, returns 0.
-* @example <caption>The following code sets an angle of
-* rotation, in degrees, such that an object rotated with the
-* angle does a 360-degree turn in 5 seconds (5000 milliseconds).
-* The variable <code>time</code> is assumed to be a time
-* value in milliseconds, such as the parameter of a
-* <code>requestAnimationFrame()</code> callback method.
-* </code>
-* var angle = 360 * timer.getTimePosition(time, 5000);
-*/
-Timer.prototype.getTimePosition=function(timeInMs,intervalInMs){
- if(this.time==null) {
-  this.time=timeInMs;
-  this.lastTime=timeInMs;
-  return 0;
- } else {
-  if(this.lastTime==null)this.lastTime=timeInMs;
-  return ((timeInMs-this.time)%intervalInMs)/intervalInMs;
- }
-}
-/**
-* Returns the number of frames that occurred since
-* last time, where a frame is 1/60 of a second.
-* @param {number} timeInMs A time value, in milliseconds.
-* This could be the parameter received in a
-* <code>requestAnimationFrame()</code> callback method.
-* </code>.
-* @return {number} The number of frames relative to
-* the last time value passed to the newFrames() or 
-* getTimePosition() method.  The number can include 
-* fractional frames.  If an 
-* initial time or last time wasn't set by this timer, returns 0.
-*/
-Timer.prototype.newFrames=function(timeInMs){
- if(this.time==null) {
-  this.time=timeInMs;
-  this.lastTime=timeInMs;
-  return 0;
- } else if(this.lastTime==null){
-  this.lastTime=timeInMs;
-  return 0;
- } else {
-  var diff=(timeInMs-this.lastTime);
-  this.lastTime=timeInMs;
-  return diff*60.0/1000.0;
- }
-}
-
   // Create the 3D scene; find the HTML canvas and pass it
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"))
    .cullFace(Scene3D.BACK);
   var fc=new FrameCounterDiv(scene)
-  var timer=new Timer();
+  var timer={};
   scene.setPerspective(45,scene.getClientAspect(),5,1000).setLookAt([0,0,500]);
   var group=starField(scene,1000)
   scene.addShape(group);
-  timer.newFrames();
    GLUtil.renderLoop(function(time){
-    moveStarField(group,1000,timer.newFrames(time))
+    moveStarField(group,1000,GLUtil.newFrames(timer,time))
     fc.update()
     scene.render();
    })

demos/textured.html

@@ -22,93 +22,23 @@
 at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
 */
 
-
-/**
-* Stores time values to help enable frame-rate independent
-* animation.
-*/
-var Timer=function(){
- this.time=null;
- this.lastTime=null;
-}
-/**
-* Gets the position of a time value within an interval.
-* This is useful in animation cycles lasting a certain number
-* of seconds, such as rotating a shape in a 5-second cycle.
-* @param {number} timeInMs A time value, in milliseconds.
-* This could be the parameter received in a
-* <code>requestAnimationFrame()</code> callback method.
-* </code>.
-* @param {number} interval The length of the interval
-* (animation cycle), in milliseconds.
-* @return {number} A value in the range [0, 1), where closer
-* to 0 means closer to the start, and closer to 1 means closer
-* to the end of the interval.  If an initial time wasn't set
-* by this timer, returns 0.
-* @example <caption>The following code sets an angle of
-* rotation, in degrees, such that an object rotated with the
-* angle does a 360-degree turn in 5 seconds (5000 milliseconds).
-* The variable <code>time</code> is assumed to be a time
-* value in milliseconds, such as the parameter of a
-* <code>requestAnimationFrame()</code> callback method.
-* </code>
-* var angle = 360 * timer.getTimePosition(time, 5000);
-*/
-Timer.prototype.getTimePosition=function(timeInMs,intervalInMs){
- if(this.time==null) {
-  this.time=timeInMs;
-  this.lastTime=timeInMs;
-  return 0;
- } else {
-  if(this.lastTime==null)this.lastTime=timeInMs;
-  return ((timeInMs-this.time)%intervalInMs)/intervalInMs;
- }
-}
-/**
-* Returns the number of frames that occurred since
-* last time, where a frame is 1/60 of a second.
-* @param {number} timeInMs A time value, in milliseconds.
-* This could be the parameter received in a
-* <code>requestAnimationFrame()</code> callback method.
-* </code>.
-* @return {number} The number of frames relative to
-* the last time value passed to the newFrames() or 
-* getTimePosition() method.  The number can include 
-* fractional frames.  If an 
-* initial time or last time wasn't set by this timer, returns 0.
-*/
-Timer.prototype.newFrames=function(timeInMs){
- if(this.time==null) {
-  this.time=timeInMs;
-  this.lastTime=timeInMs;
-  return 0;
- } else if(this.lastTime==null){
-  this.lastTime=timeInMs;
-  return 0;
- } else {
-  var diff=(timeInMs-this.lastTime);
-  this.lastTime=timeInMs;
-  return diff*60.0/1000.0;
- }
-}
-
   // Create the 3D scene; find the HTML canvas and pass it
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"))
     .cullFace(Scene3D.BACK);
   var fc=new FrameCounterDiv(scene)
   scene.setPerspective(45,scene.getClientAspect(),0.1,100);
   scene.setLookAt([0,0,40]);
-  var timer=new Timer()
+  var timer={}
   scene.loadAndMapTexture("461223191.jpg").then(function(tex){
    var mesh=Meshes.createBox(10,20,20);
    var shape=scene.makeShape(mesh).setTexture(tex)
    scene.addShape(shape);
    var rotation=[0,0,0];
    GLUtil.renderLoop(function(time){
     fc.update();
-    rotation[0]=360*timer.getTimePosition(time,12000);
-    rotation[1]=360*timer.getTimePosition(time,6000);
+    rotation[0]=360*GLUtil.getTimePosition(timer,time,12000);
+    rotation[1]=360*GLUtil.getTimePosition(timer,time,6000);
     var q=GLMath.quatFromTaitBryan(rotation);
     shape.setQuaternion(q);
     scene.render();

demos/tris.html

@@ -25,6 +25,7 @@
  this.group=new ShapeGroup();
  this.width=scene.getWidth();
  this.scene=scene;
+ this.timer={};
  this.height=scene.getHeight();
  for(var i=0;i<count;i++){
   var tri=TriangleParticles.generateTri(this.width,this.height)
@@ -34,18 +35,19 @@
  }
  this.scene.addShape(this.group);
 }
-TriangleParticles.prototype.update=function(){
+TriangleParticles.prototype.update=function(time){
+ var frames=GLUtil.newFrames(this.timer,time);
  for(var i=0;i<this.tris.length;i++){
-  this.tris[i].life--;
+  this.tris[i].life-=frames;
   if(this.tris[i].life<=0){
    var tri=TriangleParticles.generateTri(this.width,this.height)
    this.tris[i]=tri;
    this.group.shapes[i]=
     TriangleParticles.makeShapeFromTri(tri,this.scene);
   } else {
    var trans=this.group.shapes[i].getTransform()
-   trans.movePosition(this.tris[i].movement)
-   trans.multOrientation(this.tris[i].rotation,0,0,1)
+   trans.movePosition(GLMath.vec3scale(this.tris[i].movement,frames))
+   trans.multOrientation(this.tris[i].rotation*frames,0,0,1)
   }
  }
 }
@@ -114,8 +116,8 @@
   scene.setOrtho(0,scene.getWidth(),scene.getHeight(),0,-2,2);
   var tris=new TriangleParticles(scene,200);
   // Set up the render loop
-  GLUtil.renderLoop(function(){
-   tris.update();
+  GLUtil.renderLoop(function(time){
+   tris.update(time);
    // Render the scene
    scene.render();
   });