Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@fatlotus
fatlotus committed Oct 29, 2011
0 parents commit e2162ee
Show file tree
Hide file tree
Showing 6 changed files with 248 additions and 0 deletions.
4 changes: 4 additions & 0 deletions README
@@ -0,0 +1,4 @@
Graphics Playpen
================

Because compiling a Processing.org takes two seconds too long, I've created this script to better create HTML5 applications and renderings.
108 changes: 108 additions & 0 deletions editor.js
@@ -0,0 +1,108 @@
// 29 October 2011
//
// Copyright (c) 2011 Jeremy Arche
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GraphEditor = {
anyChangesYet : false,

initialized : (function() {
window.onload = function() {
GraphEditor.setupDOM();
}

return true;
})(),

setupDOM : function() {
var textarea = document.getElementsByTagName('textarea')[0];
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var errors = document.getElementsByTagName('pre')[0];
var body = document.getElementsByTagName('body')[0];
var select = document.getElementsByTagName('select')[0];

textarea.value = "draw = function() {\n \n};";
errors.firstChild.nodeValue = 'Type someting in the field above to start.';

context.width = canvas.width;
context.height = canvas.height;

textarea.onkeydown = function(event) {
checkTab(event);
return !event.defaultPrevented;
}

textarea.onkeyup = function(event) {
GraphEditor.anyChangesYet = true;

context.save();

try {
var code = (
'var width = canvas.width, height = canvas.height;' +
textarea.value
);

GraphEditor.compileFor(code, context);

errors.firstChild.nodeValue = "Compilation successful.";
} catch (e) {
errors.firstChild.nodeValue = e.toString();
}

context.restore();
}

select.onchange = function() {
var code = GraphEditor.samples[select.selectedIndex];

if (code) {
textarea.value = code;
textarea.onkeyup(null);
}

select.selectedIndex = 0;
}

window.onbeforeunload = function(e) {
if (GraphEditor.anyChangesYet)
return e.returnValue = 'Changes are not saved in this demonstration.';
}
},

compileFor: function(code, scope) {
var exports = eval(
'(function() { ' +
' var draw, setup; ' +
' with(scope) { ' +
code +
' }' +
' return [ draw, setup ];' +
'})();'
);

var draw = exports[0];
var setup = exports[1];

draw();
}
}
24 changes: 24 additions & 0 deletions index.html
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Graphics Playpen</title>
<link rel="stylesheet" href="styles.css" type="text/css" charset="utf-8"/>
<script src="tabs.js" type="text/javascript" charset="utf-8"></script>
<script src="editor.js" type="text/javascript" charset="utf-8"></script>
<script src="samples.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Graphics Playpen</h1>
<div class='left'>
<form><select>
<option selected='selected' disabled='disabled'>Choose Sample</option>
<option>Sine Function</option>
</select></form>
<textarea></textarea>
<pre>Loading...</pre>
</div>
<canvas width="500" height="400"></canvas>
<p id="info">See the <a href="https://developer.mozilla.org/en/canvas_tutorial">HTML5 canvas tutorial</a> for details : Jeremy Archer 2011</p>
</body>
</html>
27 changes: 27 additions & 0 deletions samples.js
@@ -0,0 +1,27 @@
// 29 October 2011
//
// Copyright (c) 2011 Jeremy Arche
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GraphEditor.samples = [
null,
"draw = function() {\n clearRect(0, 0, width, height);\n \n strokeStyle = 'rgba(100, 100, 100, 0.2)';\n \n for (var prd = 0; prd <= 10; prd++) {\n if (prd == 5) {\n strokeStyle = '#c00;';\n } else if (prd == 10) {\n strokeStyle = '#39c';\n } else{\n var r = prd * 30\n strokeStyle = 'rgba('+r+','+r+','+r+',0.2)';\n }\n \n beginPath();\n \n for (var x = 0; x < 500; x += 2) {\n lineTo(x, (1 + Math.sin(x / (5 + 2 * prd)) * 0.2) * height / 2);\n }\n \n stroke();\n closePath();\n }\n};"
]
14 changes: 14 additions & 0 deletions styles.css
@@ -0,0 +1,14 @@
*{margin:0;padding:0;}
body{background-color:#eee;padding:1em;}
textarea{font:11px Monaco,monospace;width:40em;height:20em;}
textarea{padding:0.5em;}
h1{font:bold 2em Arial,sans-serif;letter-spacing:-0.1em;}
h1{padding-bottom:0.2em;}
canvas{border:1px solid #ccc;background-color:#fff;}
canvas{margin-top:2em;}
.left,canvas{vertical-align:top;display:inline-block;}
pre{border:1px solid #ccc;text-align:left;padding:1em;background-color:#fff;}
form{display:block;height:2em;}
#info{position:absolute;bottom:1em;left:0em;right:0;text-align:center;}
#info{font:0.8em Helvetica,sans-serif;color:#999;}
#info a{color:#555;text-decoration:underline;}
71 changes: 71 additions & 0 deletions tabs.js
@@ -0,0 +1,71 @@
// 29 October 2011
//
// Licence unspecified; see source for details:
// <http://ajaxian.com/archives/handling-tabs-in-textareas>
//
// Code essentially unmodified.
//

function checkTab(evt) {
var t = evt.target;
var ss = t.selectionStart;
var se = t.selectionEnd;
var tab = " ";

// Tab key - insert tab expansion
if (evt.keyCode == 9) {
evt.preventDefault();

// Special case of multi line selection
if (ss != se && t.value.slice(ss,se).indexOf("n") != -1) {
// In case selection was not of entire lines (e.g. selection begins in the middle of a line)
// we ought to tab at the beginning as well as at the start of every following line.
var pre = t.value.slice(0,ss);
var sel = t.value.slice(ss,se).replace(/n/g,"n"+tab);
var post = t.value.slice(se,t.value.length);
t.value = pre.concat(tab).concat(sel).concat(post);

t.selectionStart = ss + tab.length;
t.selectionEnd = se + tab.length;
}

// "Normal" case (no selection or selection on one line only)
else {
t.value = t.value.slice(0,ss).concat(tab).concat(t.value.slice(ss,t.value.length));
if (ss == se) {
t.selectionStart = t.selectionEnd = ss + tab.length;
}
else {
t.selectionStart = ss + tab.length;
t.selectionEnd = se + tab.length;
}
}
}

// Backspace key - delete preceding tab expansion, if exists
else if (evt.keyCode==8 && t.value.slice(ss - tab.length,ss) == tab) {
evt.preventDefault();

t.value = t.value.slice(0,ss - tab.length).concat(t.value.slice(ss,t.value.length));
t.selectionStart = t.selectionEnd = ss - tab.length;
}

// Delete key - delete following tab expansion, if exists
else if (evt.keyCode==46 && t.value.slice(se,se + tab.length) == tab) {
evt.preventDefault();

t.value = t.value.slice(0,ss).concat(t.value.slice(ss + tab.length,t.value.length));
t.selectionStart = t.selectionEnd = ss;
}
// Left/right arrow keys - move across the tab in one go
else if (evt.keyCode == 37 && t.value.slice(ss - tab.length,ss) == tab) {
evt.preventDefault();
t.selectionStart = t.selectionEnd = ss - tab.length;
}
else if (evt.keyCode == 39 && t.value.slice(ss,ss + tab.length) == tab) {
evt.preventDefault();
t.selectionStart = t.selectionEnd = ss + tab.length;
}
}


0 comments on commit e2162ee

Please sign in to comment.