pjs - fun - playing with a demo

The Demo

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.

•  http://matrix.senecac.on.ca/~cwdesautels/pjs/drawer.html

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

• http://processing.org/learning/topics/mandelbrot.html