good index, fading out, etc

gmlplayer.js

@@ -7,6 +7,8 @@ var options = {};
 var video = document.getElementById("video");
 var x, y, rotation = false; 
 var dur;
+var drawingDur;
+
 
 // Setup the Processing Canvas
 void setup() {
@@ -22,6 +24,12 @@ void manSetup(app_nameNew, indexNew, optionsIncoming) {
 //	 console.log(options.end);
 
 	dur = (options.end - options.start);
+	if (options.endDrawing != null){
+		//console.log("yay");
+		drawingDur = (options.endDrawing - options.start);
+	} else {
+		drawingDur = dur;
+	}
 //	console.log(dur);
 
     app_name = app_nameNew;
@@ -43,17 +51,17 @@ void manSetup(app_nameNew, indexNew, optionsIncoming) {
 }
 
 
-function drawLine(x,y,x2,y2) {
+function drawLine(x,y,x2,y2, alpha) {
     _x = rotation ? y*height : x*width;
     _y = rotation ? width-(x*width) : y*height;
     _x2 = rotation ? y2 * height : x2*width;
     _y2 = rotation ? width - (x2 * width) : y2*height;
-    stroke(0);
-    strokeWeight(8);
+    stroke(0,0,0,255 * (alpha/255.0));
+    strokeWeight(num);
     strokeCap(SQUARE);
     line(_x,_y,_x2,_y2);
-    stroke(255);
-    strokeWeight(4);
+    stroke(alpha, alpha, alpha);
+    strokeWeight(num-2.5);
     strokeCap(ROUND);
     line(_x,_y,_x2,_y2);
     //ol = { x: _x, y: _y, x2: _x2, y2: _y2 };
@@ -65,17 +73,30 @@ void draw() {
 
 	//var dur = (options.end - options.start);
 
+	var alpha = 255;
 
     if (doneSetup) {
 
 		var pct = (video.currentTime - options.start) / dur;
+		var drawingPct = (video.currentTime - options.start) / drawingDur;
+
+		if (options.endDrawing != null){
+			// how done are we?
+			if (video.currentTime >= options.endDrawing){
+
+				alpha = (1 - ((video.currentTime - options.endDrawing) / (options.end - options.endDrawing)))*255;
+			}
+		}
+
+		if (drawingPct > 1) drawingPct = 1;
+
 		//console.log( (video.currentTime - options.start));
 	  	//console.log(pct);
 
  		background(0);
 		var nPoints = data_object["pts" + index].length;
 		if (pct < 0 || pct > 1) return;
-		var howMany = pct * nPoints;
+		var howMany = drawingPct * nPoints;
 	    for (var i = 0; i < howMany; i++){
 			if (i > 0){
 			 prev = data_object["pts" + index][i - 1];
@@ -97,7 +118,9 @@ void draw() {
 	        strokeWeight(num);
 	        var colors = ['255', '255', '255'];
 	        stroke(colors[0], colors[1], colors[2]);
-	        line(prev.x * width, prev.y * height, pt.x * width, pt.y * height);
+		//line(prev.x, prev.y , pt.x, pt.y);
+
+	        drawLine(prev.x, prev.y , pt.x, pt.y, alpha);
 		}
 	}
 }

index.html

@@ -17,103 +17,92 @@
       .play() 
       .gml({
         start: 36, // seconds
-        end: 50, // seconds
+		endDrawing: 44,
+        end: 46, // seconds
         gmltag: '29582',
         target: 'gmldiv'
       })
       .gml({
-        start: 50, // seconds
-        end: 59, // seconds
-        gmltag: '148',
-        target: 'gmldiv'
-      })
-      .gml({
-        start: 59, // seconds
-        end: 60+59, // seconds
+        start: 54, // seconds
+        endDrawing: 59,
+        end: 61, // seconds
         gmltag: '29574',
         target: 'gmldiv'
       })
       .gml({
-        start: 60+59, // seconds
-        end: 120+19, // seconds
+        start: 114, // seconds
+        endDrawing: 117, 
+        end:  119,// seconds
         gmltag: '29573',
         target: 'gmldiv'
       })
       .gml({
-        start: 120+19, // seconds
-        end: 5*60+01, // seconds
-        gmltag: '94',
-        target: 'gmldiv'
-      })
-      .gml({
-        start: 5*60+01, // seconds
-        end: 5*60+04, // seconds
+        start: 299, // seconds
+        endDrawing: 302,
+        end: 304, // seconds
         gmltag: '29578',
         target: 'gmldiv'
       })
       .gml({
-        start: 5*60+04, // seconds
-        end: 8*60+53, // seconds
-        gmltag: '29576',
-        target: 'gmldiv'
-      })
-      .gml({
-        start: 8*60+53, // seconds
-        end: 10*60+24, // seconds
+        start: 528, // seconds
+        endDrawing: 532,
+        end: 556, // seconds
         gmltag: '29575',
         target: 'gmldiv'
       })
       .gml({
-        start: 10*60+24, // seconds
-        end: 10*60+48, // seconds
+        start: 622, // seconds
+        endDrawing: 627,
+        end: 631, // seconds
         gmltag: '29581',
         target: 'gmldiv'
       })
       .gml({
-        start: 10*60+48, // seconds
-        end: 12*60+41, // seconds
+        start: 645, // seconds
+        endDrawing: 646,
+        end: 649, // seconds
         gmltag: '29575',
         target: 'gmldiv'
       })
       .gml({
-        start: 12*60+41, // seconds
-        end: 13*60+01, // seconds
+        start: 751, // seconds
+        endDrawing: 765,
+        end: 769, // seconds
         gmltag: '94',
         target: 'gmldiv'
       })
       .gml({
-        start: 13*60+01, // seconds
-        end: 13*60+22, // seconds
+        start: 780, // seconds
+        endDrawing: 782,
+        end: 784, // seconds
         gmltag: '29580',
         target: 'gmldiv'
       })
       .gml({
-        start: 13*60+22, // seconds
-        end: 13*60+40, // seconds
+        start: 796, // seconds
+        endDrawing: 802,
+        end: 802, // seconds
         gmltag: '148',
         target: 'gmldiv'
       })
       .gml({
-        start: 13*60+40, // seconds
-        end: 14*60+12, // seconds
+        start: 816, // seconds
+        endDrawing: 824,
+        end: 824, // seconds
         gmltag: '21377',
         target: 'gmldiv'
       })
       .gml({
-        start: 14*60+12, // seconds
-        end: 14*60+35, // seconds
-        gmltag: '29579',
-        target: 'gmldiv'
-      })
-      .gml({
-        start: 14*60+35, // seconds
-        end: 15*60+04, // seconds
+        start: 864, // seconds
+        endDrawing: 885,
+        end: 885, // seconds
         gmltag: '29020',
         target: 'gmldiv'
       })
       .gml({
-        start: 15*60+04, // seconds
-        end: 15*60+42, // seconds
+        start: 902, // seconds
+        endDrawing: 906,
+        end: 911, // seconds
         gmltag: '29019',
         target: 'gmldiv'
       });