initial commit for npm package

.gitignore

@@ -0,0 +1,3 @@
+.eslintrc
+node_modules/
+.DS_Store

README.md

@@ -0,0 +1,38 @@
+# p5-interceptor
+
+### Overview
+
+This is an interceptor module to make the p5 canvas accessible. 
+
+The canvas is an inherently inaccessible element in the web. This module tries to reconstruct what is on the canvas in p5 in words and sound so that it is accessible to the screen reader.
+
+It helps create 3 kinds of output
+
+1) **Plain Text Output** - This describes the visual content present in the canvas in list form. Each element can be selected so as to get more details
+
+2) **Table Text Output** - Here the visual content in the canvas is laid out in the form of a table based on where each element is - the elements can be selected so as to get more details.
+
+3) **Sound Output** - This mode explains the movement of the objects present in the canvas. Top to Down movement is represented by a decrease in frequency and left to right by panning the stereo output.
+
+### Code structure
+
+The code can be widely split into interceptors (modules that intercept the code and create entities) and entities(classes that decide how each function that is intercepted should be treated)
+
+The interceptors now have the following class structure
+
+    * BaseInterceptor
+        * TextInterceptor
+        * GridInterceptor
+
+and the entities ( p5 functions ) have the following class structure
+
+    * BaseEntity
+        * BackgroundEntity
+        * FillEntity
+        * TextEntity
+        * ShapeEntity
+        
+  (additional entities will be added here)
+
+
+

baseInterceptor.js

@@ -0,0 +1,80 @@
+function baseInterceptor() {
+  this.prevTotalCount = 0,
+  this.totalCount = 0,
+  this.currentColor = 'white',
+  this.bgColor = 'white',
+  this.objectArea = 0,
+  this.coordinates = [],
+  this.objectDescription = '',
+  this.canvasDetails = {
+    width: 0,
+    height: 0
+  },
+  this.setupObject = {
+    objectArray: [],
+    objectCount: 0,
+    objectTypeCount: {}
+  },
+  this.drawObject = {
+    objectArray: [],
+      objectCount: 0,
+      objectTypeCount: {}
+    },
+    this.isCleared = false;
+}
+
+baseInterceptor.prototype.getColorName = function(arguments) {
+  if (arguments.length >= 3) {
+    // assuming that we are doing RGB - convert RGB values to a name
+    var color = '#' + arguments[0].toString(16).paddingLeft('00') +
+      arguments[1].toString(16).paddingLeft('00') +
+      arguments[2].toString(16).paddingLeft('00');
+    var nMatch = ntc.name(color);
+    var rgb = '(' + arguments[0] + ',' + arguments[1] + ',' + arguments[2] + ')';
+    return ({
+      'color': nMatch[1],
+      'rgb': rgb
+    });
+  } else if (arguments.length == 1) {
+    if (!(typeof(arguments[0])).localeCompare('number')) {
+      // assuming that we are doing RGB - this would be a grayscale number
+      if (arguments[0] < 10) {
+        var rgb = '(0,0,0)';
+        return ({
+          'color': 'black',
+          'rgb': rgb
+        });
+      } else if (arguments[0] > 240) {
+        var rgb = '(255,255,255)';
+        return ({
+          'color': 'white',
+          'rgb': rgb
+        });
+      } else {
+        var rgb = '(' + arguments[0] + ',' + arguments[0] + ',' + arguments[0] + ')';
+        return ({
+          'color': 'grey',
+          'rgb': rgb
+        });
+      }
+    } else if (!(typeof(arguments[0])).localeCompare('string')) {
+      if (!arguments[0].charAt(0).localeCompare('#')) {
+        // if user has entered a hex color
+        var nMatch = ntc.name(arguments[0]);
+        var r = parseInt(arguments[0].charAt(1) + arguments[0].charAt(2), 16);
+        var g = parseInt(arguments[0].charAt(3) + arguments[0].charAt(4), 16);
+        var b = parseInt(arguments[0].charAt(5) + arguments[0].charAt(6), 16);
+        var rgb = '(' + r + ',' + g + ',' + b + ')';
+        return ({
+          'color': nMatch[1],
+          'rgb': rgb
+        });
+      } else {
+        return ({
+          'color': arguments[0],
+          'rgb': ''
+        });
+      }
+    }
+  }
+}

entities/_baseEntity.js

