Arco iris radial con javascript

En otro post ya os hable de la libreria Paper.js con la que se pueden hacer maravillas animadas como este ejemplo de radial multicolor. Solamente utilizando Javascript HTML5 se logra este fantastico efecto y sin ningun tipo de imagen. Haz click con el raton en el centro y arrastra el arco iris por donde quieras.

Aqui puedes ver el codigo que he utilizado para su realizacion:

<canvas height="600" id="canvas" resize="" width="100%"></canvas>
<script type="text/javascript" src="http://uploads.boxify.me/59554/paper.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var point = view.center;

        var colors = [];
        var cycles = 4;
        for (var i = 0, l = 60; i < l; i++) {
            var brightness = 1 - (i / l) * 1.5;
            var hue = i / l * cycles * 360;
            var color = new HsbColor(hue, 1, brightness);
            colors.push(color);
        }

        var path = new Path.Rectangle(view.bounds);
        var gradient = new Gradient(colors, 'radial');
        var radius = Math.max(view.size.width, view.size.height) * 0.75;
        var gradientColor = new GradientColor(gradient, point, point + [radius, 0]);
        path.fillColor = gradientColor;

        var mouseDown = false,
            mousePoint = view.center;

        function onMouseDown(event) {
            mouseDown = true;
            mousePoint = event.point;
        }

        function onMouseDrag(event) {
            mousePoint = event.point;
        }

        function onMouseUp(event) {
            vector.length = 10;
            mouseDown = false;
        }

        var grow = false;
        var vector = new Point(150, 0);

        function onFrame() {
            for (var i = 0, l = gradient.stops.length; i < l; i++)
                gradient.stops[i].color.hue -= 20;
            if (grow && vector.length > 300) {
                grow = false;
            } else if (!grow && vector.length < 75) {
                grow = true;
            }
            if (mouseDown) {
                point = point + (mousePoint - point) / 10;
            } else {
                vector.length += (grow ? 1 : -1);
                vector.angle += 5;
            }
            gradientColor.hilite = mouseDown ? point : point + vector;
        }

        function onResize(event) {
            point = view.center;
            path.bounds = view.bounds;
            var gradientColor = path.fillColor;
            gradientColor.origin = point;
            var radius = Math.max(view.size.width, view.size.height) * 0.75;
            gradientColor.destination = point + [radius, 0];
        }
    </script>