processing.js in dashboard widget

Nikolaus Gradwohl2009-04-07T05:45:00+00:00

I managed to get processing.js - a javascript based processing clone - to run in an apple dashboard widget.

processing.js widget

to make one your self fire up dashcode, and add processing.js and add an canvas element to the widget

then add it in the header of your html file

<script type="text/javascript" src="processing.js" charset="utf-8"></script>

add an script section to your html file containing the processing code to the body tag

<script id="code" type="application/processing" charset="utf-8">
int x = 25; 
int y = 25; 

int dx = 4; 
int dy = 3;

void setup() { 
    size(300, 300); 
    frameRate( 25 ); 

void draw() {
    x += dx; 
    y += dy;
    if ( x > width - 25 || x < 25 ) { dx *= -1; } 
    if ( y > height - 25 || y < 25 ) { dy *= -1; }
    fill(255); ellipse(x, y, 50, 50);

and finally add this code to the "show()" method of your javascript file

var f = document.getElementById("code");
Processing(document.getElementById("canvas"), f.textContent );

you can download my example bouncing ball widget here

Tweet This! submit to reddit Digg! Tags: | 2 comments | no trackbacks

See also:

Lightbox-Effekt for Processing-Sketches
Linedemo in processing.js
sketch experiment 7 - osc events
nested cubes in processing
processing phaseflower



Leave a response

  1. RobRoy 2009-04-13T00:25:45+00:00


    Quick question...

    My processing code contains a background image. Where do I put the images in DashCode so that my widget knows how to find them?

    Thanks for your great code and descriptions...


  2. Nikolaus Gradwohl 2009-04-13T06:36:22+00:00

    processing.js needs the image to be loaded in an img tag in the code the examples by john put the image in a div block with visibility hidden and set the id of the img tag to the filename. than you simply can use the PImage, loadimage commands in the processing code

Leave a comment