Add multiple canvas text outputs (#197)

* added grid

* add table to textoutput

* add all three outputs

* add shortcuts

* fix sound bug for triangle

* fix triangle bug - again

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -60,7 +60,7 @@ class KeyboardShortcutModal extends React.Component {
             <span className="keyboard-shortcut__command">
               {this.isMac ? 'Command + Shift + 1' : 'Control + Shift + 1'}
             </span>
-            <span>Turn On Text-based Canvas</span>
+            <span>Toggle Text-based Canvas</span>
           </li>
           <li className="keyboard-shortcut-item">
             <span className="keyboard-shortcut__command">

client/modules/IDE/components/Preferences.jsx

@@ -264,24 +264,46 @@ class Preferences extends React.Component {
           <div className="preference__options">
             <input
               type="radio"
-              onChange={() => this.props.setTextOutput(true)}
+              onChange={() => this.props.setTextOutput(1)}
               aria-label="text output on"
               name="text output"
               id="text-output-on"
               className="preference__radio-button"
               value="On"
-              checked={this.props.textOutput}
+              checked={Boolean(this.props.textOutput === 1)}
             />
-            <label htmlFor="text-output-on" className="preference__option">On</label>
+            <label htmlFor="text-output-on" className="preference__option">Plain-Text</label>
             <input
               type="radio"
-              onChange={() => this.props.setTextOutput(false)}
+              onChange={() => this.props.setTextOutput(2)}
+              aria-label="grid output on"
+              name="grid output"
+              id="grid-output-on"
+              className="preference__radio-button"
+              value="Grid On"
+              checked={Boolean(this.props.textOutput === 2)}
+            />
+            <label htmlFor="grid-output-on" className="preference__option">Table-Text</label>
+            <input
+              type="radio"
+              onChange={() => this.props.setTextOutput(3)}
+              aria-label="sound output on"
+              name="sound output"
+              id="sound-output-on"
+              className="preference__radio-button"
+              value="On"
+              checked={Boolean(this.props.textOutput === 3)}
+            />
+            <label htmlFor="sound-output-on" className="preference__option">Sound</label>
+            <input
+              type="radio"
+              onChange={() => this.props.setTextOutput(0)}
               aria-label="text output off"
               name="text output"
               id="text-output-off"
               className="preference__radio-button"
               value="Off"
-              checked={!this.props.textOutput}
+              checked={!Boolean(this.props.textOutput)}
             />
             <label htmlFor="text-output-off" className="preference__option">Off</label>
 
@@ -304,7 +326,7 @@ Preferences.propTypes = {
   setFontSize: PropTypes.func.isRequired,
   autosave: PropTypes.bool.isRequired,
   setAutosave: PropTypes.func.isRequired,
-  textOutput: PropTypes.bool.isRequired,
+  textOutput: PropTypes.number.isRequired,
   setTextOutput: PropTypes.func.isRequired,
   lintWarning: PropTypes.bool.isRequired,
   setLintWarning: PropTypes.func.isRequired,

client/modules/IDE/components/PreviewFrame.jsx

@@ -260,12 +260,21 @@ class PreviewFrame extends React.Component {
     htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2);
     htmlHeadContents += '<script type="text/javascript" src="/loop-protect.min.js"></script>\n';
 
-    if (this.props.textOutput || this.props.isTextOutputPlaying) {
-      htmlHeadContents += '<script src="/loadData.js"></script>\n';
-      htmlHeadContents += '<script src="/intercept-helper-functions.js"></script>\n';
-      htmlHeadContents += '<script src="/interceptor-functions.js"></script>\n';
-      htmlHeadContents += '<script src="/intercept-p5.js"></script>\n';
-      htmlHeadContents += '<script type="text/javascript" src="/ntc.min.js"></script>';
+    if (this.props.textOutput === 1 || this.props.isTextOutputPlaying) {
+      htmlHeadContents += '<script src="/interceptor/loadData.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor/intercept-helper-functions.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor/textInterceptor/interceptor-functions.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor/textInterceptor/intercept-p5.js"></script>\n';
+      htmlHeadContents += '<script type="text/javascript" src="/interceptor/ntc.min.js"></script>';
+    } else if (this.props.textOutput === 2 || this.props.isTextOutputPlaying) {
+      htmlHeadContents += '<script src="/interceptor/loadData.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor/intercept-helper-functions.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor/gridInterceptor/interceptor-functions.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor/gridInterceptor/intercept-p5.js"></script>\n';
+      htmlHeadContents += '<script type="text/javascript" src="/interceptor/ntc.min.js"></script>';
+    } else if (this.props.textOutput === 3 || this.props.isTextOutputPlaying) {
+      htmlHeadContents += '<script src="/interceptor/loadData.js"></script>\n';
+      htmlHeadContents += '<script src="/interceptor/soundInterceptor/intercept-p5.js"></script>\n';
     }
 
     htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
@@ -317,7 +326,7 @@ class PreviewFrame extends React.Component {
 PreviewFrame.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
   isTextOutputPlaying: PropTypes.bool.isRequired,
-  textOutput: PropTypes.bool.isRequired,
+  textOutput: PropTypes.number.isRequired,
   content: PropTypes.string,
   htmlFile: PropTypes.shape({
     content: PropTypes.string.isRequired

client/modules/IDE/components/TextOutput.jsx

@@ -27,10 +27,17 @@ class TextOutput extends React.Component {
         <table
           tabIndex="0"
           role="main"
-          id="textOutput-content-details"
+          id="textOutput-content-table"
           aria-label="text output details"
         >
         </table>
+        <div
+          tabIndex="0"
+          role="main"
+          id="textOutput-content-details"
+          aria-label="text output details"
+        >
+        </div>
       </section>
     );
   }

client/modules/IDE/pages/IDEView.jsx

@@ -169,10 +169,15 @@ class IDEView extends React.Component {
       this.props.startSketchAndRefresh();
     } else if (e.keyCode === 50 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
       e.preventDefault();
-      this.props.setTextOutput(false);
+      this.props.setTextOutput(0);
     } else if (e.keyCode === 49 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
       e.preventDefault();
-      this.props.setTextOutput(true);
+      if (this.props.preferences.textOutput === 3) {
+        this.props.preferences.textOutput = 1;
+      } else {
+        this.props.preferences.textOutput += 1;
+      }
+      this.props.setTextOutput(this.props.preferences.textOutput);
     }
   }
 
@@ -534,7 +539,7 @@ IDEView.propTypes = {
     isTabIndent: PropTypes.bool.isRequired,
     autosave: PropTypes.bool.isRequired,
     lintWarning: PropTypes.bool.isRequired,
-    textOutput: PropTypes.bool.isRequired,
+    textOutput: PropTypes.number.isRequired,
     theme: PropTypes.string.isRequired,
     autorefresh: PropTypes.bool.isRequired
   }).isRequired,

client/modules/IDE/reducers/preferences.js

@@ -6,7 +6,7 @@ const initialState = {
   isTabIndent: true,
   autosave: true,
   lintWarning: false,
-  textOutput: false,
+  textOutput: 0,
   theme: 'light',
   autorefresh: false
 };

server/models/user.js

@@ -17,7 +17,7 @@ const userSchema = new Schema({
     isTabIndent: { type: Boolean, default: false },
     autosave: { type: Boolean, default: true },
     lintWarning: { type: Boolean, default: false },
-    textOutput: { type: Boolean, default: false },
+    textOutput: { type: Number, default: 0 },
     theme: { type: String, default: 'light' },
     autorefresh: { type: Boolean, default: false }
   }

static/interceptor/gridInterceptor/intercept-p5.js

@@ -0,0 +1,60 @@
+var canvasLocation ='';
+var shadowDOMElement;
+
+funcNames = allData["classitems"].map(function(x){
+  if(x["overloads"]) {
+    tempParam = x["overloads"][0]["params"];
+  } else {
+    tempParam = x["params"];
+  }
+   return {
+    name: x["name"],
+    params: tempParam,
+    class: x["class"],
+    module: x["module"],
+    submodule: x["submodule"]
+  };
+});
+
+funcNames = funcNames.filter(function(x) {
+  var className = x["class"];
+  return (x["name"] && x["params"] && (className==='p5'));
+})
+
+
+funcNames.forEach(function(x){
+  var document = parent.document;
+  var originalFunc = p5.prototype[x.name];
+  p5.prototype[x.name] = function(){
+    orgArg = arguments;
+    if(frameCount == 0) { //for setup
+      document.getElementById('textOutput-content-table').innerHTML = '';
+      document.getElementById('textOutput-content-details').innerHTML = '';
+      document.getElementById('textOutput-content-summary').innerHTML = '';
+      Interceptor.createShadowDOMElement(document);
+      Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject,  document.getElementById('textOutput-content-details'),false);
+      Interceptor.populateObjectDetails(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'),document.getElementById('textOutput-content-details'));
+      var table = document.getElementById('textOutput-content-details');
+      Interceptor.populateTable(table,Interceptor.setupObject);
+    }
+
+    else if(frameCount%50 == 0 ) {
+      Interceptor.drawObject = Interceptor.populateObject(x,arguments, Interceptor.drawObject, document.getElementById('textOutput-content-details'),true);
+
+      Interceptor.isCleared = false;
+    }
+    //reset some of the variables
+    else if(frameCount%50 == 1 ) {
+      if(!Interceptor.isCleared){
+        var cells = document.getElementsByClassName('textOutput-cell-content');
+        for( i =0;i<cells.length;i++) {
+          cells[i].innerHTML = '';
+        }
+        Interceptor.populateObjectDetails(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'),document.getElementById('textOutput-content-details'));
+        Interceptor.populateTable(Interceptor.setupObject.objectArray.concat(Interceptor.drawObject.objectArray),document);
+      }
+      Interceptor.drawObject = Interceptor.clearVariables(Interceptor.drawObject);
+    }
+    return originalFunc.apply(this,arguments);
+  }
+});

static/interceptor/gridInterceptor/interceptor-functions.js

@@ -0,0 +1,349 @@
+var Interceptor = {
+  prevTotalCount :0,
+  totalCount : 0,
+  currentColor : 'white',
+  objectArea : 0,
+  objectDescription : '',
+  bgColor : 'white',
+  coordinates : [],
+  canvasDetails : {
+    width : 0,
+    height: 0
+  },
+  setupObject : {
+    objectArray : [],
+    objectCount : 0,
+    objectTypeCount : {}
+  },
+  drawObject : {
+    objectArray : [],
+    objectCount : 0,
+    objectTypeCount : {}
+  },
+  isCleared : false,
+  noRows: 10,
+  noCols: 10,
+  coordLoc : {},
+
+  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 n_match  = ntc.name(color);
+      return n_match[1];
+    }
+    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) {
+          return 'black';
+        }
+        else if(arguments[0]>240) {
+          return 'white';
+        }
+        else {
+          return 'grey';
+        }
+      }
+      else if(!(typeof(arguments[0])).localeCompare("string")) {
+        if(!arguments[0].charAt(0).localeCompare('#')) {
+          //if user has entered a hex color
+          var n_match = ntc.name(arguments[0]);
+          return n_match[1];
+        }
+        else {
+          return arguments[0];
+        }
+      }
+    }
+  },
+
+  /* return which part of the canvas an object os present */
+  canvasAreaLocation : function(x,arguments,canvasX,canvasY){
+
+    var x_loc,y_loc;
+
+    for(var i=0;i<arguments.length;i++) {
+      a = arguments[i];
+      if(x.params[i].description.indexOf("x-coordinate")>-1) {
+        x_loc = a;
+      }
+      else if(x.params[i].description.indexOf("y-coordinate")>-1) {
+        y_loc = a;
+      }
+    }
+
+    if(x_loc<0.4*canvasX) {
+      if(y_loc<0.4*canvasY) {
+        return 'top left';
+      }
+      else if(y_loc>0.6*canvasY) {
+        return 'bottom left';
+      }
+      else {
+        return 'mid left';
+      }
+    }
+    else if(x_loc>0.6*canvasX) {
+      if(y_loc<0.4*canvasY) {
+        return 'top right';
+      }
+      else if(y_loc>0.6*canvasY) {
+        return 'bottom right';
+      }
+      else {
+        return 'mid right';
+      }
+    }
+    else {
+      if(y_loc<0.4*canvasY) {
+        return 'top middle';
+      }
+      else if(y_loc>0.6*canvasY) {
+        return 'bottom middle';
+      }
+      else {
+        return 'middle';
+      }
+    }
+  },
+
+  /* return which part of the canvas an object os present */
+  canvasLocator : function(x,arguments,canvasX,canvasY){
+    var x_loc, y_loc;
+    var locX, locY;
+    for(var i=0;i<arguments.length;i++) {
+      a = arguments[i];
+      if(x.params[i].description.indexOf("x-coordinate")>-1) {
+        x_loc = a;
+      }
+      else if(x.params[i].description.indexOf("y-coordinate")>-1) {
+        y_loc = a;
+      }
+    }
+
+    locX = Math.floor((x_loc/canvasX)*this.noRows);
+    locY = Math.floor((y_loc/canvasY)*this.noCols);
+    if( locX == this.noRows) {
+      locX = locX - 1;
+    }
+    if( locY == this.noCols) {
+      locY = locY - 1;
+    }
+    return({
+      locX: locX,
+      locY: locY
+    })
+
+  },
+
+  clearVariables : function(object) {
+    object.objectTypeCount = {};
+    object.objectCount = 0;
+    this.isCleared = true;
+    return object;
+  },
+
+  createShadowDOMElement : function(document) {
+      var contentTable = document.getElementById('textOutput-content-table');
+      for(var i=0; i<this.noRows; i++) {
+        var row = document.createElement('tr');
+
+        for(var j=0; j<this.noCols; j++) {
+          var col = document.createElement('td');
+          col.className = "textOutput-cell-content";
+          col.innerHTML = 'test';
+          row.appendChild(col);
+        }
+        contentTable.appendChild(row);
+      }
+      shadowDOMElement = document.getElementById('textOutput-content');
+
+    },
+
+  populateObject : function(x,arguments, object ,table, isDraw) {
+    objectCount = object.objectCount;
+    objectArray = object.objectArray;
+    objectTypeCount = object.objectTypeCount;
+    if(!isDraw) {
+      //check for special function in setup -> createCanvas
+      if(!x.name.localeCompare('createCanvas')) {
+        this.canvasDetails.width = arguments[0];
+        this.canvasDetails.height = arguments[1];
+      }
+    }
+    /* Here - most of the functions are generalised, but some need specific outputs */
+
+    /* for `fill` function */
+    if(!x.name.localeCompare('fill')) {
+      this.currentColor = this.getColorName(arguments);
+    }
+
+    /* for `background` function */
+    else if(!x.name.localeCompare('background')) {
+      this.bgColor = this.getColorName(arguments);
+    }
+
+    /* for 2D functions and text function */
+    else if(!x.module.localeCompare('Shape') || !x.module.localeCompare('Typography') &&((!x.submodule)||(x.submodule.localeCompare('Attributes')!=0)) ){
+      this.objectArea = this.getObjectArea(x.name, arguments);
+      var canvasLocation = this.canvasAreaLocation(x, arguments ,width,height);
+      this.coordLoc = this.canvasLocator(x,arguments,width,height);
+
+      /* in case of text, the description should be what is in the content */
+      if(x.name.localeCompare('text')){
+        this.objectDescription = x.name;
+      }
+      else {
+        this.objectDescription = arguments[0].substring(0,20);
+      }
+      objectArray[objectCount] = {
+        'type' : this.currentColor + ' - ' + this.objectDescription ,
+        'location': canvasLocation, //top left vs top right etc
+        'coordLoc': this.coordLoc, // 3,3 vs 5,3 etc
+        'area': this.objectArea,
+        'co-ordinates': this.coordinates // coordinates of where the objects are drawn
+      };
+      this.coordinates = [];
+
+
+      /*add the object(shape/text) parameters in objectArray */
+      for(var i=0;i<arguments.length;i++) {
+        if(!(typeof(arguments[i])).localeCompare('number')){
+          arguments[i] = round(arguments[i]);
+        }
+        if(x.params[i].description.indexOf("x-coordinate")>-1) {
+            objectArray[objectCount]['co-ordinates'].push(arguments[i]+'x')
+        }
+        else if(x.params[i].description.indexOf("y-coordinate")>-1) {
+          objectArray[objectCount]['co-ordinates'].push(arguments[i]+'y')
+        }
+        else{
+          objectArray[objectCount][x.params[i].description]=arguments[i];
+        }
+
+      }
+      if(objectTypeCount[x.name]) {
+        objectTypeCount[x.name]++;
+      }
+      else {
+        objectTypeCount[x.name]=1;
+      }
+      objectCount++;
+    }
+    return ({
+      objectCount : objectCount,
+      objectArray : objectArray,
+      objectTypeCount : objectTypeCount
+    });
+  },
+
+  populateTable : function(objectArray,document_passed) {
+    if(this.totalCount<100) {
+    for(var i=0;i<objectArray.length;i++) {
+      var cellLoc = objectArray[i].coordLoc.locY*this.noRows + objectArray[i].coordLoc.locX;
+      //add link in table
+      var cellLink = document_passed.createElement('a');
+      cellLink.innerHTML += objectArray[i].type;
+      var objectId = '#object'+i;
+      cellLink.setAttribute('href',objectId);
+      document_passed.getElementsByClassName('textOutput-cell-content')[cellLoc].appendChild(cellLink);
+      }
+    }
+  },
+
+  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]));
+      //A	x 	 (	 B	y 	−	 C	y 	) 	+	 B	x 	 (	 C	y 	−	 A	y 	) 	+	 C	x 	 (	 A	y 	−	 B	y 	)
+    }
+    return objectArea;
+  },
+
+  /* helper function to populate object Details */
+  populateObjectDetails : function(object1, object2, elementSummary, elementDetail) {
+    this.prevTotalCount = this.totalCount;
+    this.totalCount = object1.objectCount + object2.objectCount;
+    elementSummary.innerHTML = '';
+    elementDetail.innerHTML = '';
+    elementSummary.innerHTML +=  this.bgColor + ' canvas is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' of area ' + this.canvasDetails.width*this.canvasDetails.height;
+    if(this.totalCount > 1 ) {
+      elementSummary.innerHTML += ' Contains ' + this.totalCount + ' objects - ';
+    }
+    else {
+      elementSummary.innerHTML += ' Contains ' + this.totalCount + ' object - ';
+    }
+
+
+    if(object2.objectCount>0 || object1.objectCount>0 ) {
+
+      totObjectTypeCount = MergeObjRecursive(object1.objectTypeCount, object2.objectTypeCount);
+      var keys = Object.keys(totObjectTypeCount);
+      for(var i=0;i<keys.length;i++) {
+        elementSummary.innerHTML += totObjectTypeCount[keys[i]] + ' ' + keys[i] + ' ';
+      }
+
+      var objectList = document.createElement('ul');
+
+      if(this.totalCount<100){
+        for(var i=0; i <object1.objectArray.length; i++) {
+          var objectListItem = document.createElement('li');
+          objectListItem.id = 'object' + i;
+          objectList.appendChild(objectListItem);
+          var objKeys = Object.keys(object1.objectArray[i]);
+          for(var j=0;j<objKeys.length;j++) {
+            if(objKeys[j].localeCompare('coordLoc'))
+            {
+              if(objKeys[j].localeCompare('type')){
+                objectListItem.innerHTML += objKeys[j] + ' = ' + object1.objectArray[i][objKeys[j]] + ' ';
+              }
+              else {
+                objectListItem.innerHTML += object1.objectArray[i][objKeys[j]] + ' ';
+              }
+            }
+
+          }
+        }
+        for(var i=0; i <object2.objectArray.length; i++) {
+          var objectListItem = document.createElement('li');
+          objectListItem.id = 'object' + (object1.objectArray.length + i);
+          objectList.appendChild(objectListItem);
+          var objKeys = Object.keys(object2.objectArray[i]);
+          for(var j=0;j<objKeys.length;j++) {
+            if(objKeys[j].localeCompare('coordLoc'))
+            {
+              if(objKeys[j].localeCompare('type')){
+                objectListItem.innerHTML += objKeys[j] + ' = ' + object2.objectArray[i][objKeys[j]] + ' ';
+              }
+              else {
+                objectListItem.innerHTML += object2.objectArray[i][objKeys[j]] + ' ';
+              }
+            }
+          }
+        }
+        elementDetail.appendChild(objectList);
+      }
+
+    }
+  }
+};

