Merge branch 'master' into modules

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)
+
+
+

entities/_baseEntity.js

@@ -18,16 +18,17 @@ function BaseEntity(Interceptor,object,arguments, canvasX, canvasY) {
     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;
-        this.coordinates += a + 'x,';
+        that.coordinates += a + 'x,';
       } else if (object.params[i].description.indexOf('y-coordinate') > -1) {
         yCoord = a;
-        this.coordinates += a + 'y';
+        that.coordinates += a + 'y';
       }
       i++;
     });

gridInterceptor/interceptorFunctions.js

@@ -11,6 +11,7 @@ gridInterceptor.prototype = Object.create(baseInterceptor.prototype);
 
 gridInterceptor.prototype.clearVariables = function(object) {
   object.objectTypeCount = {};
+  object.objectArray = [];
   object.objectCount = 0;
   this.isCleared = true;
   return object;

gridInterceptor/interceptorP5.js

@@ -48,6 +48,7 @@ funcNames.forEach(function(x) {
     } else if (frameCount % 20 == 1) { // reset some of the variables
       if (!gridInterceptor.isCleared) {
         var cells = document.getElementsByClassName('gridOutput-cell-content');
+
         cells = [].slice.call(cells);
         cells.forEach(function(cell){
           cell.innerHTML = '';

soundInterceptor/interceptorP5.js

@@ -25,9 +25,9 @@ funcNames = allData['classitems'].map(function(x) {
 var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
 
 // create Oscillator node
-var oscillatorNode = audioCtx.createOscillator();
-var gainNode = audioCtx.createGain();
-var panNode = audioCtx.createStereoPanner();
+var oscillatorNodes = [];
+var gainNodes = [];
+var panNodes = [];
 
 funcNames = funcNames.filter(function(x) {
   var className = x['class'];
@@ -55,12 +55,29 @@ funcNames.forEach(function(x) {
       });
     } else if (frameCount > 1 && (frameCount % 1 == 0) && (x.module.localeCompare('Shape') === 0)) {
       // Pull out only the shapes in draw()
-      if (frameCount != currFrame) {
+      if (frameCount !== currFrame) {
         currFrame++;
         objectCount = 0;
       }
       objectCount++;
 
+      if(oscillatorNodes[objectCount - 1]){
+
+      } else {
+        console.log('creating');
+        let index = objectCount - 1;
+        oscillatorNodes[index] = audioCtx.createOscillator();
+        gainNodes[index] = audioCtx.createGain();
+        panNodes[index] = audioCtx.createStereoPanner();
+        oscillatorNodes[index].type = 'sine';
+        oscillatorNodes[index].frequency.value = baseFreq; // value in hertz
+        oscillatorNodes[index].start();
+        oscillatorNodes[index].connect(gainNodes[index]);
+        gainNodes[index].connect(panNodes[index]);
+        panNodes[index].connect(audioCtx.destination);
+        gainNodes[index].gain.value = 0.1;
+      }
+
       if (!objects[objectCount - 1]) {
         objects[objectCount - 1] = new Object({
           xPosCurr: 0,
@@ -101,23 +118,14 @@ funcNames.forEach(function(x) {
         xCoord = frameCount % 16 - 8;
         currVol = 2 * objectCount * Math.exp(-((xCoord + 2 * objectCount) * (xCoord + 2 * objectCount)));
         currPan = (objects[objectCount - 1].xPosCurr / width) * 2 - 1;
-        oscillatorNode.frequency.value = currLogFreq;
-        gainNode.gain.value = currVol;
-        panNode.pan.value = currPan;
+        // console.log(objectCount + ' - ' + currPan);
+        oscillatorNodes[objectCount - 1].frequency.value = currLogFreq;
+        gainNodes[objectCount - 1].gain.value = currVol;
+        panNodes[objectCount - 1].pan.value = currPan;
       } else {
-        gainNode.gain.value = 0;
+        gainNodes[objectCount - 1].gain.value = 0;
       }
     }
     return originalFunc.apply(this, arguments);
   };
 });
-
-window.onload = function() {
-  oscillatorNode.type = 'sine';
-  oscillatorNode.frequency.value = baseFreq; // value in hertz
-  oscillatorNode.start();
-  oscillatorNode.connect(gainNode);
-  gainNode.connect(panNode);
-  panNode.connect(audioCtx.destination);
-  gainNode.gain.value = 0;
-};

textInterceptor/interceptorFunctions.js

@@ -6,6 +6,7 @@ textInterceptor.prototype = Object.create(baseInterceptor.prototype);
 
 textInterceptor.prototype.clearVariables = function(object) {
   object.objectTypeCount = {};
+  object.objectArray = [];
   object.objectCount = 0;
   this.isCleared = true;
   return object;