WhatfettleTiddlyProcessing

Processing is one of those things I keep on coming across, first through toy hackers such as krazydad, ni [video] and The Curiosity Collective and more recently in Maker articles and O'Reilly books such as Vizualizing Data and Making Things Talk. I'd even invested in the rather heavy Processing, Creative Coding and Computational Art, all totally inspiring, and yet I somehow hadn't got around to actually doing anything with it. You see it's the whole Java thing that puts me off; when it comes to playtime life's far too short to wrangle a CLASSPATH or compile an applet.

So, it was great to see the amazing John Resig finally release his native Javascript implementation Processing.js. To allow easy experimention, I've wrapped John's code into a TiddlyWiki Plugin, which took all of 10 minutes thanks to the prior art of Simon Baird's cool clock. It took a little longer to knife and fork John's basic examples into a TiddlyProcessing TiddlyWiki [subversion], mainly because his server was being hammered.

The result is a single HTML page you can double click on an example to view the Processing source, edit it, and see the results immediately without refreshing the page. Download and reopen it in Firefox and you'll be able to save your changes locally. Not all the examples work, in particular those which use external images. You can save your changes in other browsers if you follow the generic TiddlyWiki instructions. .

All great fun, but it is just a hack, and I somehow doubt the purveyors of more complete bids for global vendor lock-in, such as Silverlight and AIR, are too worried as yet. But they should be. A combination of video as a first class citizen of the Web, Canvas in decent browsers and libraries and emulations using SVG elsewhere seems pretty close to being good enough. As much as I'd love to see more declarative approaches take off, I can't help but think we've entered the age of the canvas!

Update: Simon Baird has tweaked the plugin to avoid the need to escape single quotes and put his version up on TiddlySpot, a great place to store your TiddlyWikis.

Comments { 10 }

  1. That was pretty good fun. Well, until Firefox 2 locked up and died. Nothing showed up in Maxthon - but then again it's still running.

    Seeing sine waves in a small box has helped me relax a bit from my great hatred of javascript (i.e. clientside messing about). Moving images as first class members of the web? why not.

  2. That is seven kinds of awesome. Here's my take: http://tiddlyprocessing-simon.tiddlyspot.com/

  3. [...] Paul Downey :: TiddlyProcessing Paul Downey’s marvellous mashup of Processing.js and TiddlyWiki makes it easy to experiment with animations and visualisations (tags: psd pauldowney tiddlywiki processing processingjs javascript visualisation animation vizualisation) Posted by jermolene Filed in Uncategorized [...]

  4. Nice work Simon.

  5. Paul,

    If you downloaded the sample code from the github.com repository, then the examples that require images do not work properly because the init.js kept in that repository is different than the one that is used at ejohn.org website.

    Change the one came from the downloaded package to this code:
    window.onload = function()
    {
    var canvas = document.getElementsByTagName("canvas");

    for ( var i = 0; i < canvas.length; i++ )
    {
    Processing( canvas[i], canvas[i].previousSibling.textContent );
    }
    };

    It worked for me.

    Thanks,

    Nano.

  6. [...] case you’re interested, what Paul did is reasonably cool — he set up Processing.js inside TiddlyWiki, the personal notebook [...]

  7. [...] Paul Downey :: TiddlyProcessing (tags: blog.whatfettle.com 2008 mes4 dia15 at_home processing javascript blog_post wiki programming) [...]

  8. Thanks for putting this together and sharing it! It's pretty amazing the power that's there and yet the simplicity of it all. It's going to be fun seeing how this all turns out, but I think it's goign to enable some great accessible data visualizations on the web very soon.

  9. [...] - bookmarked by 1 members originally found by feiyu on July 14, 2008 TiddlyProcessing http://blog.whatfettle.com/2008/05/11/tiddlyprocessing/ - bookmarked by 2 members originally found [...]

  10. [...] public links >> krazydad TiddlyProcessing Saved by pyrochemical on Fri 19-12-2008 Challenge Yourself with Sudoku Games (Sudoku freeware) [...]