move evaluators to extras; edit curve and surface demos

Author: peteroupc

demos/curves.html

@@ -7,6 +7,7 @@
 <script type="text/javascript" src="../glutil_min.js"></script>
 <script type="text/javascript" src="../extras/camera.js"></script>
 <script type="text/javascript" src="../extras/frame.js"></script>
+<script type="text/javascript" src="../extras/evaluators.js"></script>
 <script type="text/javascript" src="../extras/curvetube.js"></script>
 <script type="text/javascript" src="demoutil.js"></script>
 </head>
@@ -27,89 +28,6 @@
 If you like this, you should donate to Peter O.
 at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
 */
-   function makeMesh(func,resolutionU,resolutionV){
-    // Default resolution is 50
-    if(resolutionV==null)resolutionV=resolutionU
-    if(resolutionU==null)resolutionU=50
-    if(resolutionV==null)resolutionV=50
-     // create a new mesh
-     var mesh=new Mesh();
-     // define a color gradient evaluator for
-     // demonstration purposes.  Instead of X, Y, and Z,
-     // generate a Red/Green/Blue color based on
-     // the same parameters U and V as the surface
-     // function for 3D points.
-     var colorGradient={
-      "evaluate":function(u,v){ return [1-u,v,u]; }
-     }
-     // generate the parametric surface.
-
-     var ev=new SurfaceEval()
-      .vertex(func)
-    // Specify the color gradient evaluator defined above
-      .color(colorGradient)
-    // Generate normals for the parametric surface,
-    // which is required for lighting to work correctly
-      .setAutoNormal(true)
-    // Evaluate the surface and generate a triangle
-    // mesh, using resolution+1 different U-coordinates ranging
-    // from 0 to 1, and resolution+1
-    // different V-coordinates ranging from 0 to 1
-    // Instead of Mesh.TRIANGLES, we could use
-    // Mesh.LINES to create a wireframe mesh,
-    // or Mesh.POINTS to create a point mesh.
-      .evalSurface(mesh,Mesh.TRIANGLES,resolutionU,resolutionV);
-    // Surface generated, return the mesh
-    return mesh;
-  }
-function Hypotrochoid(outerRadius, innerRadius, distFromInnerCenter){
- this.outer=outerRadius;
- this.inner=innerRadius;
- this.distFromInner=distFromInnerCenter;
- this.evaluate=function(u){
-  u=u*GLMath.PiTimes2;
-  var oi=(this.outer-this.inner)
-  var term=oi*u/this.inner;
-  // NOTE: prolate hypotrochoid if distFromInner>innerRadius
-  return [
-   oi*Math.cos(u)+this.distFromInner*Math.cos(term),
-   oi*Math.sin(u)-this.distFromInner*Math.sin(term),
-   0
-  ]
- }
-}
-
-function Trochoid(radius, distFromCenter){
- this.inner=radius;
- this.distFromCenter=distFromCenter;
- this.evaluate=function(u){
-  u=u*GLMath.PiTimes2;
-  var cosu = Math.cos(u);
-  var sinu = (u>=0 && u<6.283185307179586) ? (u<=3.141592653589793 ? Math.sqrt(1.0-cosu*cosu) : -Math.sqrt(1.0-cosu*cosu)) : Math.sin(u);
-  return [
-   this.inner*u-this.distFromCenter*sinu,
-   this.inner    -this.distFromCenter*cosu,
-   0
-  ]
- }
-}
-
-function Epitrochoid(outerRadius, innerRadius, distFromInnerCenter){
- this.outer=outerRadius;
- this.inner=innerRadius;
- this.distFromInner=distFromInnerCenter;
- this.evaluate=function(u){
-  u=u*GLMath.PiTimes2;
-  var oi=(this.outer+this.inner)
-  var term=oi*u/this.inner;
-  // NOTE: prolate epitrochoid if distFromInner>innerRadius
-  return [
-   oi*Math.cos(u)-this.distFromInner*Math.cos(term),
-   oi*Math.sin(u)-this.distFromInner*Math.sin(term),
-   0
-  ]
- }
-}
 
 var HypocycloidSeal={create:function(radius,points){
  return Hypocycloid.create(radius,radius/points);
@@ -155,7 +73,8 @@
  }
 }
 function makeThinCurveMesh(curve){
- return makeMesh(new CurveTube(curve,0.025),150,20)
+ var surface=new CurveTube(curve,0.025);
+ return makeMesh(surface,150,20)
 }
 
 var shapeGroup=new ShapeGroup();
