extended spline example with second line using built-in interpolation

egraether · Apr 7, 2012 · a2fbc35 · a2fbc35
1 parent 3659495
commit a2fbc35
Showing 1 changed file with 60 additions and 20 deletions.
diff --git a/examples/05_spline.html b/examples/05_spline.html
@@ -28,34 +28,40 @@ <h2>05 _ Spline</h2>
 		<script src="../src/Tween.js"></script>
 		<script>
 
-			init();
-			TWEEN.start();
+			var target = document.getElementById('target');
 
-			function init() {
+			var canvas = document.createElement( 'canvas' );
+			canvas.width = 1024;
+			canvas.height = 512;
+			target.appendChild( canvas );
 
-				var target = document.getElementById('target');
+			var context = canvas.getContext( '2d' );
+			context.fillStyle = "rgb(250,250,250)";
+			context.fillRect( 0, 0, 1024, 512 );
 
-				var canvas = document.createElement( 'canvas' );
-				canvas.width = 1024;
-				canvas.height = 512;
-				target.appendChild( canvas );
+			context.fillStyle = "rgba(0,0,0,0.3)";
 
-				var context = canvas.getContext( '2d' );
-				context.fillStyle = "rgb(250,250,250)";
-				context.fillRect( 0, 0, 1024, 512 );
+			var points = [];
+			var pointsX = [];
+			var pointsY = [];
 
-				context.lineWidth = 2;
-				context.strokeStyle = "rgb(255,127,127)";
+			for ( var i = 0; i < 20; i ++ ) {
 
-				context.fillStyle = "rgba(0,0,0,0.3)";
+				points[ i ] = { x: Math.random() * 1024, y: Math.random() * 512 };
 
-				var points = [];
+				pointsX.push( points[ i ].x );
+				pointsY.push( points[ i ].y );
 
-				for ( var i = 0; i < 20; i ++ ) {
+				context.fillRect( points[ i ].x - 2, points[ i ].y - 2, 4, 4 );
 
-					points[ i ] = { x: Math.random() * 1024, y: Math.random() * 512 };
-					context.fillRect( points[ i ].x - 2, points[ i ].y - 2, 4, 4 );
-				}
+			}
+
+			initCustomInterpolation( context, points );
+			initTWEENInterpolation( context, pointsX, pointsY );
+
+			TWEEN.start();
+
+			function initCustomInterpolation( context, points ) {
 
 				var dummy = { p: 0 };
 				var position = { x: 0, y: 0 };
@@ -67,6 +73,9 @@ <h2>05 _ Spline</h2>
 
 					position = spline.get2DPoint( points, this.p );
 
+					context.lineWidth = 2;
+					context.strokeStyle = "rgb(255,127,127)";
+
 					context.beginPath();
 					context.moveTo( position_old.x, position_old.y );
 					context.lineTo( position.x, position.y );
@@ -76,7 +85,7 @@ <h2>05 _ Spline</h2>
 					position_old.x = position.x;
 					position_old.y = position.y;
 
-				}).start();
+				}).delay( 500 ).start();
 
 			}
 
@@ -117,6 +126,37 @@ <h2>05 _ Spline</h2>
 
 			}
 
+			function initTWEENInterpolation( context, pointsX, pointsY ) {
+
+				var x0 = pointsX.shift();
+				var y0 = pointsY.shift();
+
+				var obj = { x: x0, y: y0, old: { x: x0, y: y0 }, dash: 0 };
+
+				new TWEEN.Tween( obj ).to( { x: pointsX, y: pointsY }, 20000 ).easing( TWEEN.Easing.Linear.EaseNone ).onUpdate( function() {
+
+					context.lineWidth = 1;
+					context.strokeStyle = "rgb(200,200,200)";
+
+					if ( this.dash ) {
+
+						context.beginPath();
+						context.moveTo( this.old.x, this.old.y );
+						context.lineTo( this.x, this.y );
+						context.closePath();
+						context.stroke();
+
+					}
+
+					this.old.x = this.x;
+					this.old.y = this.y;
+
+					this.dash = !this.dash;
+
+				}).interpolation( TWEEN.Interpolation.Spline ).start();
+
+			}
+
 		</script>
 	</body>
 </html>