@@ -0,0 +1,96 @@
+function BaseEntity(Interceptor,object,arguments, canvasX, canvasY) {
+  this.type= Interceptor.currentColor + ' ' +  object.name ,
+  this.location= '' ,
+  this.coordinates= '',
+  this.isMember = function() {
+
+  }
+
+  this.getAttributes = function() {
+    return({
+      type: this.type,
+      location: this.location,
+      coordinates: this.coordinates
+    })
+  };
+
+  this.getLocation = function(object, arguments, canvasX, canvasY) { // eslint-disable-line
+    var xCoord, yCoord;
+    arguments = [].slice.call(arguments);
+    var i = 0;
+    var that = this;
+    that.coordinates = '';
+
+    arguments.forEach(function(argument){
+      a = argument;
+      if (object.params[i].description.indexOf('x-coordinate') > -1) {
+        xCoord = a;
+        that.coordinates += a + 'x,';
+      } else if (object.params[i].description.indexOf('y-coordinate') > -1) {
+        yCoord = a;
+        that.coordinates += a + 'y';
+      }
+      i++;
+    });
+
+    if (xCoord < 0.4 * canvasX) {
+      if (yCoord < 0.4 * canvasY) {
+        return 'top left';
+      } else if (yCoord > 0.6 * canvasY) {
+        return 'bottom left';
+      } else {
+        return 'mid left';
+      }
+    } else if (xCoord > 0.6 * canvasX) {
+      if (yCoord < 0.4 * canvasY) {
+        return 'top right';
+      } else if (yCoord > 0.6 * canvasY) {
+        return 'bottom right';
+      } else {
+        return 'mid right';
+      }
+    } else {
+      if (yCoord < 0.4 * canvasY) {
+        return 'top middle';
+      } else if (yCoord > 0.6 * canvasY) {
+        return 'bottom middle';
+      } else {
+        return 'middle';
+      }
+    }
+  }
+
+  /* return which part of the canvas an object os present */
+  this.canvasLocator = function(object, arguments, canvasX, canvasY) {
+    var xCoord, yCoord;
+    var noRows = 10, noCols = 10;
+    var locX, locY;
+    var i = 0;
+    arguments = [].slice.call(arguments);
+    arguments.forEach(function(argument){
+      a = argument;
+
+      if (object.params[i].description.indexOf('x-coordinate') > -1) {
+        xCoord = a;
+      } else if (object.params[i].description.indexOf('y-coordinate') > -1) {
+        yCoord = a;
+      }
+      i++;
+    });
+
+    locX = Math.floor((xCoord / canvasX) * noRows);
+    locY = Math.floor((yCoord / canvasY) * noCols);
+    if (locX == noRows) {
+      locX = locX - 1;
+    }
+    if (locY == noCols) {
+      locY = locY - 1;
+    }
+    return ({
+      locX: locX,
+      locY: locY
+    });
+  }
+}
+
+BaseEntity.isParameter = false;

entities/backgroundEntity.js

@@ -0,0 +1,20 @@
+function BackgroundEntity(Interceptor,object,arguments, canvasX, canvasY) {
+  var self = this;
+  var passedArguments = arguments;
+  this.populate = function(Interceptor) {
+    Interceptor.bgColor = Interceptor.getColorName(passedArguments)['color'] + Interceptor.getColorName(passedArguments)['rgb'];
+  }
+
+  this.populate(Interceptor);
+}
+BackgroundEntity.handledNames = [
+  'background'
+]
+
+BackgroundEntity.handles = function(name) {
+  return (this.handledNames.indexOf(name) >= 0);
+}
+
+BackgroundEntity.isParameter = true;
+
+Registry.register(BackgroundEntity);

entities/fillEntity.js

@@ -0,0 +1,20 @@
+function FillEntity(Interceptor,shapeObject,arguments, canvasX, canvasY) {
+  var self = this;
+  var passedArguments = arguments;
+  this.populate = function(Interceptor) {
+    Interceptor.currentColor = Interceptor.getColorName(passedArguments)['color'] + Interceptor.getColorName(passedArguments)['rgb'];
+  }
+
+  this.populate(Interceptor);
+}
+FillEntity.handledNames = [
+  'fill'
+]
+
+FillEntity.handles = function(name) {
+  return (this.handledNames.indexOf(name) >= 0);
+}
+
+FillEntity.isParameter = true;
+
+Registry.register(FillEntity);

