From 383e574368c98bcea4159c4abb46352ac0d3c66e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Tue, 14 Jun 2016 17:22:54 +0200
Subject: [PATCH] Sync online examples back to repo, and some minor cleanups.

---
 examples/Animated/AnimatedStar.html    |  2 +-
 examples/Animated/Smoothing.html       |  2 +-
 examples/Games/Paperoids.html          |  4 +--
 examples/Paperjs.org/Chain.html        |  2 +-
 examples/Paperjs.org/FutureSplash.html |  2 +-
 examples/Paperjs.org/Qbertify.html     | 40 +++++++++++++++-----------
 examples/Paperjs.org/SpiralRaster.html | 19 ++++++------
 7 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/examples/Animated/AnimatedStar.html b/examples/Animated/AnimatedStar.html
index 6046c3c1..9a2458f2 100644
--- a/examples/Animated/AnimatedStar.html
+++ b/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
diff --git a/examples/Animated/Smoothing.html b/examples/Animated/Smoothing.html
index 9e0dc7b0..d397e430 100644
--- a/examples/Animated/Smoothing.html
+++ b/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) {
diff --git a/examples/Games/Paperoids.html b/examples/Games/Paperoids.html
index 08113832..9a1f816f 100644
--- a/examples/Games/Paperoids.html
+++ b/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;
diff --git a/examples/Paperjs.org/Chain.html b/examples/Paperjs.org/Chain.html
index 3979388e..3234fd4a 100644
--- a/examples/Paperjs.org/Chain.html
+++ b/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) {
diff --git a/examples/Paperjs.org/FutureSplash.html b/examples/Paperjs.org/FutureSplash.html
index 2834fd02..9dd52f37 100644
--- a/examples/Paperjs.org/FutureSplash.html
+++ b/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) {
diff --git a/examples/Paperjs.org/Qbertify.html b/examples/Paperjs.org/Qbertify.html
index 45db33ae..58dbe8ca 100644
--- a/examples/Paperjs.org/Qbertify.html
+++ b/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();
-
-            // Transform the raster, so it fills the view:
-            raster.fitBounds(view.bounds, true);
-            group = new Group();
-            for (var y = 0; y < values.amount; y++) {
-                for (var x = 0; x < values.amount; x++) {
-                    var copy = piece.clone();
-                    copy.position += size * [x + (y % 2 ? 0.5 : 0), y * 0.75];
-                    group.addChild(copy);
+            raster.visible = false;
+            raster.on('load', function() {
+                // Transform the raster, so it fills the view:
+                raster.fitBounds(view.bounds, true);
+                group = new Group();
+                for (var y = 0; y < values.amount; y++) {
+                    for (var x = 0; x < values.amount; x++) {
+                        var copy = piece.clone();
+                        copy.position += size * [x + (y % 2 ? 0.5 : 0), y * 0.75];
+                        group.addChild(copy);
+                    }
                 }
-            }
 
-            // Transform the group so it covers the view:
-            group.fitBounds(view.bounds, true);
-            group.scale(1.1);
+                // 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;
@@ -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;
             };
diff --git a/examples/Paperjs.org/SpiralRaster.html b/examples/Paperjs.org/SpiralRaster.html
index dd02f4a4..6e10d85c 100644
--- a/examples/Paperjs.org/SpiralRaster.html
+++ b/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;