static/interceptor/loadData.js

@@ -13,6 +13,6 @@ function fetchJSONFile(path, callback) {
     httpRequest.send();
 }
 
-fetchJSONFile('/data.min.json', function(data){
+fetchJSONFile('/interceptor/data.min.json', function(data){
   allData = data;
 });

static/interceptor/soundInterceptor/intercept-p5.js

@@ -0,0 +1,130 @@
+var textOutputElement;
+var canvasLocation ='';
+var maxFreq = 1000;
+var minFreq = 250;
+var currFreq, currVol, currPan;
+var xPosDiff=0, yPosDiff=0;
+
+//initialise parameters
+var objectCount = 0;
+var currFrame = 2;
+var prevFrame = 2;
+var objects = [];
+
+funcNames = allData["classitems"].map(function(x){
+  if(x["overloads"]) {
+    tempParam = x["overloads"][0]["params"];
+  } else {
+    tempParam = x["params"];
+  }
+   return {
+    name: x["name"],
+    params: tempParam,
+    class: x["class"],
+    module: x["module"],
+    submodule: x["submodule"]
+  };
+});
+
+// create web audio api context
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// create Oscillator node
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var panNode = audioCtx.createStereoPanner();
+
+funcNames = funcNames.filter(function(x) {
+  var className = x["class"];
+  return (x["name"] && x["params"] && (className==='p5'));
+})
+
+funcNames.forEach(function(x){
+  var originalFunc = p5.prototype[x.name];
+  p5.prototype[x.name] = function(){
+    orgArg = arguments;
+    if(frameCount === 0) {
+      parent.document.getElementById('textOutput-content-table').innerHTML = '';
+      parent.document.getElementById('textOutput-content-details').innerHTML = '';
+      parent.document.getElementById('textOutput-content-summary').innerHTML = '';
+    }
+    if(frameCount == 1 && (x.module.localeCompare('Shape') === 0)) {
+      for(var i =0; i < x.params.length; i++) {
+        if(x.params[i].description.indexOf('x-coordinate')>-1){
+          xPosPrev = arguments[i];
+          xPosCurr = arguments[i];
+        }
+        if(x.params[i].description.indexOf('y-coordinate')>-1){
+          yPosPrev = arguments[i];
+          yPosCurr = arguments[i];
+        }
+      }
+    }
+    // Pull out only the shapes in draw()
+    else if(frameCount > 1 && (frameCount%1 == 0) && (x.module.localeCompare('Shape') === 0)) {
+      if(frameCount != currFrame) {
+        currFrame ++;
+        objectCount = 0;
+      }
+      objectCount ++;
+
+      if(!objects[objectCount-1]){
+          objects[objectCount-1] = new Object({
+          xPosCurr:0,
+          xPosDiff:0,
+          xPosPrev:0,
+          yPosCurr:0,
+          yPosDiff:0,
+          yPosPrev:0
+        });
+      }
+      //pull out only the x coord values and compare with prev value
+      for(var i =0; i < x.params.length; i++) {
+        if(x.params[i].description.indexOf('y-coordinate')>-1){
+          objects[objectCount-1].yPosCurr = arguments[i];
+          objects[objectCount-1].yPosDiff = objects[objectCount-1].yPosCurr - objects[objectCount-1].yPosPrev;
+          objects[objectCount-1].yPosPrev = objects[objectCount-1].yPosCurr;
+          break;
+        }
+      }
+
+      for(var i =0; i < x.params.length; i++) {
+        if(x.params[i].description.indexOf('x-coordinate')>-1){
+          objects[objectCount-1].xPosCurr = arguments[i];
+          objects[objectCount-1].xPosDiff = objects[objectCount-1].xPosCurr - objects[objectCount-1].xPosPrev;
+          objects[objectCount-1].xPosPrev = objects[objectCount-1].xPosCurr;
+          break;
+        }
+      }
+
+      if(abs(objects[objectCount-1].xPosDiff>0)||abs(objects[objectCount-1].yPosDiff>0))
+      {
+
+        currNote = (1-objects[objectCount-1].yPosCurr/height)*(12); // mapping hieghts to notes from 1-100
+        //fn = f0 * (a)n
+        currLogFreq = 440 * Math.pow(Math.pow(2,(1/12)),currNote);
+        currVol = 0.4;
+        x_coord = frameCount%10 - 5;
+        currVol = 2*objectCount*Math.exp(-((x_coord+2*objectCount)*(x_coord+2*objectCount)));
+        currPan = (objects[objectCount-1].xPosCurr/width)*2 - 1;
+        oscillatorNode.frequency.value = currLogFreq;
+        gainNode.gain.value = currVol;
+        panNode.pan.value = currPan;
+      }
+      else {
+        gainNode.gain.value = 0;
+      }
+    }
+  return originalFunc.apply(this,arguments);
+  }
+});
+
+window.onload = function() {
+  oscillatorNode.type = 'sine';
+  oscillatorNode.frequency.value = 440; // value in hertz
+  oscillatorNode.start();
+  oscillatorNode.connect(gainNode);
+  gainNode.connect(panNode);
+  panNode.connect(audioCtx.destination);
+  gainNode.gain.value = 0;
+}

static/interceptor/textInterceptor/intercept-p5.js

@@ -1,4 +1,3 @@
-var textOutputElement;
 var canvasLocation ='';
 
 funcNames = allData["classitems"].map(function(x){
@@ -28,10 +27,12 @@ funcNames.forEach(function(x){
   p5.prototype[x.name] = function(){
     orgArg = arguments;
     if(frameCount == 0) { //for setup
-      Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject,  document.getElementById('textOutput-content-details'),false);
+      document.getElementById('textOutput-content-table').innerHTML = '';
+      document.getElementById('textOutput-content-details').innerHTML = '';
+      document.getElementById('textOutput-content-summary').innerHTML = '';
+      Interceptor.setupObject = Interceptor.populateObject(x,arguments, Interceptor.setupObject,  document.getElementById('textOutput-content-table'),false);
       Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
-      var table = document.getElementById('textOutput-content-details');
-      // table.innerHTML = '';
+      var table = document.getElementById('textOutput-content-table');
       Interceptor.populateTable(table,Interceptor.setupObject.objectArray);
     }
 
@@ -42,7 +43,7 @@ funcNames.forEach(function(x){
     //reset some of the variables
     else if(frameCount%100 == 1 ) {
       if(!Interceptor.isCleared){
-        var table = document.getElementById('textOutput-content-details');
+        var table = document.getElementById('textOutput-content-table');
         Interceptor.getSummary(Interceptor.setupObject,Interceptor.drawObject,document.getElementById('textOutput-content-summary'));
         Interceptor.populateTable(table,Interceptor.setupObject.objectArray.concat(Interceptor.drawObject.objectArray));
       }

static/interceptor/textInterceptor/interceptor-functions.js

@@ -220,7 +220,6 @@ var Interceptor = {
 
           else{ // ie - there are fewer cols now
             for(var i =0;i<properties.length;i++) {
-              // console.log(properties[i].localeCompare('type'));
               if(properties[i].localeCompare('type')) {
                 row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
               }