processing.js in dashboard widget
I managed to get processing.js - a javascript based processing clone - to run in an apple dashboard 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; }
background(0);
fill(255); ellipse(x, y, 50, 50);
}
</script>
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
See also:
Linedemo in processing.js
sketch experiment 7 - osc events
nested cubes in processing
processing phaseflower
Hello,
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...
-RobRoy
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