r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Move the interceptor code to a git module (#200)

Browse source 
* add p5 interceptor submodule

* update package

* remoce interceptor

* update interceptor;

* merge scripts

* change postinstall script
This commit is contained in:
Mathura MG 2016-11-23 13:35:12 -05:00 committed by Cassie Tarakajian
parent af3cb60ce1
commit bd88e86ecc
14 changed files with 25 additions and 1061 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.gitmodules vendored Normal file
View file

@ -0,0 +1,4 @@
[submodule "static/p5-interceptor"]
path = static/p5-interceptor
url = git://github.com/MathuraMG/p5-interceptor.git
branch = master

30
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -154,28 +154,31 @@ class PreviewFrame extends React.Component {
'/loop-protect.min.js', '/loop-protect.min.js',
'/hijackConsole.js' '/hijackConsole.js'
]; ];
if (this.props.isTextOutputPlaying) { if (this.props.isTextOutputPlaying || (this.props.textOutput !== 0 && this.props.isPlaying)) {
let interceptorScripts = []; let interceptorScripts = [];
if (this.props.textOutput === 0) {
this.props.setTextOutput(1);
}
if (this.props.textOutput === 1) { if (this.props.textOutput === 1) {
interceptorScripts = [ interceptorScripts = [
'/interceptor/loadData.js', '/p5-interceptor/loadData.js',
'/interceptor/intercept-helper-functions.js', '/p5-interceptor/intercept-helper-functions.js',
'/interceptor/textInterceptor/interceptor-functions.js', '/p5-interceptor/textInterceptor/interceptor-functions.js',
'/interceptor/textInterceptor/intercept-p5.js', '/p5-interceptor/textInterceptor/intercept-p5.js',
'/interceptor/ntc.min.js' '/p5-interceptor/ntc.min.js'
]; ];
} else if (this.props.textOutput === 2) { } else if (this.props.textOutput === 2) {
interceptorScripts = [ interceptorScripts = [
'/interceptor/loadData.js', '/p5-interceptor/loadData.js',
'/interceptor/intercept-helper-functions.js', '/p5-interceptor/intercept-helper-functions.js',
'/interceptor/gridInterceptor/interceptor-functions.js', '/p5-interceptor/gridInterceptor/interceptor-functions.js',
'/interceptor/gridInterceptor/intercept-p5.js', '/p5-interceptor/gridInterceptor/intercept-p5.js',
'/interceptor/ntc.min.js' '/p5-interceptor/ntc.min.js'
]; ];
} else if (this.props.textOutput === 3) { } else if (this.props.textOutput === 3) {
interceptorScripts = [ interceptorScripts = [
'/interceptor/loadData.js', '/p5-interceptor/loadData.js',
'/interceptor/soundInterceptor/intercept-p5.js' '/p5-interceptor/soundInterceptor/intercept-p5.js'
]; ];
} }
scriptsToInject = scriptsToInject.concat(interceptorScripts); scriptsToInject = scriptsToInject.concat(interceptorScripts);
@ -351,6 +354,7 @@ PreviewFrame.propTypes = {
isPlaying: PropTypes.bool.isRequired, isPlaying: PropTypes.bool.isRequired,
isTextOutputPlaying: PropTypes.bool.isRequired, isTextOutputPlaying: PropTypes.bool.isRequired,
textOutput: PropTypes.number.isRequired, textOutput: PropTypes.number.isRequired,
setTextOutput: PropTypes.func.isRequired,
content: PropTypes.string, content: PropTypes.string,
htmlFile: PropTypes.shape({ htmlFile: PropTypes.shape({
content: PropTypes.string.isRequired content: PropTypes.string.isRequired

1
client/modules/IDE/pages/IDEView.jsx
View file

@ -349,6 +349,7 @@ class IDEView extends React.Component {
isPlaying={this.props.ide.isPlaying} isPlaying={this.props.ide.isPlaying}
isTextOutputPlaying={this.props.ide.isTextOutputPlaying} isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
textOutput={this.props.preferences.textOutput} textOutput={this.props.preferences.textOutput}
setTextOutput={this.props.setTextOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent} dispatchConsoleEvent={this.props.dispatchConsoleEvent}
autorefresh={this.props.preferences.autorefresh} autorefresh={this.props.preferences.autorefresh}
previewIsRefreshing={this.props.ide.previewIsRefreshing} previewIsRefreshing={this.props.ide.previewIsRefreshing}

3
package.json
View file

@ -7,7 +7,8 @@
"start:prod": "NODE_ENV=production node index.js", "start:prod": "NODE_ENV=production node index.js",
"lint": "eslint client server", "lint": "eslint client server",
"build": "NODE_ENV=production webpack --config webpack.config.prod.js --progress", "build": "NODE_ENV=production webpack --config webpack.config.prod.js --progress",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1",
"postinstall" : "git submodule update --remote --recursive"
}, },
"main": "index.js", "main": "index.js",
"author": "Cassie Tarakajian", "author": "Cassie Tarakajian",

1
static/interceptor/data.min.json
View file

File diff suppressed because one or more lines are too long

60
static/interceptor/gridInterceptor/intercept-p5.js
View file

@ -1,60 +0,0 @@
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);
}
});

349
static/interceptor/gridInterceptor/interceptor-functions.js
View file

@ -1,349 +0,0 @@
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);
}
}
}
};

