Draw contours in random color for testing

index5.html

@@ -18,6 +18,8 @@
 		//var threshold = 120; //circus
 		var contourFinder = new ContourFinder();
 		var startTime = 0;
+    var currentContour = 0;
+
 		$( document ).ready(function() {
 		  console.log( "ready!" );
 		  image = document.getElementById('image');
@@ -34,15 +36,25 @@
 			// ToDo: preprocess: threshold
 			contourFinder.findContours(image,foregroudColor,backgroundColor,threshold);
 
-			alert(Date.now()-startTime);
+      console.log("contourFinder.allpoints.length): " + contourFinder.allpoints.length);
+			//alert(Date.now()-startTime);
+
+      imageCtx.clearRect(0,0,1000,1000);
+
+      for (var i=0; i<contourFinder.allpoints.length; i++) {
+        imageCtx.strokeStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
+        drawContour(i);
+      }
+
+      // console.log(contourFinder.getPoints());
 		}
 		function fillImage() {
 			//imageCtx.clearRect (0,0,image.width,image.height);
 
 			logo = new Image();
 	    logo.onload = draw;
 	    //logo.src = "images/logo.png";
-	    logo.src = "images/arcade.jpg";
+	    logo.src = "images/hart.png";
 			//logo.src = "images/circus.jpg";
 		}
 		function draw() {
@@ -52,6 +64,19 @@
 		function drawContours() {
 
 		}
+
+    function drawContour(index) {
+      var points = contourFinder.allpoints[index];
+      if (points.length<=0) return;
+
+      imageCtx.beginPath();
+      imageCtx.moveTo(points[0][0],points[0][1]); 
+      for (var i=0; i<points.length; i++) {
+        imageCtx.lineTo(points[i][0],points[i][1]);
+      }
+      imageCtx.stroke();
+    }
+
 
   </script>
 </head>

js/ContourFinder.js

@@ -6,7 +6,9 @@ function ContourFinder() {
 	this.fColor; // foreground color
 	this.bColor; // background color
 	this.threshold;
-	this.maxContourPoints = 500*4;
+	this.maxContourPoints = 500*10; //was 500*4
+  this.allpoints = [];
+
 	this.findContours = function(image,foregroundColor,backgroundColor,threshold) {
 		var w = this.pixelsWidth = image.width;
 		var h = this.pixelsHeight = image.height; 
@@ -51,6 +53,8 @@ function ContourFinder() {
 		//imageCtx.putImageData(imageData, 0, 0); // at coords 0,0
 		//return; 
 
+    var counter = 0;
+
 		for (var y = 0; y < h; y++) {
 			for (var x = 0; x < w; x++) {
 				var index = y*w*4+x*4; 
@@ -64,7 +68,9 @@ function ContourFinder() {
 				value = (value > threshold)? 255 : 0;
 				// if we enter a foreGround color and red isn't 0 (already stored as contour)
 				if(prevValue == backgroundColor && value == foregroundColor && r != 0) {
-					this.followContour([x,y]);
+					var points = this.followContour([x,y]);
+          this.allpoints.push(points);
+          counter++;
 				}
 
 				//r = 255;
@@ -75,6 +81,12 @@ function ContourFinder() {
 				prevValue = value;
 			}
 		}
+
+    // console.log("counter: " +counter);
+
+    //  console.log(this.getPoints(points));
+    // console.log("======================================");
+
 
 		/*for (var i = 0, n = pixels.length; i < n; i += 4) {
 			var grayscale = pixels[i  ] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
@@ -187,7 +199,10 @@ function ContourFinder() {
 		  //console.log(point[0],startPoint[0],"  ",point[1],startPoint[1]);
 
 	  } while(!(point[0] == startPoint[0] && point[1] == startPoint[1]) && numPoints < this.maxContourPoints);
+
 	  this.closeContour(points);
+
+    return points;
 	}
 	this.closeContour = function(points) {
 		//console.log("pixels: ",this.pixels);