adding "reverse" functionality to curve-follow component

start/stop movement with setAttribute("curve-follow", "enabled", "true")    (or "false")

reverse/normal movement with setAttribute("curve-follow", "reverse", "true")    (or "false")

resolves #2

css/index.css

@@ -84,4 +84,11 @@ a:hover
 	-o-transition: all 300ms ease-in-out;
 	-ms-transition: all 300ms ease-in-out;
 	transition: all 300ms ease-in-out; 
+}
+
+.code
+{
+	font-family: monospace;
+	font-weight: bold;
+
 }

index.html

@@ -151,7 +151,10 @@
 <img src="images/demo/parametric-path-follow.png" class="demo-image"/></a></td>
 <td class="demo-title"><a href="parametric-path-follow.html">Parametric Path Following</a></td></tr>
 <tr><td class="demo-text">
-	Introducing a new component, aframe-curve-follow, that moves an entity according to a set of parametric equations <i>x(t)</i>, <i>y(t)</i>, <i>z(t)</i>, adjusting position and rotation over a specified time interval.
+	Introducing a new component, aframe-curve-follow, that moves an entity according to a set of parametric equations <i>x(t)</i>, <i>y(t)</i>, <i>z(t)</i>, adjusting position and rotation over a specified time interval. <br/>
+	start/stop movement with <span class="code">setAttribute("curve-follow", "enabled", "true")</span> (or "false") <br/>
+	reverse/normal movement with <span class="code">setAttribute("curve-follow", "reverse", "true")</span> (or "false")
+
 </td></tr>
 </table>
 

js/aframe-curve-follow.js

@@ -17,7 +17,10 @@ AFRAME.registerComponent("curve-follow",
 		duration: {type: "number", default: 4},
 
 		// actively follow path?
-		enabled: {type: "boolean", default: true}
+		enabled: {type: "boolean", default: true},
+
+		// follow path in reverse
+		reverse: {type: "boolean", default: false}
     },
 
     init: function()
@@ -52,7 +55,17 @@ AFRAME.registerComponent("curve-follow",
 			return f(tValue);
 		};
 
-		this.elapsedTime = 0;
+		if ( !this.data.reverse )
+		{
+			// moving forwards (default), starting time is zero
+			this.elapsedTime = 0; 		
+		}
+		else
+		{
+			// moving in reverse direction, starting time at maximum and counting down
+			this.elapsedTime = this.data.duration;
+		}
+
 		this.upVector = new THREE.Vector3(0,1,0);
 	},
 
@@ -61,16 +74,27 @@ AFRAME.registerComponent("curve-follow",
 		if ( !this.data.enabled )
 			return;
 
-		if ( this.elapsedTime > this.data.duration )
+		// once elapsedTime is out of bounds, reset (if looping) or return
+		if ( this.elapsedTime > this.data.duration || this.elapsedTime < 0)
 		{
 			if ( this.data.loop )
-				this.elapsedTime = 0;
+			{
+				if ( !this.data.reverse )
+					this.elapsedTime = 0;
+				else
+					this.elapsedTime = this.data.duration;
+			}
 			else
 				return;
 		}
 
 		// convert time (milliseconds) to t (seconds)
-		this.elapsedTime += deltaTime / 1000;
+		// and take into account reverse direction setting
+		if ( !this.data.reverse )
+			this.elapsedTime += deltaTime / 1000;
+		else
+			this.elapsedTime -= deltaTime / 1000;
+
 		let percentComplete = this.elapsedTime / this.data.duration;
 
 		// get current position; take into account travel speed (duration)