@@ -242,6 +161,7 @@
   });
 })
 
+
   // Create the 3D scene; find the HTML canvas and pass it
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"));

demos/demoutil.js

@@ -201,6 +201,44 @@ function pushSettings(updateMeshFunc,settings){
  setRanges(ranges);
  updateShape(updateMeshFunc);
 };
+
+
+   function makeMesh(func,resolutionU,resolutionV){
+    // Default resolution is 50
+    if(resolutionV==null)resolutionV=resolutionU
+    if(resolutionU==null)resolutionU=50
+    if(resolutionV==null)resolutionV=50
+     // create a new mesh
+     var mesh=new Mesh();
+     // define a color gradient evaluator for
+     // demonstration purposes.  Instead of X, Y, and Z,
+     // generate a Red/Green/Blue color based on
+     // the same parameters U and V as the surface
+     // function for 3D points.
+     var colorGradient={
+      "evaluate":function(u,v){ return [1-u,v,u]; }
+     }
+     // generate the parametric surface.
+
+     var ev=new SurfaceEval()
+      .vertex(func)
+    // Specify the color gradient evaluator defined above
+      .color(colorGradient)
+    // Generate normals for the parametric surface,
+    // which is required for lighting to work correctly
+      .setAutoNormal(true)
+    // Evaluate the surface and generate a triangle
+    // mesh, using resolution+1 different U-coordinates ranging
+    // from 0 to 1, and resolution+1
+    // different V-coordinates ranging from 0 to 1
+    // Instead of Mesh.TRIANGLES, we could use
+    // Mesh.LINES to create a wireframe mesh,
+    // or Mesh.POINTS to create a point mesh.
+      .evalSurface(mesh,Mesh.TRIANGLES,resolutionU,resolutionV);
+    // Surface generated, return the mesh
+    return mesh;
+  }
+
 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;"+

demos/surfaces.html

@@ -5,6 +5,7 @@
 canvas { width:100%; height:100%; overflow: hidden; }
 </style>
 <script type="text/javascript" src="../glutil_min.js"></script>
+<script type="text/javascript" src="../extras/evaluators.js"></script>
 <script type="text/javascript" src="../extras/camera.js"></script>
 <script type="text/javascript" src="../extras/frame.js"></script>
 <script type="text/javascript" src="extras.js"></script>
@@ -93,87 +94,6 @@
   return Math.sign(r)*Math.pow(Math.abs(r),n);
  }
 