47
static/interceptor/intercept-helper-functions.js
View file

@ -1,47 +0,0 @@
String.prototype.paddingLeft = function (paddingValue) {
return String(paddingValue + this).slice(-paddingValue.length);
};
function MergeObjRecursive(obj1, obj2) {
var obj3 = {};
for(p in obj1) {
obj3[p] = obj1[p];
}
for(p in obj2) {
if(Object.keys(obj3).indexOf(p)<0){
obj3[p] = obj2[p];
}
else {
obj3[p] = obj3[p] + obj2[p];
}
}
return obj3;
}
if(Array.prototype.equals)
// attach the .equals method to Array's prototype to call it on any array
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l=this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
}
// Hide method from for-in loops
Object.defineProperty(Array.prototype, "equals", {enumerable: false});

18
static/interceptor/loadData.js
View file

@ -1,18 +0,0 @@
var allData;
function fetchJSONFile(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
}
}
};
httpRequest.open('GET', path,false);
httpRequest.send();
}
fetchJSONFile('/interceptor/data.min.json', function(data){
allData = data;
});

2
static/interceptor/ntc.min.js vendored
View file

File diff suppressed because one or more lines are too long

130
static/interceptor/soundInterceptor/intercept-p5.js
View file

@ -1,130 +0,0 @@
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;
}

54
static/interceptor/textInterceptor/intercept-p5.js
View file

@ -1,54 +0,0 @@
var canvasLocation ='';
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.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-table');
Interceptor.populateTable(table,Interceptor.setupObject.objectArray);
}
else if(frameCount%100 == 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%100 == 1 ) {
if(!Interceptor.isCleared){
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));
}
Interceptor.drawObject = Interceptor.clearVariables(Interceptor.drawObject);
}
return originalFunc.apply(this,arguments);
}
});

386
static/interceptor/textInterceptor/interceptor-functions.js
View file