entities/shapeEntity.js

@@ -0,0 +1,70 @@
+function ShapeEntity(Interceptor,shapeObject,arguments, canvasX, canvasY) {
+  var self = this;
+  BaseEntity.call(self,shapeObject,arguments, canvasX, canvasY);
+  this.areaAbs = 0;
+  this.type = Interceptor.currentColor + ' ' + shapeObject.name;
+  this.area = 0;
+
+  this.populate = function(shapeObject, arguments, canvasX, canvasY) {
+    this.location = this.getLocation(shapeObject, arguments, canvasX, canvasY);
+    this.areaAbs = this.getObjectArea(shapeObject.name, arguments);
+    this.coordLoc = this.canvasLocator(shapeObject, arguments, canvasX, canvasY);
+    this.area = (this.getObjectArea(shapeObject.name, arguments)*100/(canvasX*canvasY)).toFixed(2) + '%';
+  }
+
+  this.getAttributes = function() {
+    return({
+      type: this.type,
+      location: this.location,
+      coordinates: this.coordinates,
+      area: this.area
+    })
+  };
+
+  /* return area of the shape */
+  this.getObjectArea = function(objectType, arguments) {
+    var objectArea = 0;
+    if (!objectType.localeCompare('arc')) {
+      objectArea = 0;
+    } else if (!objectType.localeCompare('ellipse')) {
+      objectArea = 3.14 * arguments[2] * arguments[3] / 4;
+    } else if (!objectType.localeCompare('line')) {
+      objectArea = 0;
+    } else if (!objectType.localeCompare('point')) {
+      objectArea = 0;
+    } else if (!objectType.localeCompare('quad')) {
+      // x1y2+x2y3+x3y4+x4y1−x2y1−x3y2−x4y3−x1y4
+      objectArea = (arguments[0] * arguments[1] + arguments[2] * arguments[3]
+        + arguments[4] * arguments[5] + arguments[6] * arguments[7])
+        - (arguments[2] * arguments[1] + arguments[4] * arguments[3]
+        + arguments[6] * arguments[5] + arguments[0] * arguments[7]);
+    } else if (!objectType.localeCompare('rect')) {
+      objectArea = arguments[2] * arguments[3];
+    } else if (!objectType.localeCompare('triangle')) {
+      objectArea = abs(arguments[0] * (arguments[3] - arguments[5]) + arguments[2] * (arguments[5] - arguments[1])
+      + arguments[4] * (arguments[1] - arguments[3]));
+      // Ax( By −	Cy) +	Bx(Cy −	Ay) +	Cx(Ay −	By )
+    }
+    return objectArea;
+  }
+
+  this.populate(shapeObject,arguments, canvasX, canvasY);
+}
+
+ShapeEntity.handledNames = [
+  'arc',
+  'ellipse',
+  'line',
+  'point',
+  'quad',
+  'rect',
+  'triangle'
+]
+
+ShapeEntity.handles = function(name) {
+  return (this.handledNames.indexOf(name) >= 0);
+}
+
+ShapeEntity.isParameter = false;
+
+Registry.register(ShapeEntity);

entities/textEntity.js

@@ -0,0 +1,32 @@
+function TextEntity(Interceptor,shapeObject,arguments, canvasX, canvasY) {
+  var self = this;
+  BaseEntity.call(self,shapeObject,arguments, canvasX, canvasY);
+  this.type = String(arguments[0]).substring(0, 20) + '(' + Interceptor.currentColor + ')';
+
+  this.populate = function(shapeObject, arguments, canvasX, canvasY) {
+    this.location = this.getLocation(shapeObject, arguments, canvasX, canvasY);
+    this.coordLoc = this.canvasLocator(shapeObject, arguments, canvasX, canvasY);
+  };
+
+  this.getAttributes = function() {
+    return({
+      type: this.type,
+      location: this.location,
+      coordinates: this.coordinates,
+    })
+  };
+
+  this.populate(shapeObject,arguments, canvasX, canvasY);
+}
+
+TextEntity.handledNames = [
+  'text'
+]
+
+TextEntity.handles = function(name) {
+  return (this.handledNames.indexOf(name) >= 0);
+}
+
+TextEntity.isParameter = false;
+
+Registry.register(TextEntity);