Commit 3896183a authored by Julian Frosch's avatar Julian Frosch
Browse files

Added some first framework ideas

parent 92ca11ac
......@@ -4,6 +4,8 @@ var method = Approximator.prototype;
function Approximator(paths, precision) {
this._paths = paths;
this._precision = precision;
// precision can either be the precisionMap or the overall precision-value (if no heatmap was provided)
this._heatmapProvided = ((typeof precision) == object) ? true : false;
}
/**
......@@ -62,7 +64,7 @@ method.buildCurveCommands = function(curves) {
var curve = curves[i];
var d = this.getDistance(curve[0][0], curve[0][1], curve[3][0], curve[3][1]);
var p = this._precision.getPrecision(curve[0][0], curve[0][1]);
var p = (this._heatmapProvided) ? this._precision.getPrecision(curve[0][0], curve[0][1]) : this._precision;
if (d <= p) {
// transform into "L"-command from p0 -> p3
commands.push(["L", curve[3][0], curve[3][1]]);
......@@ -168,10 +170,87 @@ method.approximatePath = function(pathNo) {
return path;
}
/**
This will calculate a bounding box for all paths in the SVG and store it in this class.
*/
method.calculateBoundingBox = function() {
var xMin = Infinity, xMax = 0, yMin = Infinity, yMax = 0;
var sPoint = [0,0];
for (var i = 0; i < this._parsedData.length; i++) {
// paths
var path = this._parsedData[i];
for (var j = 0; j < path.length; j++) {
// commands
var command = path[j];
switch (cmd[0]) {
case "m":
// adjust sPoint to values (relative)
sPoint[0] += cmd[1];
sPoint[1] += cmd[2];
xMin = Math.min(xMin, sPoint[0]);
xMax = Math.max(xMax, sPoint[0]);
yMin = Math.min(yMin, sPoint[1]);
yMax = Math.max(yMax, sPoint[1]);
break;
case "M":
// adjust sPoint to values (absolute)
sPoint[0] = cmd[1];
sPoint[1] = cmd[2];
xMin = Math.min(xMin, sPoint[0]);
xMax = Math.max(xMax, sPoint[0]);
yMin = Math.min(yMin, sPoint[1]);
yMax = Math.max(yMax, sPoint[1]);
break;
case "c":
var p1 = [sPoint[0]+cmd[1],sPoint[1]+cmd[2]];
var p2 = [sPoint[0]+cmd[3],sPoint[1]+cmd[4]];
var p3 = [sPoint[0]+cmd[5],sPoint[1]+cmd[6]];
// set new startingpoint to last point of second curve
sPoint[0] = p3[0];
sPoint[1] = p3[1];
break;
case "C":
var p1 = [cmd[1],cmd[2]];
var p2 = [cmd[3],cmd[4]];
var p3 = [cmd[5],cmd[6]];
// set new startingpoint to last point of second curve
sPoint[0] = p3[0];
sPoint[1] = p3[1];
break;
case "l":
// copy values, set sPoint (relative)
sPoint[0] += cmd[1];
sPoint[1] += cmd[2];
xMin = Math.min(xMin, sPoint[0]);
xMax = Math.max(xMax, sPoint[0]);
yMin = Math.min(yMin, sPoint[1]);
yMax = Math.max(yMax, sPoint[1]);
break;
case "L":
// copy values, set sPoint (absolute)
sPoint[0] = cmd[1];
sPoint[1] = cmd[2];
xMin = Math.min(xMin, sPoint[0]);
xMax = Math.max(xMax, sPoint[0]);
yMin = Math.min(yMin, sPoint[1]);
yMax = Math.max(yMax, sPoint[1]);
break;
default:
// TODO: default behaviour
}
}
}
}
/**
Starts the whole approximation-process
*/
method.approximateData = function(callback) {
if (this._heatmapProvided) {
// calculate the bounding box first!
this.calculateBoundingBox();
}
for (var i = 0; i < this._paths.length; i++) {
var retPath = this.approximatePath(i);
this._paths[i] = retPath;
......
......@@ -2,32 +2,26 @@ var method = PrecisionMap.prototype;
// constructor
function PrecisionMap(data, min, max) {
if ((typeof data) == 'object') {
this._data = data;
/*
FYI - NDArray Format: ((x),(y),(r,g,b,a))
Access pixel with ....get(x,y,c)
e.g.:
console.log("Red", pixels.get(0,0,0), pixels.get(0,0,1), pixels.get(0,0,2), pixels.get(0,0,3));
console.log("Blue", pixels.get(1,0,0), pixels.get(1,0,1), pixels.get(1,0,2), pixels.get(1,0,3));
console.log("Black", pixels.get(2,0,0), pixels.get(2,0,1), pixels.get(2,0,2), pixels.get(2,0,3));
*/
// get the dimensions
var shape = this._data.shape.slice();
this._w = shape[0];
this._h = shape[1];
this._c = shape[2];
this._min = min;
this._max = max;
this._diff = max-min;
} else {
// no heatmap provided, we only have the "max"-value
this._data = null;
this._max = data;
}
this._data = data;
/*
FYI - NDArray Format: ((x),(y),(r,g,b,a))
Access pixel with ....get(x,y,c)
e.g.:
console.log("Red", pixels.get(0,0,0), pixels.get(0,0,1), pixels.get(0,0,2), pixels.get(0,0,3));
console.log("Blue", pixels.get(1,0,0), pixels.get(1,0,1), pixels.get(1,0,2), pixels.get(1,0,3));
console.log("Black", pixels.get(2,0,0), pixels.get(2,0,1), pixels.get(2,0,2), pixels.get(2,0,3));
*/
// get the dimensions
var shape = this._data.shape.slice();
this._w = shape[0];
this._h = shape[1];
this._c = shape[2];
this._min = min;
this._max = max;
this._diff = max-min;
}
/**
......@@ -35,13 +29,18 @@ function PrecisionMap(data, min, max) {
x and y are floored in the method.
*/
method.getPrecision = function(x, y) {
if (this._data == null) {
return this._max;
}
// Note: (0,0) in SVG is "bottom left" and (0,0) in PNG is "top left"
var value = this._data.get(Math.floor(x), Math.floor(this._h - y), 0);
var p = this._max + this._diff * (x/255);
return p;
};
method.getHeight = function() {
return this._h;
}
method.getWidth = function() {
return this._w;
}
module.exports = PrecisionMap;
var method = SVGParser.prototype;
// empty constructor
function SVGParser() {
function SVGParser(path) {
this._path = path;
this._fs = require('fs');
this._xml2js = require('xml2js');
this._parsedData = null;
}
method.getHeight = function() {
return this._parsedData.svg.$.height;
}
/**
Takes the SVG-file that was approximated, substitutes it's path's d-attributes and writes it to a new file.
*/
......
......@@ -138,10 +138,9 @@ $(function(){
// the user did not provide a heatmap, so just start the approximator
// get the pMax-value, this will be the precision for all positions
var pMax = document.getElementById('pMax').value;
var map = new PrecisionMap(pMax);
printOut("Approximating paths without heatmap...");
var approximator = new Approximator(result, map);
var approximator = new Approximator(result, pMax);
approximator.approximateData(function(err, nPaths) {
if (err) {
printErr(err);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment