Sync online examples back to repo, and some minor cleanups.

examples/Animated/AnimatedStar.html

@@ -26,7 +26,7 @@
                 var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
                 path.add(offset + vector);
             }
-            path.smooth( { type: 'continuous' });
+            path.smooth({ type: 'continuous' });
             layer.insertChild(0, new Group({
                 children: [path],
                 applyMatrix: false

examples/Animated/Smoothing.html

@@ -39,7 +39,7 @@
                 path.segments[i].point.y = yPos;
             }
             if (smooth)
-                path.smooth( { type: 'continuous' });
+                path.smooth({ type: 'continuous' });
         }
 
         function onMouseMove(event) {

examples/Games/Paperoids.html

@@ -438,7 +438,7 @@
                 currentLives--;
                 this.display();
                 Ship.destroy();
-                setTimeout( function() {
+                setTimeout(function() {
                     if (currentLives == 0) {
                         Game.over();
                     } else {
@@ -448,7 +448,7 @@
             },
             display: function() {
                 group.removeChildren();
-                for (var i=0;i<currentLives-1;i++) {
+                for (var i = 0;i < currentLives - 1; i++) {
                     var copy = shipPath.clone();
                     copy.rotate(-90);
                     copy.visible = true;

examples/Paperjs.org/Chain.html

@@ -34,7 +34,7 @@
                 vector.length = length;
                 nextSegment.point = segment.point - vector;
             }
-            path.smooth( { type: 'continuous' });
+            path.smooth({ type: 'continuous' });
         }
 
         function onMouseDown(event) {

examples/Paperjs.org/FutureSplash.html

@@ -105,7 +105,7 @@
             for (var j = 0, l = springs.length; j < l; j++) {
                 springs[j].update();
             }
-            path.smooth( { type: 'continuous' });
+            path.smooth({ type: 'continuous' });
         }
 
         function onKeyDown(event) {

examples/Paperjs.org/Qbertify.html

@@ -13,7 +13,8 @@
             amount: 30
         };
 
-        var raster, group;
+        var raster,
+            group;
         var piece = createPiece();
         var count = 0;
 
@@ -62,26 +63,31 @@
             if (group)
                 group.remove();
 
+            // As the web is asynchronous, we need to wait for the raster to
+            // load before we can perform any operation on its pixels.
             raster = new Raster(image);
-            raster.remove();
+            raster.visible = false;
-
+            raster.on('load', function() {
-            // Transform the raster, so it fills the view:
+                // Transform the raster, so it fills the view:
-            raster.fitBounds(view.bounds, true);
+                raster.fitBounds(view.bounds, true);
-            group = new Group();
+                group = new Group();
-            for (var y = 0; y < values.amount; y++) {
+                for (var y = 0; y < values.amount; y++) {
-                for (var x = 0; x < values.amount; x++) {
+                    for (var x = 0; x < values.amount; x++) {
-                    var copy = piece.clone();
+                        var copy = piece.clone();
-                    copy.position += size * [x + (y % 2 ? 0.5 : 0), y * 0.75];
+                        copy.position += size * [x + (y % 2 ? 0.5 : 0), y * 0.75];
-                    group.addChild(copy);
+                        group.addChild(copy);
+                    }
                 }
-            }
 
-            // Transform the group so it covers the view:
+                // Transform the group so it covers the view:
-            group.fitBounds(view.bounds, true);
+                group.fitBounds(view.bounds, true);
-            group.scale(1.1);
+                group.scale(1.1);
+            })
         }
 
         function onFrame(event) {
+            if (!group)
+                return;
             // Loop through the uncolored hexagons in the group and fill them
             // with the average color:
             var length = Math.min(count + values.amount, group.children.length);
@@ -91,7 +97,6 @@
                 var color = raster.getAverageColor(hexagon);
                 if (color) {
                     hexagon.fillColor = color;
-                    // hexagon.strokeColor = color;
                     var top = piece.children[1];
                     top.fillColor = color.clone();
                     top.fillColor.brightness *= 1.5;
@@ -118,10 +123,11 @@
             var file = event.dataTransfer.files[0];
             var reader = new FileReader();
 
-            reader.onload = function ( event ) {
+            reader.onload = function(event) {
                 var image = document.createElement('img');
                 image.onload = function () {
                     handleImage(image);
+                    view.draw();
                 };
                 image.src = event.target.result;
             };

examples/Paperjs.org/SpiralRaster.html

@@ -10,9 +10,13 @@
         // certain browsers when serving this script online:
         var path, position, max;
         var count = 0;
-        var grow = true;
+        var grow = false;
+
+        // As the web is asynchronous, we need to wait for the raster to
+        // load before we can perform any operation on its pixels.
         var raster = new Raster('mona');
-        raster.remove();
+        raster.visible = false;
+        raster.on('load', resetSpiral);
 
         var text = new PointText({
             justification: 'right',
@@ -22,11 +26,9 @@
                 : 'to drag & drop images, please use Webkit, Firefox, Chrome or IE 10'
         });
 
-        resetSpiral();
-
         function onFrame(event) {
             if (grow) {
-                if (raster && (view.center - position).length < max) {
+                if (raster.loaded && (view.center - position).length < max) {
                     for (var i = 0, l = count / 36 + 1; i < l; i++) {
                         growSpiral();
                     }
@@ -73,7 +75,8 @@
         }
 
         function onResize() {
-            resetSpiral();
+            if (raster.loaded)
+                resetSpiral();
             text.point = view.bounds.bottomRight - [30, 30];
         }
 
@@ -93,11 +96,11 @@
             var file = event.dataTransfer.files[0];
             var reader = new FileReader();
 
-            reader.onload = function ( event ) {
+            reader.onload = function (event) {
                 var image = document.createElement('img');
                 image.onload = function () {
                     raster = new Raster(image);
-                    raster.remove();
+                    raster.visible = false;
                     resetSpiral();
                 };
                 image.src = event.target.result;