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
This commit is contained in:
Mathura MG 2016-11-12 11:53:02 -05:00 committed by Cassie Tarakajian
parent ddc4fb32b1
commit ced885d03f
16 changed files with 609 additions and 27 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -169,10 +169,15 @@ class IDEView extends React.Component {
this.props.startSketchAndRefresh(); this.props.startSketchAndRefresh();
} else if (e.keyCode === 50 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) { } else if (e.keyCode === 50 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
e.preventDefault(); 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) { } else if (e.keyCode === 49 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
e.preventDefault(); 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, isTabIndent: PropTypes.bool.isRequired,
autosave: PropTypes.bool.isRequired, autosave: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired, lintWarning: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired, textOutput: PropTypes.number.isRequired,
theme: PropTypes.string.isRequired, theme: PropTypes.string.isRequired,
autorefresh: PropTypes.bool.isRequired autorefresh: PropTypes.bool.isRequired
}).isRequired, }).isRequired,

View file

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

View file

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

View file

@ -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);
}
});

View file

@ -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+x4y1x2y1x3y2x4y3x1y4
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);
}
}
}
};

View file

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

View file

@ -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;
}

View file

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

View file

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