Tweaked Tube/Curve/Knot example

examples/js/CurveExtras.js

@@ -1,12 +1,32 @@
 /*
- * A bunch of curves
+ * A bunch of parametric curves
  * @author zz85
+ *
+ * Formulas collected from various sources
+ *	http://mathworld.wolfram.com/HeartCurve.html
+ *	http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
+ *	http://en.wikipedia.org/wiki/Viviani%27s_curve
+ *	http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
+ *	http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
+ *	http://prideout.net/blog/?p=44
  */
 
 // Lets define some curves
 THREE.Curves = {};
 
-// Formula from http://mathworld.wolfram.com/HeartCurve.html
+
+ THREE.Curves.GrannyKnot = THREE.Curve.create( function(){},
+                              
+	 function(t) {
+	    t = 2 * Math.PI * t;
+
+	    var x = -0.22 * cos(t) - 1.28 * sin(t) - 0.44 * cos(3 * t) - 0.78 * sin(3 * t);
+	    var y = -0.1 * cos(2 * t) - 0.27 * sin(2 * t) + 0.38 * cos(4 * t) + 0.46 * sin(4 * t);
+	    var z = 0.7 * cos(3 * t) - 0.4 * sin(3 * t);
+	    return new THREE.Vector3(x, y, z).multiplyScalar(20);
+	}
+);
+
 THREE.Curves.HeartCurve = THREE.Curve.create(
 
 function(s) {
@@ -31,161 +51,158 @@ function(t) {
 
 
 // Viviani's Curve
-// http://en.wikipedia.org/wiki/Viviani%27s_curve
 THREE.Curves.VivianiCurve = THREE.Curve.create(
 
-function(radius) {
+	function(radius) {
 
-	this.radius = radius;
-},
+		this.radius = radius;
+	},
 
-function(t) {
+	function(t) {
 
-	t = t * 4 * Math.PI; // Normalized to 0..1
-	var a = this.radius / 2;
-	var tx = a * (1 + Math.cos(t)),
-		ty = a * Math.sin(t),
-		tz = 2 * a * Math.sin(t / 2);
+		t = t * 4 * Math.PI; // Normalized to 0..1
+		var a = this.radius / 2;
+		var tx = a * (1 + Math.cos(t)),
+			ty = a * Math.sin(t),
+			tz = 2 * a * Math.sin(t / 2);
 
-	return new THREE.Vector3(tx, ty, tz);
+		return new THREE.Vector3(tx, ty, tz);
 
-}
+	}
 
 );
 
 
 THREE.Curves.KnotCurve = THREE.Curve.create(
 
-function() {
+	function() {
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	t *= 2 * Math.PI;
+		t *= 2 * Math.PI;
 
-	var R = 10;
-	var s = 50;
-	var tx = s * Math.sin(t),
-		ty = Math.cos(t) * (R + s * Math.cos(t)),
-		tz = Math.sin(t) * (R + s * Math.cos(t));
+		var R = 10;
+		var s = 50;
+		var tx = s * Math.sin(t),
+			ty = Math.cos(t) * (R + s * Math.cos(t)),
+			tz = Math.sin(t) * (R + s * Math.cos(t));
 
-	return new THREE.Vector3(tx, ty, tz);
+		return new THREE.Vector3(tx, ty, tz);
 
-}
+	}
 
 );
 
 THREE.Curves.HelixCurve = THREE.Curve.create(
 
-function() {
+	function() {
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	var a = 30; // radius
-	var b = 150; //height
-	var t2 = 2 * Math.PI * t * b / 30;
-	var tx = Math.cos(t2) * a,
-		ty = Math.sin(t2) * a,
-		tz = b * t;
+		var a = 30; // radius
+		var b = 150; //height
+		var t2 = 2 * Math.PI * t * b / 30;
+		var tx = Math.cos(t2) * a,
+			ty = Math.sin(t2) * a,
+			tz = b * t;
 
-	return new THREE.Vector3(tx, ty, tz);
+		return new THREE.Vector3(tx, ty, tz);
 
-}
+	}
 
 );
 
-// Replacement for TorusKnotGeometry?
 THREE.Curves.TrefoilKnot = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 10 : s;
+		this.scale = (s === undefined) ? 10 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	t *= Math.PI * 2;
-	var tx = (2 + Math.cos(3 * t)) * Math.cos(2 * t),
-		ty = (2 + Math.cos(3 * t)) * Math.sin(2 * t),
-		tz = Math.sin(3 * t);
+		t *= Math.PI * 2;
+		var tx = (2 + Math.cos(3 * t)) * Math.cos(2 * t),
+			ty = (2 + Math.cos(3 * t)) * Math.sin(2 * t),
+			tz = Math.sin(3 * t);
 
-	return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
+		return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
-// Formulas from http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
 THREE.Curves.TorusKnot = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 10 : s;
+		this.scale = (s === undefined) ? 10 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	var p = 3,
-		q = 4;
-	t *= Math.PI * 2;
-	var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
-		ty = (2 + Math.cos(q * t)) * Math.sin(p * t),
-		tz = Math.sin(q * t);
+		var p = 3,
+			q = 4;
+		t *= Math.PI * 2;
+		var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
+			ty = (2 + Math.cos(q * t)) * Math.sin(p * t),
+			tz = Math.sin(q * t);
 
-	return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
+		return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
 
 THREE.Curves.CinquefoilKnot = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 10 : s;
+		this.scale = (s === undefined) ? 10 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	var p = 2,
-		q = 5;
-	t *= Math.PI * 2;
-	var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
-		ty = (2 + Math.cos(q * t)) * Math.sin(p * t),
-		tz = Math.sin(q * t);
+		var p = 2,
+			q = 5;
+		t *= Math.PI * 2;
+		var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
+			ty = (2 + Math.cos(q * t)) * Math.sin(p * t),
+			tz = Math.sin(q * t);
 
-	return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
+		return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
 
 THREE.Curves.TrefoilPolynomialKnot = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 10 : s;
+		this.scale = (s === undefined) ? 10 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	t = t * 4 - 2;
-	var tx = Math.pow(t, 3) - 3 * t,
-		ty = Math.pow(t, 4) - 4 * t * t,
-		tz = 1 / 5 * Math.pow(t, 5) - 2 * t;
+		t = t * 4 - 2;
+		var tx = Math.pow(t, 3) - 3 * t,
+			ty = Math.pow(t, 4) - 4 * t * t,
+			tz = 1 / 5 * Math.pow(t, 5) - 2 * t;
 
-	return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
+		return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
@@ -207,110 +224,107 @@ var scaleTo = function(x, y, t) {
 
 THREE.Curves.FigureEightPolynomialKnot = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 1 : s;
+		this.scale = (s === undefined) ? 1 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	t = scaleTo(-4, 4, t);
-	var tx = 2 / 5 * t * (t * t - 7) * (t * t - 10),
-		ty = pow(t, 4) - 13 * t * t,
-		tz = 1 / 10 * t * (t * t - 4) * (t * t - 9) * (t * t - 12);
+		t = scaleTo(-4, 4, t);
+		var tx = 2 / 5 * t * (t * t - 7) * (t * t - 10),
+			ty = pow(t, 4) - 13 * t * t,
+			tz = 1 / 10 * t * (t * t - 4) * (t * t - 9) * (t * t - 12);
 
-	return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
+		return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
-// When there's time, try more formulas at http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
-
-//http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
 THREE.Curves.DecoratedTorusKnot4a = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 40 : s;
+		this.scale = (s === undefined) ? 40 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	t *= Math.PI * 2;
-	var
-	x = cos(2 * t) * (1 + 0.6 * (cos(5 * t) + 0.75 * cos(10 * t))),
-		y = sin(2 * t) * (1 + 0.6 * (cos(5 * t) + 0.75 * cos(10 * t))),
-		z = 0.35 * sin(5 * t);
+		t *= Math.PI * 2;
+		var
+		x = cos(2 * t) * (1 + 0.6 * (cos(5 * t) + 0.75 * cos(10 * t))),
+			y = sin(2 * t) * (1 + 0.6 * (cos(5 * t) + 0.75 * cos(10 * t))),
+			z = 0.35 * sin(5 * t);
 
-	return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
+		return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
 
 THREE.Curves.DecoratedTorusKnot4b = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 40 : s;
+		this.scale = (s === undefined) ? 40 : s;
 
-},
+	},
 
-function(t) {
-	var fi = t * Math.PI * 2;
-	var x = cos(2 * fi) * (1 + 0.45 * cos(3 * fi) + 0.4 * cos(9 * fi)),
-		y = sin(2 * fi) * (1 + 0.45 * cos(3 * fi) + 0.4 * cos(9 * fi)),
-		z = 0.2 * sin(9 * fi);
+	function(t) {
+		var fi = t * Math.PI * 2;
+		var x = cos(2 * fi) * (1 + 0.45 * cos(3 * fi) + 0.4 * cos(9 * fi)),
+			y = sin(2 * fi) * (1 + 0.45 * cos(3 * fi) + 0.4 * cos(9 * fi)),
+			z = 0.2 * sin(9 * fi);
 
-	return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
+		return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
 
 THREE.Curves.DecoratedTorusKnot5a = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 40 : s;
+		this.scale = (s === undefined) ? 40 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	var fi = t * Math.PI * 2;
-	var x = cos(3 * fi) * (1 + 0.3 * cos(5 * fi) + 0.5 * cos(10 * fi)),
-		y = sin(3 * fi) * (1 + 0.3 * cos(5 * fi) + 0.5 * cos(10 * fi)),
-		z = 0.2 * sin(20 * fi);
+		var fi = t * Math.PI * 2;
+		var x = cos(3 * fi) * (1 + 0.3 * cos(5 * fi) + 0.5 * cos(10 * fi)),
+			y = sin(3 * fi) * (1 + 0.3 * cos(5 * fi) + 0.5 * cos(10 * fi)),
+			z = 0.2 * sin(20 * fi);
 
-	return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
+		return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
-}
+	}
 
 );
 
 THREE.Curves.DecoratedTorusKnot5c = THREE.Curve.create(
 
-function(s) {
+	function(s) {
 
-	this.scale = (s === undefined) ? 40 : s;
+		this.scale = (s === undefined) ? 40 : s;
 
-},
+	},
 
-function(t) {
+	function(t) {
 
-	var fi = t * Math.PI * 2;
-	var x = cos(4 * fi) * (1 + 0.5 * (cos(5 * fi) + 0.4 * cos(20 * fi))),
-		y = sin(4 * fi) * (1 + 0.5 * (cos(5 * fi) + 0.4 * cos(20 * fi))),
-		z = 0.35 * sin(15 * fi);
+		var fi = t * Math.PI * 2;
+		var x = cos(4 * fi) * (1 + 0.5 * (cos(5 * fi) + 0.4 * cos(20 * fi))),
+			y = sin(4 * fi) * (1 + 0.5 * (cos(5 * fi) + 0.4 * cos(20 * fi))),
+			z = 0.35 * sin(15 * fi);
 
-	return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
+		return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
 
-}
+	}
 
 );

examples/webgl_geometry_extrude_splines.html

@@ -60,6 +60,7 @@
 
     // Keep a diction of Curve instances
     var splines = {
+      GrannyKnot: new THREE.Curves.GrannyKnot(),
       HeartCurve: new THREE.Curves.HeartCurve(3.5),
       VivianiCurve: new THREE.Curves.VivianiCurve(70),
       KnotCurve: new THREE.Curves.KnotCurve(),
@@ -98,7 +99,7 @@
     var tube, tubeMesh;
     var animation = false, lookAhead = false;
     var scale;
-    var showCameraHelper = true;
+    var showCameraHelper = false;
 
     function addTube() {
 
@@ -136,12 +137,12 @@
         tubeMesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [
           new THREE.MeshLambertMaterial({
               color: color,
-              opacity: 0.2,
+              opacity: (geometry.debug) ? 0.2 : 0.8,
               transparent: true
           }),
          new THREE.MeshBasicMaterial({
             color: 0x000000,
-            opacity: 0.3,
+            opacity: 0.5,
             wireframe: true
         })]);
 
@@ -188,9 +189,9 @@
       info.innerHTML += '<br/>Scale: <select id="scale" onchange="setScale()"><option>1</option><option>2</option><option selected>4</option><option>6</option><option>10</option></select>';
       info.innerHTML += '<br/>Extrusion Segments: <select onchange="addTube()" id="segments"><option>50</option><option selected>100</option><option>200</option><option>400</option></select>';
       info.innerHTML += '<br/>Radius Segments: <select id="radiusSegments" onchange="addTube()"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option><option>6</option><option>8</option><option>12</option></select>';
-      info.innerHTML += '<br/>Debug normals: <input id="debug" type="checkbox" onchange="addTube()" checked /> Closed:<input id="closed" onchange="addTube()" type="checkbox" checked />';
+      info.innerHTML += '<br/>Debug normals: <input id="debug" type="checkbox" onchange="addTube()"  /> Closed:<input id="closed" onchange="addTube()" type="checkbox" checked />';
 
-      info.innerHTML += '<br/><br/><input id="animation" type="button" onclick="animateCamera(true)" value="Camera Spline Animation View: OFF"/><br/> Look Ahead <input id="lookAhead" type="checkbox" onchange="animateCamera()" /> Camera Helper <input id="cameraHelper" type="checkbox" onchange="animateCamera()" checked />';
+      info.innerHTML += '<br/><br/><input id="animation" type="button" onclick="animateCamera(true)" value="Camera Spline Animation View: OFF"/><br/> Look Ahead <input id="lookAhead" type="checkbox" onchange="animateCamera()" /> Camera Helper <input id="cameraHelper" type="checkbox" onchange="animateCamera()" />';
 
       container.appendChild(info);
 
@@ -359,9 +360,11 @@
 
 
       // Camera Orientation 1 - default look at
-      var lookAt = tube.path.getPointAt((t + 0.101) % 1).multiplyScalar(scale);
       // splineCamera.lookAt(lookAt);
 
+      // Using arclength for stablization in look ahead.
+      var lookAt = tube.path.getPointAt((t + 30/tube.path.getLength()) % 1).multiplyScalar(scale);
+      
       // Camera Orientation 2 - up orientation via normal
       if (!lookAhead)
       lookAt.copy(pos).addSelf(dir);