]> git.scottworley.com Git - nt3d/commitdiff
Use a params object rather than loose arguments
authorScott Worley <scottworley@scottworley.com>
Wed, 21 May 2014 07:59:14 +0000 (00:59 -0700)
committerScott Worley <scottworley@scottworley.com>
Wed, 21 May 2014 07:59:14 +0000 (00:59 -0700)
Otherwise, making subroutines is tedious -- each function has to accept
a bunch of loose args only to pass them along.  Adding a parameter that
in only used in a subroutine required changing all the callers all the
way up the stack.

13 files changed:
box_by_extrude.html
box_by_faces.html
box_by_quadstrip.html
box_by_rotation.html
box_by_trianglefan.html
cone_primitive.html
medusa.html
nt3d.js
rmm.html
serrated.html
sphere_primitive.html
torus_by_extrude.html
wrap_sphere.html

index fb1ca2cf61592cfa8ec72896ec9ddae36bc53880..62dca74016372813a8f4cabf90a34a9348596bcc 100644 (file)
@@ -3,17 +3,17 @@
     <title>Box by extrude</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function box_by_extrude(size) {
-        var origin = [0,    0,    0];
-        var x      = [size, 0,    0];
-        var y      = [0,    size, 0];
-        var xy     = [size, size, 0];
+      function box_by_extrude(params) {
+        var origin = [0,           0,           0];
+        var x      = [params.size, 0,           0];
+        var y      = [0,           params.size, 0];
+        var xy     = [params.size, params.size, 0];
        return nt3d.extrude([[0, 0, 0], [0, 0, 1]],
                            [origin, x, xy, y],
                            [0, 0, 1],
                            [1, 0, 0]);
       }
-      var params = [["Size", 1]];
+      var params = [["size", 1]];
     </script>
   </head>
   <body onload="nt3d.framework(box_by_extrude, params)">
index b27d79551896ffdc403a49752d74760b8a858e35..938c8e82b5c8fd92f8874a7d32174c6cc59ba219 100644 (file)
@@ -3,15 +3,15 @@
     <title>Box by faces</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function box_by_faces(size) {
-        var origin = [0,    0,    0   ];
-        var x      = [size, 0,    0   ];
-        var y      = [0,    size, 0   ];
-        var z      = [0,    0,    size];
-        var xy     = [size, size, 0   ];
-        var xz     = [size, 0,    size];
-        var yz     = [0,    size, size];
-        var xyz    = [size, size, size];
+      function box_by_faces(params) {
+        var origin = [0,           0,           0          ];
+        var x      = [params.size, 0,           0          ];
+        var y      = [0,           params.size, 0          ];
+        var z      = [0,           0,           params.size];
+        var xy     = [params.size, params.size, 0          ];
+        var xz     = [params.size, 0,           params.size];
+        var yz     = [0,           params.size, params.size];
+        var xyz    = [params.size, params.size, params.size];
        return [].concat(
          nt3d.quad(origin, y, xy, x), // bottom (near xy face)
          nt3d.quad(origin, x, xz, z), // near xz face
@@ -20,7 +20,7 @@
          nt3d.quad(x, xy, xyz, xz),   // far yz face
          nt3d.quad(z, xz, xyz, yz));  // top (far xy face)
       }
-      var params = [["Size", 1]];
+      var params = [["size", 1]];
     </script>
   </head>
   <body onload="nt3d.framework(box_by_faces, params)">
index 83ad5ab47fd21ccaa70aceb941ec3889f75d31f3..ede01d9d12ff64e57f8730fa0f71b2e8e91a6d36 100644 (file)
@@ -3,21 +3,21 @@
     <title>Box by quadstrip</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function box_by_quadstrip(size) {
-        var origin = [0,    0,    0   ];
-        var x      = [size, 0,    0   ];
-        var y      = [0,    size, 0   ];
-        var z      = [0,    0,    size];
-        var xy     = [size, size, 0   ];
-        var xz     = [size, 0,    size];
-        var yz     = [0,    size, size];
-        var xyz    = [size, size, size];
+      function box_by_quadstrip(params) {
+        var origin = [0,           0,           0          ];
+        var x      = [params.size, 0,           0          ];
+        var y      = [0,           params.size, 0          ];
+        var z      = [0,           0,           params.size];
+        var xy     = [params.size, params.size, 0          ];
+        var xz     = [params.size, 0,           params.size];
+        var yz     = [0,           params.size, params.size];
+        var xyz    = [params.size, params.size, params.size];
        return [].concat(
          nt3d.quad(origin, y, xy, x), // bottom
          nt3d.quad(z, xz, xyz, yz),   // top
          nt3d.closed_quadstrip([origin, z, y, yz, xy, xyz, x, xz]));
       }
-      var params = [["Size", 1]];
+      var params = [["size", 1]];
     </script>
   </head>
   <body onload="nt3d.framework(box_by_quadstrip, params)">
index d575a426717b9ddcb5731473b2d61834f7b28f9c..e39394e2f48426bd470f60f720b7e3ae0c3e1c17 100644 (file)
@@ -3,11 +3,11 @@
     <title>Box by rotation</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function box_by_rotation(size) {
-        var origin = [0,    0,    0   ];
-        var x      = [size, 0,    0   ];
-        var y      = [0,    size, 0   ];
-        var xy     = [size, size, 0   ];
+      function box_by_rotation(params) {
+        var origin = [0,           0,           0];
+        var x      = [params.size, 0,           0];
+        var y      = [0,           params.size, 0];
+        var xy     = [params.size, params.size, 0];
         var xy_face = nt3d.quad(origin, y, xy, x);
        return [].concat(
          xy_face,
@@ -17,7 +17,7 @@
          nt3d.rotate(xy_face, [1, 1, 0], nt3d.unit([-1, -1, 1]),  2*Math.PI/3),  // far yz
          nt3d.rotate(xy_face, [1, 1, 0], nt3d.unit([-1, -1, 1]), -2*Math.PI/3)); // far xz
       }
-      var params = [["Size", 1]];
+      var params = [["size", 1]];
     </script>
   </head>
   <body onload="nt3d.framework(box_by_rotation, params)">
index 7c0519cdeaab460910a244dd7f4a996850f4b444..3090d4a43e164c36ccb1ce1f67d162b3064b2763 100644 (file)
@@ -3,20 +3,20 @@
     <title>Box by trianglefan</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function box_by_trianglefan(size) {
-        var origin = [0,    0,    0   ];
-        var x      = [size, 0,    0   ];
-        var y      = [0,    size, 0   ];
-        var z      = [0,    0,    size];
-        var xy     = [size, size, 0   ];
-        var xz     = [size, 0,    size];
-        var yz     = [0,    size, size];
-        var xyz    = [size, size, size];
+      function box_by_trianglefan(params) {
+        var origin = [0,           0,           0          ];
+        var x      = [params.size, 0,           0          ];
+        var y      = [0,           params.size, 0          ];
+        var z      = [0,           0,           params.size];
+        var xy     = [params.size, params.size, 0          ];
+        var xz     = [params.size, 0,           params.size];
+        var yz     = [0,           params.size, params.size];
+        var xyz    = [params.size, params.size, params.size];
        return [].concat(
          nt3d.closed_trianglefan([origin, x, xz, z, yz, y, xy]),
          nt3d.closed_trianglefan([xyz, yz, z, xz, x, xy, y]));
       }
-      var params = [["Size", 1]];
+      var params = [["size", 1]];
     </script>
   </head>
   <body onload="nt3d.framework(box_by_trianglefan, params)">
index 19a76862796434c7e7ebc362686623b0ae284e42..ef044fd36c8a30b3c0ad48d526a06a27a2337c7c 100644 (file)
@@ -3,12 +3,12 @@
     <title>Cone primitive</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function cone_primitive(height, radius, steps) {
-       return nt3d.cone([0,0,0], [0,0,height], radius, steps);
+      function cone_primitive(params) {
+       return nt3d.cone([0,0,0], [0,0,params.height], params.radius, params.steps);
       }
-      var params = [["Height", 100],
-                    ["Radius", 50],
-                    ["Steps", 30]];
+      var params = [["height", 100],
+                    ["radius", 50],
+                    ["steps", 30]];
     </script>
   </head>
   <body onload="nt3d.framework(cone_primitive, params)">
index e82d9e53e75ba13949961beae30a1059c9c22031..69ea3ba39594dfb892b94b6816356b9d873f1d09 100644 (file)
@@ -3,19 +3,19 @@
     <title>Medusa</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function medusa(first_ring_radius, num_rings, ring_spacing, num_fingers, finger_radius, finger_faces, finger_points, finger_twirl, finger_height) {
-        var finger_crosssection = nt3d.circle(finger_radius, finger_faces);
+      function medusa(params) {
+        var finger_crosssection = nt3d.circle(params.finger_radius, params.finger_faces);
         var fingers = [];
-        for (var ring_num = 0; ring_num < num_rings; ring_num++) {
-          var ring_radius = first_ring_radius + ring_num * ring_spacing;
-          for (var finger_num = 0; finger_num < num_fingers; finger_num++) {
-            var finger_angle = finger_num / num_fingers;
+        for (var ring_num = 0; ring_num < params.num_rings; ring_num++) {
+          var ring_radius = params.first_ring_radius + ring_num * params.ring_spacing;
+          for (var finger_num = 0; finger_num < params.num_fingers; finger_num++) {
+            var finger_angle = finger_num / params.num_fingers;
             var path = [];
-            for (var finger_point = 0; finger_point <= finger_points; finger_point++) {
-              var angle = (finger_angle + finger_twirl * finger_point / finger_points) * 2 * Math.PI;
+            for (var finger_point = 0; finger_point <= params.finger_points; finger_point++) {
+              var angle = (finger_angle + params.finger_twirl * finger_point / params.finger_points) * 2 * Math.PI;
               var x = ring_radius * Math.cos(angle);
               var y = ring_radius * Math.sin(angle);
-              path.push([x, y, finger_height * finger_point / finger_points]);
+              path.push([x, y, params.finger_height * finger_point / params.finger_points]);
             }
             var finger = nt3d.extrude(path, finger_crosssection, [0, 0, 1], nt3d.pathnormals_from_point(path, [0, 0, 0]));
             fingers = fingers.concat(finger);
 
         return fingers;
       }
-      var params = [["First ring radius", 20],
-                    ["Number of rings", 10],
-                    ["Space between rings", 10],
-                    ["Number of fingers", 5],
-                    ["Finger radius", 3],
-                    ["Finger faces", 5],
-                    ["Finger points", 20],
-                    ["Finger twirl (in turns)", .1],
-                    ["Finger height", 100]];
+      var params = [["first_ring_radius", 20],
+                    ["num_rings", 10],
+                    ["ring_spacing", 10, "Space Between Rings"],
+                    ["num_fingers", 5],
+                    ["finger_radius", 3],
+                    ["finger_faces", 5],
+                    ["finger_points", 20],
+                    ["finger_twirl", .1, "Finger Twirl (in turns)"],
+                    ["finger_height", 100]];
     </script>
   </head>
   <body onload="nt3d.framework(medusa, params)">
diff --git a/nt3d.js b/nt3d.js
index d4e62f6d20f5a89c04939cf9465ef6637708cb8a..80390b99b6db1482a0550555246a8335bf3d133e 100644 (file)
--- a/nt3d.js
+++ b/nt3d.js
@@ -421,14 +421,14 @@ nt3d = {
                setTimeout(function() {
 
                // Get params from form
-               var params = [];
+               var params = {};
                for (var i = 0; i < this.user_params.length; i++) {
                        var as_string = this.form.elements["param"+i].value;
                        var as_num = +as_string;
-                       params[i] = isNaN(as_num) ? as_string : as_num;
+                       params[this.user_params[i][0]] = isNaN(as_num) ? as_string : as_num;
                }
 
-               this.points = this.user_function.apply(null, params);
+               this.points = this.user_function.call(null, params);
 
                this.validate(this.points);
 
@@ -476,7 +476,18 @@ nt3d = {
                        tr = document.createElement("tr");
                        table.appendChild(tr);
                        var td = document.createElement("td");
-                       td.appendChild(document.createTextNode(params[i][0]));
+                       var description;
+                       if (params[i].length > 2) {
+                               description = params[i][2];
+                       } else {
+                               description = params[i][0];
+                               description = description[0].toUpperCase() + description.substr(1);
+                               description = description.replace(/_(.)/g, function(_, c) {
+                                       return " " + c.toUpperCase();
+                               });
+                               description = description.replace("Num ", "Number of ");
+                       }
+                       td.appendChild(document.createTextNode(description));
                        tr.appendChild(td);
                        td = document.createElement("td");
                        var input = document.createElement("input");
index dd212e51c0d901032a3aa23e0e1c31e99e331809..8264bd160372a906707b85ad9fbee29caff92140 100644 (file)
--- a/rmm.html
+++ b/rmm.html
@@ -9,43 +9,41 @@
         // https://plus.google.com/101508799331795210529/posts/Yg7LmV8BpTw
         return 3.7*x + (Math.log(1-.95*x)-Math.log(.95*x+1));
       }
-      function rmm(base_separation, base_offset,
-                   width, short_arc_height, tall_arc_height,
-                   tube_width, steps_along, steps_around) {
+      function rmm(params) {
         var tau = Math.PI*2;
         var path = [];
         // Short arc
-        for (var i = 0; i < steps_along; i++) {
-          var progress = i/steps_along;
-          var x_separation =  Math.cos(progress*tau/2)*base_separation;
-          var y_offset     = -Math.sin(progress*tau/4)*base_offset;
-          var y_arc        =  Math.sin(progress*tau)*width;
-          var z_arc        = -Math.cos(progress*tau)*short_arc_height + short_arc_height;
+        for (var i = 0; i < params.steps_along; i++) {
+          var progress = i/params.steps_along;
+          var x_separation =  Math.cos(progress*tau/2)*params.base_separation;
+          var y_offset     = -Math.sin(progress*tau/4)*params.base_offset;
+          var y_arc        =  Math.sin(progress*tau)*params.width;
+          var z_arc        = -Math.cos(progress*tau)*params.short_arc_height + params.short_arc_height;
           path.push([x_separation, y_offset + y_arc, z_arc]);
         }
         // Tall arc
-        for (var i = 0; i < steps_along; i++) {
-          var progress = i/steps_along;
-          var x_arc        = -Math.cos(progress*tau*1.5)*base_separation;
-          var y_offset     = -Math.cos(progress*tau/4)*base_offset;
-          var y_twist      = -pointy_sin(progress*2 - 1)*width/2;
-          var z_arc        = -Math.cos(progress*tau)*tall_arc_height + tall_arc_height;
+        for (var i = 0; i < params.steps_along; i++) {
+          var progress = i/params.steps_along;
+          var x_arc        = -Math.cos(progress*tau*1.5)*params.base_separation;
+          var y_offset     = -Math.cos(progress*tau/4)*params.base_offset;
+          var y_twist      = -pointy_sin(progress*2 - 1)*params.width/2;
+          var z_arc        = -Math.cos(progress*tau)*params.tall_arc_height + params.tall_arc_height;
           path.push([x_arc, y_offset + y_twist, z_arc]);
         }
         return nt3d.closed_extrude(
           path,
-          nt3d.circle(tube_width, steps_around),
+          nt3d.circle(params.tube_width, params.steps_around),
           nt3d.shapenormals_from_closed_path(path),
           nt3d.pathnormals_from_point(path, [0,0,0]));
       }
-      var params = [["Base separation", 30],
-                    ["Base offset", 10],
-                    ["Width", 40],
-                    ["Short arc height", 60],
-                    ["Tall arc height", 80],
-                    ["Tube width", 10],
-                    ["Steps along each arc", 70],
-                    ["Steps around", 12]];
+      var params = [["base_separation", 30],
+                    ["base_offset", 10],
+                    ["width", 40],
+                    ["short_arc_height", 60],
+                    ["tall_arc_height", 80],
+                    ["tube_width", 10],
+                    ["steps_along", 70, "Steps Along Each Arc"],
+                    ["steps_around", 12]];
     </script>
   </head>
   <body onload="nt3d.framework(rmm, params)">
index 99de7ed54b2e19b5f9de81d4a165f73496914a2e..f688d5d2688cdf1e04ef5ddfbfd977e8e7d888d0 100644 (file)
@@ -3,42 +3,42 @@
     <title>Serrated</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function serrated(length, thickness, depth, serration_count, arc, steps_per_serration, edge_bevel_angle) {
+      function serrated(params) {
         var tau = 2 * Math.PI;
-        var path_length = serration_count * steps_per_serration;
+        var path_length = params.num_serrations * params.steps_per_serration;
         var path = [];
         for (var i = 0; i <= path_length; i++) {
-          path[i] = [length*i/path_length,0,0];
+          path[i] = [params.length*i/path_length,0,0];
         }
-        var serration_length = length / serration_count;
+        var serration_length = params.length / params.num_serrations;
         var serration_half_length = serration_length / 2;
-        var serration_radius = serration_half_length / Math.sin(tau * arc / 2);
+        var serration_radius = serration_half_length / Math.sin(tau * params.arc / 2);
         var serration_max_height = Math.sqrt(serration_radius*serration_radius - serration_half_length*serration_half_length);
         // This emits a Sabre Grind.  TODO: Support a double bevel.
         // http://en.wikipedia.org/wiki/Grind#Typical_grinds
         // http://www.allaboutpocketknives.com/images/aapk_content/blade_bevel.JPG
-        var edge_height = thickness / (2 * Math.tan(tau * edge_bevel_angle));
+        var edge_height = params.thickness / (2 * Math.tan(tau * params.edge_bevel_angle));
         function shape(i) {
-          var serration_progress = (i % steps_per_serration) / steps_per_serration;
+          var serration_progress = (i % params.steps_per_serration) / params.steps_per_serration;
           var serration_x = serration_progress * serration_length - serration_half_length;
           var serration_height = serration_max_height - Math.sqrt(serration_radius*serration_radius - serration_x*serration_x);
-          if (arc < 0) serration_height *= -1;
-          var blade_height = depth + serration_height;
-          return [[0,                          0,           0],
-                  [blade_height - edge_height, 0,           0],
-                  [blade_height,               thickness/2, 0],
-                  [blade_height - edge_height, thickness,   0],
-                  [0,                          thickness,   0]];
+          if (params.arc < 0) serration_height *= -1;
+          var blade_height = params.depth + serration_height;
+          return [[0,                          0,                  0],
+                  [blade_height - edge_height, 0,                  0],
+                  [blade_height,               params.thickness/2, 0],
+                  [blade_height - edge_height, params.thickness,   0],
+                  [0,                          params.thickness,   0]];
         }
        return nt3d.extrude(path, shape, [1,0,0], [0,0,1]);
       }
-      var params = [["Blade length", 100],
-                    ["Blade thickness", 2],
-                    ["Blade depth", 10],
-                    ["Number of serrations", 10],
-                    ["Arc of each serration (in turns)", .2],
-                    ["Steps per serration", 11],
-                    ["Edge bevel angle (in turns)", .05]];
+      var params = [["length", 100, ],
+                    ["thickness", 2],
+                    ["depth", 10],
+                    ["num_serrations", 10],
+                    ["arc", .2, "Arc of Each Serration (in turns)"],
+                    ["steps_per_serration", 11],
+                    ["edge_bevel_angle", .05, "Edge Bevel Angle (in turns)"]];
     </script>
   </head>
   <body onload="nt3d.framework(serrated, params)">
index 0e5095a2ca2eddaf46ffb39183f2b2c6ef1a578d..4eaa13209db84a77674e189e5da613693aeb95bb 100644 (file)
@@ -3,12 +3,12 @@
     <title>Sphere primitive</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function sphere_primitive(radius, lattitude_steps, longitude_steps) {
-       return nt3d.sphere([0,0,0], radius, lattitude_steps, longitude_steps);
+      function sphere_primitive(params.) {
+       return nt3d.sphere([0,0,0], params.radius, params.lattitude_steps, params.longitude_steps);
       }
-      var params = [["Radius", 1],
-                    ["Lattitude steps", 20],
-                    ["Longitude steps", 20]];
+      var params = [["radius", 1],
+                    ["lattitude_steps", 20],
+                    ["longitude_steps", 20]];
     </script>
   </head>
   <body onload="nt3d.framework(sphere_primitive, params)">
index 10ae92e50c7bdaaa3f1c3ab0ecd9d570c8c394d3..ef323a95a5d38ecd239a1f61d8becf2480da494c 100644 (file)
@@ -3,20 +3,20 @@
     <title>Torus by extrude</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function torus_by_extrude(torus_radius, cross_section_radius, rotation, long_steps, short_steps) {
-       var path = nt3d.circle(torus_radius, long_steps);
-       path = nt3d.rotate_about_origin(path, [0,1,0], rotation * 2*Math.PI);
+      function torus_by_extrude(params) {
+       var path = nt3d.circle(params.torus_radius, params.long_steps);
+       path = nt3d.rotate_about_origin(path, [0,1,0], params.rotation * 2*Math.PI);
        return nt3d.closed_extrude(
          path,
-         nt3d.circle(cross_section_radius, short_steps),
+         nt3d.circle(params.cross_section_radius, params.short_steps),
          nt3d.shapenormals_from_closed_path(path),
          [0, 0, 1]);
       }
-      var params = [["Torus radus", 100],
-                    ["Cross section radius", 40],
-                    ["Rotation (turns)", 0.001],
-                    ["Steps around the long way", 50],
-                    ["Steps around the short way", 16]];
+      var params = [["torus_radius", 100],
+                    ["cross_section_radius", 40],
+                    ["rotation", 0.001, "Rotation (in turns)"],
+                    ["long_steps", 50, "Steps around the long way"],
+                    ["short_steps", 16, "Steps around the short way"]];
     </script>
   </head>
   <body onload="nt3d.framework(torus_by_extrude, params)">
index 13729396abb7e6c496b995afcc21126bedc7d71b..4d51914ce20aabf988a1e8e34a31e7c3a934e414 100644 (file)
@@ -3,28 +3,28 @@
     <title>Wrap Sphere</title>
     <script type="text/javascript" src="nt3d.js"></script>
     <script type="text/javascript">
-      function wrap_sphere(sphere_radius, extrusion_radius, turns, circle_angle, aspect_ratio, distortion_angle, steps_around, steps_along) {
+      function wrap_sphere(params) {
         // Spiral path along sphere surface
         var path = [];
-        for (var i = 0; i < steps_along; i++) {
-          var progress_0to2 = i / (steps_along/2);
+        for (var i = 0; i < params.steps_along; i++) {
+          var progress_0to2 = i / (params.steps_along/2);
           var progress_0to1andback = progress_0to2 < 1 ? progress_0to2 : 2 - progress_0to2;
           var progress_neg1to1andback = progress_0to1andback * 2 - 1;
-          var z = progress_neg1to1andback * sphere_radius;
-          var r = Math.sqrt(sphere_radius*sphere_radius - z*z);
+          var z = progress_neg1to1andback * params.sphere_radius;
+          var r = Math.sqrt(params.sphere_radius*params.sphere_radius - z*z);
           var phase_adjust = progress_0to2 < 1 ? 0 : Math.PI;
-          var x = r*Math.cos(progress_0to1andback*turns*2*Math.PI + phase_adjust);
-          var y = r*Math.sin(progress_0to1andback*turns*2*Math.PI + phase_adjust);
+          var x = r*Math.cos(progress_0to1andback*params.turns*2*Math.PI + phase_adjust);
+          var y = r*Math.sin(progress_0to1andback*params.turns*2*Math.PI + phase_adjust);
           path.push([x,y,z]);
         }
 
         // Shape to be extruded
-        var shape = nt3d.circle(extrusion_radius, steps_around);
-        shape = nt3d.rotate_about_origin(shape, [0,0,1], circle_angle*Math.PI*2);
+        var shape = nt3d.circle(params.extrusion_radius, params.steps_around);
+        shape = nt3d.rotate_about_origin(shape, [0,0,1], params.circle_angle*Math.PI*2);
         for (var i = 0; i < shape.length; i++) {
-          shape[i][0] *= aspect_ratio;
+          shape[i][0] *= params.aspect_ratio;
         }
-        shape = nt3d.rotate_about_origin(shape, [0,0,1], distortion_angle*Math.PI*2);
+        shape = nt3d.rotate_about_origin(shape, [0,0,1], params.distortion_angle*Math.PI*2);
 
         return nt3d.closed_extrude(
           path,
           nt3d.shapenormals_from_closed_path(path),
           nt3d.pathnormals_from_point(path, [0, 0, 0]));
       }
-      var params = [["Sphere radius", 100],
-                    ["Extrusion radius", 5],
-                    ["Turns", 3],
-                    ["Angle of circle (in turns) (useful when steps_around is small)", .125],
-                    ["Aspect ratio", 2],
-                    ["Angle of distortion (in turns)", .25],
-                    ["Steps around", 4],
-                    ["Steps along", 500]];
+      var params = [["sphere_radius", 100],
+                    ["extrusion_radius", 5],
+                    ["turns", 3],
+                    ["circle_angle", .125, "Angle of circle (in turns) (useful when steps_around is small)"],
+                    ["aspect_ratio", 2],
+                    ["distortion_angle", .25, "Distortion Angle (in turns)"],
+                    ["steps_around", 4],
+                    ["steps_along", 500]];
     </script>
   </head>
   <body onload="nt3d.framework(wrap_sphere, params)">