Skip to content

Instantly share code, notes, and snippets.

@j4mie

j4mie/example.html

Created July 29, 2011 15:40
Show Gist options
  • Save j4mie/1114064 to your computer and use it in GitHub Desktop.
Save j4mie/1114064 to your computer and use it in GitHub Desktop.
Download ZIP
A tiny shim for Processing/Coffeescript prototyping
Raw
example.html
<!DOCTYPE html>
<title>CoffeeScript/Processing</title>
<script src="https://raw.github.com/jeresig/processing-js/master/processing.js"></script>
<script src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
<script src="https://raw.github.com/gist/1114064/professing.js"></script>
<script type="text/coffeescript">
sketch ->
@setup = =>
@size 300, 300
@background 255
@noFill()
@frameRate 10
@draw = =>
x = @random 0, @width
y = @random 0, @height
size = @random 10, 100
@ellipse x, y, size, size
@background 255 if @frameCount % 100 is 0
</script>
Raw
professing.js
window.sketch = function (func) {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.style.display = 'block';
canvas.style.margin = '0 auto';
new Processing(canvas, function (processing) { func.call(processing); });
}
@j4mie
Copy link
Author

j4mie commented Jul 29, 2011

Really, you don't even need the bit that creates the canvas, that just saves a bit of typing.

All this is doing is binding the Processing object to this inside the sketch function. This means you can use CoffeeScript's @variable syntax (shortcut for this.variable) along with its "fat arrow" (=>) which binds this inside a function to the current value of this outside the function.

This is starting to look almost like Processing language itself - but we're not interacting with the Processing.js "lazy parser" at all.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment