Refactored extractAllPointsWithBend() to addWrapPath() with getAllProcessedPoints()

examples/webgl_geometry_text.html

@@ -45,7 +45,7 @@
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		
-		<!-- load the font file from canvas-text -->
+		<!-- load the font files -->
 
 		<script type="text/javascript" src="fonts/gentilis_bold.typeface.js"></script>
 		<script type="text/javascript" src="fonts/gentilis_regular.typeface.js"></script>
@@ -57,7 +57,8 @@
 		<script type="text/javascript" src="fonts/droid/droid_sans_bold.typeface.js"></script>
 		<script type="text/javascript" src="fonts/droid/droid_serif_regular.typeface.js"></script>
 		<script type="text/javascript" src="fonts/droid/droid_serif_bold.typeface.js"></script>
-
+		
+		<!-- todo async loader for fonts -->
 
 		<script type="text/javascript">
 

src/extras/geometries/Curve.js

@@ -200,35 +200,42 @@ THREE.Curve.prototype.getUtoTmapping = function ( u, distance ) {
 	
 };
 
-// In case any sub curves does not implements its normal finding, 
+// In case any sub curves does not implements its tangent / normal finding, 
 // we get 2 points with a small delta, and find a gradient of the 2 pts
-// makes an ok approximation
+// which seems to make a reasonable approximation
 
 THREE.Curve.prototype.getNormalVector = function( t ) {
 
-	var pt1 = this.getPoint(t-0.001);
-	var pt2 = this.getPoint(t+0.001);
+	var vec = this.getTangent(t);
 	
-	
-	__vec1.sub(pt2, pt1);
-	return new THREE.Vector2( -__vec1.y , __vec1.x ).unit();
+	return new THREE.Vector2( -vec.y , vec.x );
 
 };
 
-THREE.Curve.prototype.getTangentUnit = function( t ) {
+// Returns a unit vector tangent at t
+THREE.Curve.prototype.getTangent = function( t ) {
 
-	var pt1 = this.getPoint(t-0.001);
-	var pt2 = this.getPoint(t+0.001);
-	
+	var delta = 0.0001;
+	var pt1 = this.getPoint(t-delta);
+	var pt2 = this.getPoint(t+delta);
 	
-	__vec1.sub(pt2, pt1);
-	return new THREE.Vector2( __vec1.x , __vec1.y ).unit();
+	var vec = new THREE.Vector2();
+	vec.sub(pt2, pt1);
+	return vec.unit();
 
 };
 
 
 var __vec1 = new THREE.Vector2(); // tmp Vector
 
+
+/**************************************************************
+ *	Curved Path - a curve path is simply a array of connected
+ *  curves, but retains the api of a curve
+ **************************************************************/
+
+
+
 /**************************************************************
  *	Line
  **************************************************************/
@@ -273,18 +280,11 @@ THREE.LineCurve.prototype.getPoint = function ( t ) {
 
 };
 
-THREE.LineCurve.prototype.getNormalVector = function( t ) {
+THREE.LineCurve.prototype.getTangent = function( t ) {
 	
-	//__vec1 = new THREE.Vector2();
 	__vec1.sub(this.v2, this.v1);
-	return new THREE.Vector2( -__vec1.y , __vec1.x ).unit();
-	
+	return new THREE.Vector2( __vec1.x , __vec1.y ).unit();
 	
-	tx = this.x2 - this.x1;
-	ty = this.y2 - this.y1;
-
-	// return normal unit vector
-	return new THREE.Vector2( -ty , tx ).unit();
 }
 
 /**************************************************************
@@ -325,20 +325,17 @@ THREE.QuadraticBezierCurve.prototype.getPoint = function ( t ) {
 	tx = THREE.Shape.Utils.b2( t, this.v0.x, this.v1.x, this.v2.x );
 	ty = THREE.Shape.Utils.b2( t, this.v0.y, this.v1.y, this.v2.y );
 
-	// tx = THREE.Shape.Utils.b2( t, this.x0, this.x1, this.x2 );
-	// 	ty = THREE.Shape.Utils.b2( t, this.y0, this.y1, this.y2 );
-
 	return new THREE.Vector2( tx, ty );
 
 };
 
 
-THREE.QuadraticBezierCurve.prototype.getNormalVector2 = function( t ) {
+THREE.QuadraticBezierCurve.prototype.getTangent = function( t ) {
 
 	// iterate sub segments
 	// 	get lengths for sub segments
 	// 	if segment is bezier
-	//		perform subdivisions or perform integrals
+	//		perform subdivisions
 
 	// var x0, y0, x1, y1, x2, y2;
 
@@ -356,8 +353,8 @@ THREE.QuadraticBezierCurve.prototype.getNormalVector2 = function( t ) {
 	tx = THREE.Curve.Utils.tangentQuadraticBezier( t, this.v0.x, this.v1.x, this.v2.x );
 	ty = THREE.Curve.Utils.tangentQuadraticBezier( t, this.v0.y, this.v1.y, this.v2.y );
 
-	// return normal unit vector
-	return new THREE.Vector2( -ty , tx ).unit();
+	// returns unit vector
+	return new THREE.Vector2( tx , ty ).unit();
 
 };
 
@@ -405,7 +402,7 @@ THREE.CubicBezierCurve.prototype.getPoint = function ( t ) {
 
 };
 
-THREE.CubicBezierCurve.prototype.getNormalVector = function( t ) {
+THREE.CubicBezierCurve.prototype.getTangent = function( t ) {
 
 	var tx, ty;
 
@@ -413,7 +410,7 @@ THREE.CubicBezierCurve.prototype.getNormalVector = function( t ) {
 	ty = THREE.Curve.Utils.tangentCubicBezier( t, this.v0.y, this.v1.y, this.v2.y, this.v3.y );
 
 	// return normal unit vector
-	return new THREE.Vector2( -ty , tx ).unit();
+	return new THREE.Vector2( tx , ty ).unit();
 
 };
 
@@ -507,13 +504,8 @@ THREE.Curve.Utils = {
 
 	},
 	
-	//derivative
+	// Puay Bing, thanks for helping with this derivative!
 	tangentCubicBezier: function (t, p0, p1, p2, p3 ) {
-		// return -3 * (1 - 2*t + t*t) * p0 - 
-		// 		            3 * t * (4 - 3*t) * p1 + 
-		// 		            3 * t * (2 - 3*t) * p2 + 
-		// 		            3 * t * t * p3;
-		
 		return -3 * p0 * (1 - t) * (1 - t)  +
 			3 * p1 * (1 - t) * (1-t) - 6 *t *p1 * (1-t) +
 			6 * t *  p2 * (1-t) - 3 * t * t * p2 + 
@@ -529,6 +521,8 @@ THREE.Curve.Utils = {
 		var h10 = 3 * t * t - 4 * t + 1; // t^3 − 2t^2 + t
 		var h01 = -6 * t * t + 6 * t; 	// − 2t3 + 3t2
 		var h11 = 3 * t * t - 2 * t;	// t3 − t2
+		
+		return h00 + h10 + h01 + h11;
 
 	},
 
@@ -554,8 +548,8 @@ getLengths DONE
 
 curve.getPoints(); DONE
 curve.getPointAtArcLength(t); DONE
-curve.transform(params);
-curve.getTangentAt(t)
+curve.transform(params); 
+curve.getTangentAt(t); DONE
 */
 
 /**************************************************************

src/extras/geometries/ExtrudeGeometry.js

@@ -99,12 +99,18 @@ THREE.ExtrudeGeometry.prototype.addShape = function( shape, options ) {
 
 	var shapesOffset = this.vertices.length;
 
-	var shapePoints = shape.extractAllPoints( curveSegments ); // use shape.extractAllSpacedPoints( curveSegments ) for points with equal divisions
-	
+
 	if (bendPath) {
-		shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath ); 
+		shape.addWrapPath(bendPath);
+		//shapePoints = shape.extractAllPointsWithBend( curveSegments, bendPath ); 
+		
 	}
-
+	
+	var shapePoints = shape.extractAllPoints( curveSegments ); // use shape.extractAllSpacedPoints( curveSegments ) for points with equal divisions
+	
+	
+	
+	
 	
     var vertices = shapePoints.shape;
 	var holes = shapePoints.holes;

src/extras/geometries/Path.js

@@ -8,6 +8,7 @@ THREE.Path = function ( points ) {
 
 	this.actions = [];
 	this.curves = [];
+	this.bends = [];
 
 	if ( points ) {
 
@@ -512,19 +513,50 @@ THREE.Path.prototype.createGeometry = function( points ) {
 
 
 // ALL THINGS BELOW TO BE REFACTORED
-// QN: Transform final pts or transform ACTIONS or add transform filters?
 
-// Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
-// This returns getPoints() bend/wrapped around the contour of a path.
+// Wrap path / Bend modifiers?
+THREE.Path.prototype.addWrapPath = function ( bendpath ) {
+	this.bends.push(bendpath);
+};
 
-THREE.Path.prototype.transform = function( path, segments ) {
+THREE.Path.prototype.getTransformedPoints = function( segments, bends ) {
 
-	var bounds = this.getBoundingBox();
 	var oldPts = this.getPoints( segments ); // getPoints getSpacedPoints
+	var i, il;
 	
-	//console.log( path.cacheArcLengths() );
-	path.getLengths(400);
-	//segments = 40;
+	if (!bends) {
+		bends = this.bends;
+	}
+	
+	for (i=0, il=bends.length; i<il;i++) {
+		oldPts = this.getWrapPoints( oldPts, bends[i] );
+	}
+	
+	return oldPts;
+
+};
+
+THREE.Path.prototype.getTransformedSpacedPoints = function( segments, bends ) {
+
+	var oldPts = this.getSpacedPoints( segments );
+	
+	var i, il;
+	
+	if (!bends) {
+		bends = this.bends;
+	}
+	
+	for (i=0, il=bends.length; i<il;i++) {
+		oldPts = this.getWrapPoints( oldPts, bends[i] );
+	}
+	
+	return oldPts;
+
+};
+
+THREE.Path.prototype.getWrapPoints = function (oldPts, path ) {
+
+	var bounds = this.getBoundingBox();
 
 	var i, il, p, oldX, oldY, xNorm;
 
@@ -553,6 +585,20 @@ THREE.Path.prototype.transform = function( path, segments ) {
 	}
 
 	return oldPts;
+};
+
+// Read http://www.planetclegg.com/projects/WarpingTextToSplines.html
+// This returns getPoints() bend/wrapped around the contour of a path.
+THREE.Path.prototype.transform = function( path, segments ) {
+
+	var bounds = this.getBoundingBox();
+	var oldPts = this.getPoints( segments ); // getPoints getSpacedPoints
+	
+	//console.log( path.cacheArcLengths() );
+	//path.getLengths(400);
+	//segments = 40;
+	
+	return this.getWrapPoints( oldPts, path );
 
 };
 

src/extras/geometries/Shape.js

@@ -30,23 +30,14 @@ THREE.Shape.prototype.extrude = function ( options ) {
 
 // Get points of holes
 
-THREE.Shape.prototype.getPointsHoles = function ( divisions, bend ) {
+THREE.Shape.prototype.getPointsHoles = function ( divisions ) {
 
 
 	var i, il = this.holes.length, holesPts = [];
 
 	for ( i = 0; i < il; i ++ ) {
 
-		if (bend) {
-			
-			holesPts[ i ] = this.holes[ i ].transform( bend, divisions );
-			
-		} else {
-			
-			holesPts[ i ] = this.holes[ i ].getPoints( divisions );
-		
-		}
-		
+		holesPts[ i ] = this.holes[ i ].getTransformedPoints( divisions, this.bends );
 
 	}
 
@@ -62,7 +53,7 @@ THREE.Shape.prototype.getSpacedPointsHoles = function ( divisions ) {
 
 	for ( i = 0; i < il; i ++ ) {
 
-		holesPts[ i ] = this.holes[ i ].getSpacedPoints( divisions );
+		holesPts[ i ] = this.holes[ i ].getSpacedPoints( divisions, this.bends );
 
 	}
 
@@ -77,23 +68,24 @@ THREE.Shape.prototype.extractAllPoints = function ( divisions ) {
 
 	return {
 
-		shape: this.getPoints( divisions ),
+		shape: this.getTransformedPoints( divisions ),
 		holes: this.getPointsHoles( divisions )
 
 	};
 
 };
 
-THREE.Shape.prototype.extractAllPointsWithBend = function ( divisions, bend ) {
-
-	return {
-
-		shape: this.transform( bend, divisions ),
-		holes: this.getPointsHoles( divisions, bend )
-
-	};
-
-};
+// 
+// THREE.Shape.prototype.extractAllPointsWithBend = function ( divisions, bend ) {
+// 
+// 	return {
+// 
+// 		shape: this.transform( bend, divisions ),
+// 		holes: this.getPointsHoles( divisions, bend )
+// 
+// 	};
+// 
+// };
 
 // Get points of shape and holes (spaced by regular distance)
 
@@ -101,7 +93,7 @@ THREE.Shape.prototype.extractAllSpacedPoints = function ( divisions ) {
 
 	return {
 
-		shape: this.getSpacedPoints( divisions ),
+		shape: this.getTransformedSpacedPoints( divisions ),
 		holes: this.getSpacedPointsHoles( divisions )
 
 	};