fjenett / coffeescript-mode-processing

CoffeeScript mode for Processing 2.0

CoffeeScript mode for Processing 2.0

This is a "contributed mode" for Processing 2.0, it allows to write Processing sketches in CoffeeScript

CoffeeScript was created by Jeremy Ashkenas, check out his ruby-processing as well!

Please note that Processing.js is not up to date with Processing 2.0 API so you should write your code as if for Processing 1.5!

Usage

You need Processing 2.0 for this to run, fetch latest here: http://processing.org/download/

Download this "latest" zip here: https://github.com/fjenett/coffeescript-mode-processing/zipball/latest

Find your sketchbook folder and make a new sub-folder called "modes", if not already there

Unzip "latest" and from inside that folder move "CoffeeScriptMode" to "modes", like so:

.. path-to ../Processing/
    modes/
        CoffeeScriptMode/
            .. etc ..
	libraries/
	.. other sketches ..

Now start Processing 2.0 ..

... in the mode menu (to the right in the editor window) you should now see "CoffeeScript", select it to switch modes.

A simple sketch looks like this:

setup: ->
    size 200, 200

draw: ->
    background 255
    
    fill 0
    stroke 120
    
    rect 20, 20, width/2, height/2

Some specialties

Processing API

The Processing API is injected at the very beginning of setup(), so any use at a global level will not work. Like so:

myFunkyPI = PI * 0.1234 # PI is not yet available here

setup: ->
    size myFunkyPI * 22, myFunkyPI * 44

Variables and scope

If you need to declare (instance) variables for your sketch you need to prepend them with "@" which is short for "this." ... otherwise they will only be available in the current scope. There is no need to declare them before you use them, CoffeeScript will take care of that. For example:

setup: ->
    size 200, 200
    myVar = 22 # only available here in setup
    @myVar2 = 33 # available in draw as well!

draw: ->
    background @myVar2 # yes!

Can't use hex colors

Use this notation instead: 0xFF337799 for a hex color that would be #337799 (in other words replace "#" with 0xFF).

It's all in a class

All your code will be wrapped into a CoffeeScript class, similar to:

setup: ->
    size 200, 200

becomes:

class SketchXYZ
    setup: ->
        size 200, 200

Always, as in really always, if you run into trouble with your code look at the "YourSketchName_compiled.js" file that is loaded in the browser as your sketch. It contains the JavaScript code that is generated from your CoffeeScript and will help you understand (hopefully) what is going on and might be wrong.

Indentation

In CoffeeScript whitespace is meaningful. Sometimes copy-pasting code or unthoughtfully typing away will result in an exception (normally mentioning "INDENT").

Each sketch stores it's "tabs.size" (how many spaces represent a tab) inside a settings file named sketch.properties. This might differ from what you have set in your editor preferences and if it does you need to either adjust the sketch (including reformatting it's code), or change your editor settings. In any way this will be messy to get right and you will hate me for it. Sorry!

pixels array Beloved "pixels" is an object in CS mode, not an array:

pixels.length 		pixels.getLength()
col = pixels[i]		col = pixels.getPixel(index)
pixels[i] = col		pixels.setPixel(index, col)
...

Image preloading Image preloading does currently not work out of the box, you will need to check if they are loaded:

img = loadImage "myfunkyimage.jpg"
...
if img.loaded
	doSomethingWithItHere()

See Examples > Basic > Image > ... Or use requestImage().

loop() is doLoop() "loop" in CoffeeScript is a reserved keyword for the loop control structure, so here in CS mode doLoop() replaces the loop() from the Processing API. I added an example under "Examples -> Language -> LoopNoLoopDoLoop" that shows the use of both.

How does it work?

CoffeeScript mode is based on JavaScript mode in the just released Processing 2.0 version.

Pressing "Run" compiles your CoffeeScript code to JavaScript using the standard CS compiler running on Rhino. Next a server is started and it's address is being opened in your default browser. A generated HTML file along with your compiled CS code, Processing.js and all other files to include is being served from an export folder from inside your sketch's directory. The HTML file contains a short snippet of JS code that creates a blank Processing.js instance and mixes your compiled CS code into it to make it dance. Voilà ... a nice little soup of frameworks.

Status

Removed need for '@' upfront Processing API functions, classes, constants and variables. So '@size' becomes 'size', etc ... (Thanks to Jeremy Ashkenas for pointing me to what led to a solution!)

Ideas, suggestions, feedback welcome ...