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

examples/Paperjs.org/Qbertify.html

@@ -13,7 +13,8 @@
             amount: 30
         };
 
-        var raster, group;
+        var raster,
+            group;
         var piece = createPiece();
         var count = 0;
 
@@ -62,9 +63,11 @@
             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:
                 raster.fitBounds(view.bounds, true);
                 group = new Group();
@@ -79,9 +82,12 @@
                 // Transform the group so it covers the view:
                 group.fitBounds(view.bounds, true);
                 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;
@@ -122,6 +127,7 @@
                 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,6 +75,7 @@
         }
 
         function onResize() {
+            if (raster.loaded)
                 resetSpiral();
             text.point = view.bounds.bottomRight - [30, 30];
         }
@@ -97,7 +100,7 @@
                 var image = document.createElement('img');
                 image.onload = function () {
                     raster = new Raster(image);
-                    raster.remove();
+                    raster.visible = false;
                     resetSpiral();
                 };
                 image.src = event.target.result;