@ -1,386 +0,0 @@
var Interceptor = {
prevTotalCount :0,
totalCount : 0,
currentColor : 'white',
bgColor : 'white',
objectArea : 0,
coordinates : [],
objectDescription : '',
canvasDetails : {
width : 0,
height: 0
},
setupObject : {
objectArray : [],
objectCount : 0,
objectTypeCount : {}
},
drawObject : {
objectArray : [],
objectCount : 0,
objectTypeCount : {}
},
isCleared : false,
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';
}
}
},
clearVariables : function(object) {
object.objectTypeCount = {};
object.objectCount = 0;
this.isCleared = true;
return object;
},
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];
}
}
//check for speacial functions in general -> background/fill
if(!x.name.localeCompare('fill')) {
this.currentColor = this.getColorName(arguments);
}
else if(!x.name.localeCompare('background')) {
this.bgColor = this.getColorName(arguments);
}
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);
if(x.name.localeCompare('text')){
this.objectDescription = x.name;
}
else {
this.objectDescription = String(arguments[0]).substring(0,20);
}
this.coordinates = [];
objectArray[objectCount] = {
'type' : this.currentColor + ' colored ' + this.objectDescription ,
'location': canvasLocation,
'area': this.objectArea,
'co-ordinates': this.coordinates
};
//make edits if it is a text object
if(!x.name.localeCompare('text')){
objectArray[objectCount]['type'] = this.objectDescription;
objectArray[objectCount]['color of text'] = this.currentColor;
}
//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;
}
//creating the table to contain the object(shape/text) details
objectCount++;
}
return ({
objectCount : objectCount,
objectArray : objectArray,
objectTypeCount : objectTypeCount
});
},
populateTable : function(table, objectArray) {
if(this.totalCount<100) {
if(this.prevTotalCount > this.totalCount) {
for(var j =0;j<this.totalCount;j++) {
var row = table.children[j];
var tempCol = row.children.length;
var properties = Object.keys(objectArray[j]);
if(tempCol<properties.length){ //ie - there are more cols now
for(var i =0;i<tempCol;i++) {
if(properties[i].localeCompare('type')) {
row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
}
else {
row.children[i].innerHTML = objectArray[j][properties[i]];
}
}
for(var i=tempCol;i < properties.length;i++) {
var col = document.createElement('td');
if(properties[i].localeCompare('type')) {
col.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
}
else {
col.children[i].innerHTML = objectArray[j][properties[i]];
}
row.appendChild(col);
}
}
else{ // ie - there are fewer cols now
for(var i =0;i<properties.length;i++) {
if(properties[i].localeCompare('type')) {
row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
}
else {
row.children[i].innerHTML = objectArray[j][properties[i]];
}
}
for(var i=properties.length;i<tempCol;i++) {
var tempCol = row.children[i];
row.removeChild(tempCol);
}
}
}
for(var j = this.totalCount;j<this.prevTotalCount;j++) {
var tempRow = table.children[j];
table.removeChild(tempRow);
}
} else if(this.prevTotalCount <= this.totalCount) {
for(var j =0;j<this.prevTotalCount;j++) {
var row = table.children[j];
var tempCol = row.children.length;
var properties = Object.keys(objectArray[j]);
if(tempCol<properties.length){ //ie - there are more cols now
for(var i =0;i<=tempCol;i++) {
if(properties[i].localeCompare('type')) {
row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
}
else {
row.children[i].innerHTML = objectArray[j][properties[i]];
}
}
for(var i=tempCol;i < properties.length;i++) {
var col = document.createElement('td');
if(properties[i].localeCompare('type')) {
col.innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
}
else {
col.innerHTML = objectArray[j][properties[i]];
}
row.appendChild(col);
}
}
else{ // ie - there are fewer cols now
for(var i =0;i<properties.length;i++) {
if(properties[i].localeCompare('type')) {
row.children[i].innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
}
else {
row.children[i].innerHTML = objectArray[j][properties[i]];
}
}
for(var i=properties.length;i<tempCol;i++) {
var tempCol = row.children[i];
row.removeChild(tempCol);
}
}
}
for(var j = this.prevTotalCount;j<this.totalCount;j++) {
var row = document.createElement('tr');
row.id = 'object' + j;
var properties = Object.keys(objectArray[j]);
for(var i =0;i<properties.length;i++) {
var col = document.createElement('td');
if(properties[i].localeCompare('type')) {
col.innerHTML = properties[i] + ' = ' + objectArray[j][properties[i]];
}
else {
col.innerHTML = objectArray[j][properties[i]];
}
row.appendChild(col);
}
table.appendChild(row);
}
}
}
},
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;
},
getSummary : function(object1, object2, element) {
this.prevTotalCount = this.totalCount;
this.totalCount = object1.objectCount + object2.objectCount;
element.innerHTML = '';
element.innerHTML += this.bgColor + ' coloured canvas is ' + this.canvasDetails.width + ' by ' + this.canvasDetails.height + ' of area ' + this.canvasDetails.width*this.canvasDetails.height;
if(this.totalCount > 1 ) {
element.innerHTML += ' Contains ' + this.totalCount + ' objects - ';
}
else {
element.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++) {
element.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');
objectList.appendChild(objectListItem);
var objKeys = Object.keys(object1.objectArray[i]);
var objLink = document.createElement('a');
objLink.href = "#object" + i;
objLink.innerHTML = object1.objectArray[i]['type'];
objectListItem.appendChild(objLink);
objectListItem.innerHTML += '; area = ' + object1.objectArray[i]['area'] + '; location = ' + object1.objectArray[i]['location'];
}
for(var i=0; i <object2.objectArray.length; i++) {
var objectListItem = document.createElement('li');
objectList.appendChild(objectListItem);
var objKeys = Object.keys(object2.objectArray[i]);
var objLink = document.createElement('a');
objLink.href = "#object" + (i + object1.objectArray.length);;
objLink.innerHTML = object2.objectArray[i]['type'];
objectListItem.appendChild(objLink);
objectListItem.innerHTML += '; area = ' + object2.objectArray[i]['area'] + '; location = ' + object2.objectArray[i]['location'];
}
element.appendChild(objectList);
}
}
}
};

1
static/p5-interceptor Submodule

@ -0,0 +1 @@
Subproject commit a0d355f10ba18aea476937d89735d5226dce858e