A few days ago, David Sefried linked me this demo.
The Hack
Because I don't own an IPad I ported over the demo to use with my mouse and my shiny new browser, Firefox 4!
I simply changed the touch event handling to mouse events, and where the multiple touch aspect became relevant I was forced to omit it. The code is available here on github. Just like the demo I used minified Processing.js, and both rewriting the code and fully understanding it was a breeze.
(function (w, undef) {
var c, p, t, touches, go,
resize = function () {
p.size(w.innerWidth, w.innerHeight);
};
w.touchStart = function (e) { touches = e; go = true; };
w.touchMove = function (e) { if (go) touches = e; };
w.touchEnd = function () { touches = go = undef; };
w.orientationChange = resize;
w.onload = function () {
c = w.document.getElementById("art");
p = new Processing(c, function (p) {
p.setup = function () { p.background(255, 255, 230); }
p.draw = function () {
if (touches != undef) {
var r = (Math.sin(t) / 2.0 + 0.5) * 255;
var g = (Math.sin(t * 1.3) / 2.0 + 0.5) * 255;
var b = (Math.sin(t * 1.4) / 2.0 + 0.5) * 255;
p.noStroke();
p.fill(r, g, b);
t += 0.1;
p.ellipse(touches.pageX, touches.pageY, 300, 300);
}
}
});
t = 0;
resize();
};
})(window);
In Action
Click inside the canvas, and move your mouse around. The math that I do not understand takes care of the colour changing.
The Link
Here's the link to the hosted code, if you didn't read it off the URL.
Whats Next
I attempted to convert the code to generate a Mandelbrot fractals instead of just ellipses'. After no success so far I opted to upload working code. Thanks to Pomax in Pjs' irc channel for this link