-/**
-* Parametric evaluator for a surface of revolution, which results by revolving
-* an X/Y curve around an axis.
-* @class
-* @alias SurfaceOfRevolution
-* @param {Function} curve Curve to rotate about the X-axis.
-* The curve function must contain a function
-* named "evaluate", which takes the following parameter:<ul>
-* <li><code>u</code> - A curve coordinate, generally from 0 to 1.
-* </ul>
-* The evaluator function returns an array of at least 2 elements: the first
-* element is the X coordinate of the curve's position, and the second
-* element is the Y coordinate.
-* @param {number} minval Smallest U-coordinate.
-* @param {number} maxval Largest U-coordinate.
-*/
-var SurfaceOfRevolution=function(curve,minval,maxval){
- this.curve=curve
- this.minval=minval
- this.maxval=maxval
- this.evaluate=function(u,v){
-  v=1-v;
-  v*=GLMath.PiTimes2;
-  u=minval+(maxval-minval)*u;
-  var cosv = Math.cos(v);
-  var sinv = (v>=0 && v<6.283185307179586) ? (v<=3.141592653589793 ? Math.sqrt(1.0-cosv*cosv) : -Math.sqrt(1.0-cosv*cosv)) : Math.sin(v);
-  var curvepos=this.curve.evaluate(u);
-  return [curvepos[0],curvepos[1]*cosv,curvepos[1]*sinv];
- }
-}
-/**
-* Parametric evaluator for a surface of revolution whose curve is the graph of
-* a single-variable function.
-* @param {Function} func Function whose graph will be
-* rotated about the X-axis.  The function takes a number
-* as a single parameter and returns a number.
-* @param {number} minval Smallest parameter of the function.
-* @param {number} maxval Largest parameter of the function.
-* @return {SurfaceOfRevolution}
-*/
-SurfaceOfRevolution.fromFunction=function(func,minval,maxval){
-  return new SurfaceOfRevolution({
-    "evaluate":function(u){
-      return [u,func(u),0];
-    }},minval,maxval);
-}
-/**
-* Parametric evaluator for a torus, a special case of a surface of revolution.
-* @param {number} outerRadius Radius from the center to the innermost
-* part of the torus.
-* @param {number} innerRadius Radius from the inner edge to the innermost
-* part of the torus.
-* @param {Function|undefined} curve Object describing
-* a curve to serve as the cross section of the torus.
-* The curve need not be closed; in fact, certain special surfaces can result
-* by leaving the ends open.
-* The curve function must contain a function
-* named "evaluate", which takes the following parameter:<ul>
-* <li><code>u</code> - A curve coordinate, generally from 0 to 1.
-* </ul>
-* The evaluator function returns an array of at least 2 elements: the first
-* element is the X coordinate of the curve's position, and the second
-* element is the Y coordinate.  If null or omitted, uses a circular cross section.
-* @return {SurfaceOfRevolution}
-*/
-SurfaceOfRevolution.torus=function(outerRadius,innerRadius,curve){
-  if(!curve)curve={
-    "evaluate":function(u){
-      u*=GLMath.PiTimes2;
-      return [Math.sin(u),Math.cos(v)]
-    }
-  }
-  return new SurfaceOfRevolution({
-    "evaluate":function(u){
-      var curvept=curve.evaluate(u)
-      var x=innerRadius*curvept[1];
-      var y=outerRadius+innerRadius*curvept[0];
-      return [x,y,0];
-    }},0,GLMath.PiTimes2);
-}
-
 var KleinBottle=function(){
  this.evaluate=function(u,v){
   var cospi;
@@ -238,39 +158,6 @@
   return [x,y,z]
  }
 }
-   function makeMesh(func,resolution){
-    // Default resolution is 50
-    if(resolution==null)resolution=50
-     // create a new mesh
-     var mesh=new Mesh();
-     // define a color gradient evaluator for
-     // demonstration purposes.  Instead of X, Y, and Z,
-     // generate a Red/Green/Blue color based on
-     // the same parameters U and V as the surface
-     // function for 3D points.
-     var colorGradient={
-      "evaluate":function(u,v){ return [1-u,v,u]; }
-     }
-     // generate the parametric surface.
-
-     var ev=new SurfaceEval()
-      .vertex(func)
-    // Specify the color gradient evaluator defined above
-      .color(colorGradient)
-    // Generate normals for the parametric surface,
-    // which is required for lighting to work correctly
-      .setAutoNormal(true)
-    // Evaluate the surface and generate a triangle
-    // mesh, using resolution+1 different U-coordinates ranging
-    // from 0 to 1, and resolution+1
-    // different V-coordinates ranging from 0 to 1
-    // Instead of Mesh.TRIANGLES, we could use
-    // Mesh.LINES to create a wireframe mesh,
-    // or Mesh.POINTS to create a point mesh.
-      .evalSurface(mesh,Mesh.TRIANGLES,resolution,resolution);
-    // Surface generated, return the mesh
-    return mesh;
-  }
 
 var shapeGroup=new ShapeGroup();
 var allsettings={}

