Added some parts of the whole approximation-functionality

js/approximation/approximator.js

@@ -7,10 +7,135 @@ function Approximator(paths, precision) {
 }
 
 /**
-  example method stub
+  Returns the distance between two points in 2D-Space
 */
-method.approximate = function(callback) {
-  // do something
+var getDistance = function(x1, y1, x2, y2) {
+  var xd = x2 - x1;
+  var yd = y2 - y1;
+  return Math.sqrt(xd * xd + yd * yd);
+}
+
+/**
+  Returns the midpoint between two given points in 2D-Space.
+  Midpoint is returned as an Array: [x,y]
+*/
+var getMidpoint = function(x1, y1, x2, y2) {
+  var ret = [];
+  ret.push((x1+x2)/2);
+  ret.push((y1+y2)/2);
+}
+
+/**
+  Will use de casteljau's algorithm to divide a bezier-curve (defined by the passed points) into two subcurves.
+  Returns an array containing two arrays with the points for the curves:
+  [curve1, curve2] where each curve is [p0,p1,p2,p3] and each point is [x,y].
+*/
+var approximateCurve = function(points) {
+  var nPoints = [];
+  // TODO: implement
+}
+
+/**
+  Transforms an array of curves (each curve containing an array of points containing an array of coordinates) into SVG-commands.
+  This function checks wether the "precision" has been reached or not for each curve.
+  If it is reached, a "LineTo"-command will be created, else another curve-command.
+  Both are absolute; this method does not create relative commands.
+*/
+var buildCurveCommands = function(curves) {
+  var commands = [];
+
+  curves.forEach(function(curve) {
+    if (getDistance(curve[0][0], curve[0][1], curve[3][0], curve[3][1]) <= this._precision.getPrecision(curve[0][0], curve[0][1])) {
+      // transform into "L"-command from p0 -> p3
+      commands.push(["L", curve[0][0], curve[0][1], curve[3][0], curve[3][1]]);
+    } else {
+      // build "C"-command and push it
+      commands.push(["C", curve[0][0], curve[0][1], curve[1][0], curve[1][1], curve[2][0], curve[2][1], curve[3][0], curve[3][1]]);
+    }
+  })
+
+  return commands;
+}
+
+/**
+  This method approximates one specific path and returns the approximation as a new SVG-Path.
+*/
+var approximatePath = function(pathNo) {
+  // TODO: Maybe change this to only work with the "available" data instead of "copying"
+  //var path = this._paths[pathNo];
+  var nPath = [];
+  var sPoint = [];
+  var curveFound = false;
+
+  // TODO: Whole thing is not really DRY... maybe find a better solution?
+  for (var i = 0; i < this._paths[pathNo].length; i++) {
+    // get every command, approximate curves
+    var cmd = this._paths[pathNo][i];
+    switch (cmd[0]) {
+      case "m":
+        // adjust sPoint to values (relative)
+        sPoint[0] += cmd[1];
+        sPoint[1] += cmd[2];
+        nPath.push(cmd);
+        break;
+      case "M":
+        // adjust sPoint to values (absolute)
+        sPoint[0] = cmd[1];
+        sPoint[1] = cmd[2];
+        nPath.push(cmd);
+        break;
+      case "c":
+        // approximate one cycle (relative)
+        curveFound = true;
+        var p1 = [sPoint[0]+cmd[1],sPoint[1]+cmd[2]];
+        var p2 = [p1[0]+cmd[3],p1[1]+cmd[4]];
+        var p3 = [p2[0]+cmd[5],p2[1]+cmd[6]];
+        var ret = buildCurveCommands(approximatePath(sPoint, p1, p2, p3));
+        // TODO: Test this
+        ret.forEach(function(command) {
+          nPath.push(command);
+        });
+        // TODO: set new sPoint!
+        break;
+      case "C":
+        // approximate one cycle (absolute)
+        curveFound = true;
+        var p1 = [cmd[1],cmd[2]];
+        var p2 = [cmd[3],cmd[4]];
+        var p3 = [cmd[5],cmd[6]];
+        var ret = buildCurveCommands(approximatePath(sPoint, p1, p2, p3));
+        // TODO: Test this
+        ret.forEach(function(command) {
+          nPath.push(command);
+        });
+        break;
+      case "l":
+        // copy values, set sPoint (relative)
+        sPoint[0] += cmd[1];
+        sPoint[1] += cmd[2];
+        nPath.push(cmd);
+        break;
+      case "L":
+        // copy values, set sPoint (absolute)
+        sPoint[0] = cmd[1];
+        sPoint[1] = cmd[2];
+        nPath.push(cmd);
+        break;
+      default:
+        // TODO: implement default/failure-behaviour
+    }
+  }
+}
+
+/**
+  Starts the whole approximation-process
+*/
+method.approximateData = function(callback) {
+  for (var i = 0; i < this._paths.length; i++) {
+    var retPath = approximatePath(i);
+    this._paths[i] = retPath;
+  }
+  callback(null, this._paths);
 };
 
 module.exports = Approximator;

js/script.js

@@ -72,12 +72,16 @@ $(function(){
 
               // start the approximator with SVG-data and the precisionMap
               var approximator = new Approximator(result, map);
-              // do something more :)
+              approximator.approximateData(function(err, nPaths) {
+                // do something more :)
+              });
             });
           } else {
             // the user did not provide a heatmap, so just start the approximator
             var approximator = new Approximator(result, null);
-            // do something more :)
+            approximator.approximateData(function(err, nPaths) {
+              // do something more :)
+            });
           }
         }
       });