demos/surfaces2d.html

@@ -5,6 +5,7 @@
 canvas { width:100%; height:100%; overflow: hidden; }
 </style>
 <script type="text/javascript" src="../glutil_min.js"></script>
+<script type="text/javascript" src="../extras/evaluators.js"></script>
 <script type="text/javascript" src="../extras/camera.js"></script>
 <script type="text/javascript" src="../extras/frame.js"></script>
 <script type="text/javascript" src="demoutil.js"></script>

extras/curvetube.js

@@ -179,12 +179,15 @@ _FrenetFrames.prototype.getSampleAndBasisVectors=function(u){
 * @param {number} [thickness] Radius of the
 * extruded tube.  If this parameter is null or omitted, the default is 0.125.
 * @param {Object} [sweptCurve] Object describing
-* a curve to serve as the cross section of the extruded shape,
+* a two-dimensional curve to serve as the cross section of the extruded shape,
 * corresponding to the V coordinate of the CurveTube's
-* "evaluate" method. If this parameter is null or omitted, uses a circular cross section
+* "evaluate" method. 
+* If this parameter is null or omitted, uses a circular cross section
 * in which the V coordinate ranges from 0 through
 * 1.  The curve object must contain a function
-* named "evaluate", with the same meaning as for the "func" parameter.<p>
+* named "evaluate", with the same meaning as for the "func" parameter, 
+* except the third element, if any, of the return value is ignored.<p>
+* The curve need not be closed.<p>
 * The cross section will generally have a radius of 1 unit; bigger
 * or smaller cross sections will affect the meaning of the "thickness"
 * parameter.
@@ -214,16 +217,16 @@ CurveTube.prototype.evaluate=function(u, v){
   t1 = vpos[0];
   t2 = vpos[1];
   var t3=vpos[2];
-  sx = sampleX+(basisVectors[0]*t2+basisVectors[3]*t1+basisVectors[6]*t3)*this.thickness;
-  sy = sampleY+(basisVectors[1]*t2+basisVectors[4]*t1+basisVectors[7]*t3)*this.thickness;
-  sz = sampleZ+(basisVectors[2]*t2+basisVectors[5]*t1+basisVectors[8]*t3)*this.thickness;
+  sx = sampleX+(-basisVectors[0]*t1+basisVectors[3]*t2)*this.thickness;
+  sy = sampleY+(-basisVectors[1]*t1+basisVectors[4]*t2)*this.thickness;
+  sz = sampleZ+(-basisVectors[2]*t1+basisVectors[5]*t2)*this.thickness;
  } else {
   var vt=GLMath.PiTimes2*v;
   t1 = Math.cos(vt);
   t2 = (vt>=0 && vt<6.283185307179586) ? (vt<=3.141592653589793 ? Math.sqrt(1.0-t1*t1) : -Math.sqrt(1.0-t1*t1)) : Math.sin(vt);
-  sx = sampleX+(basisVectors[0]*t2+basisVectors[3]*t1)*this.thickness;
-  sy = sampleY+(basisVectors[1]*t2+basisVectors[4]*t1)*this.thickness;
-  sz = sampleZ+(basisVectors[2]*t2+basisVectors[5]*t1)*this.thickness;
+  sx = sampleX+(-basisVectors[0]*t1+basisVectors[3]*t2)*this.thickness;
+  sy = sampleY+(-basisVectors[1]*t1+basisVectors[4]*t2)*this.thickness;
+  sz = sampleZ+(-basisVectors[2]*t1+basisVectors[5]*t2)*this.thickness;
  }
  return [sx,sy,sz];
 }