From e77caf610b7ec6b6f04cc3b5b7ee5e8f322a9161 Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Sun, 19 Jun 2011 17:34:32 +0200
Subject: [PATCH] Update BouncingBalls example to the version on Paperjs.org

---
 examples/Scripts/BouncingBalls.html | 59 ++++++++++++++++-------------
 1 file changed, 32 insertions(+), 27 deletions(-)
diff --git a/examples/Scripts/BouncingBalls.html b/examples/Scripts/BouncingBalls.html
index 8ae00bfe..1a6bb5f5 100644
--- a/examples/Scripts/BouncingBalls.html
+++ b/examples/Scripts/BouncingBalls.html
@@ -7,10 +7,6 @@
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
 		var balls = [];
-
-		var bg = new Path.Rectangle([0, 0], view.size);
-		bg.fillColor = '#f00';
-
 		var group = new Group();
 
 		var Ball = Base.extend({
@@ -18,21 +14,34 @@
 				if (!vector || vector.isZero()) {
 					this.vector = Point.random() * 5;
 				} else {
-					this.vector = vector * 1.5;
+					this.vector = vector * 2;
 				}
 				this.point = point;
 				this.dampen = 0.4;
 				this.gravity = 3;
 				this.bounce = -0.6;
-				this.radius = 60; //50 * Math.random() + 30;
-				this.item = new Path.Circle(point, this.radius);
+				this.radius = 50 * Math.random() + 30;
+				this.createPaths();
+				group.addChild(this.item);
+			},
+
+			createPaths: function() {
+				var overlayPos = this.point + this.radius / 8;
+				var compound = new CompoundPath([
+					new Path.Circle(this.point, this.radius),
+					new Path.Circle(overlayPos, this.radius / 2)
+				]);
 				var color = new HSBColor(Math.random() * 360, 1, 1);
-				var gradient = new Gradient([color, new RGBColor(0, 0, 0)], 'radial');
-				this.item.fillColor = new GradientColor(gradient, point,
-						point + this.radius, this.radius * 0.8);
-				this.item.blendMode = 'luminosity';
-//				this.item.opacity = 0.75;
-				group.appendTop(this.item);
+				var gradient = new Gradient([color, 'black'], 'radial');
+				compound.children[0].fillColor = new GradientColor(gradient, this.point,
+						this.point + this.radius, overlayPos);
+				var overlay = new Path.Circle(overlayPos, this.radius / 2);
+				var overlayColor = color.clone();
+				var fullOverlay = color.clone();
+				overlayColor.alpha = 0.5;
+				var overlayGradient = new Gradient([new RGBColor(1, 1, 1, 0.5), new RGBColor(1, 1, 1, 1)]);
+				overlay.fillColor = new GradientColor(overlayGradient, overlayPos, overlayPos + this.radius / 2);
+				this.item = new Group([compound, overlay]);
 			},
 
 			iterate: function() {
@@ -47,7 +56,7 @@
 						this.vector = Point.random() * [150, 100] + [-75, 20];
 					this.vector.y *= this.bounce;
 				}
-				
+
 				var max = Point.max(this.radius, this.point + this.vector);
 				this.item.position = this.point = Point.min(max, size - this.radius);
 				this.item.rotate(this.vector.x / 2);
@@ -55,38 +64,34 @@
 		});
 
 		for (var i = 0; i < 10; i++) {
-			var position = Point.random() * view.size;
-			var vector = (Point.random() - [0.5, 0]) * [50, 100];
-			var ball = new Ball(position, vector);
+			var position = Point.random() * view.size,
+				vector = (Point.random() - [0.5, 0]) * [50, 100],
+				ball = new Ball(position, vector);
 			balls.push(ball);
 		}
 
+		var textItem = new PointText(20, 30);
+		textItem.fillColor = 'black';
+		textItem.content = 'Click, drag and release to add balls.'
+
 		var lastDelta;
 		function onMouseDrag(event) {
 			lastDelta = event.delta;
 		}
-		
+
 		function onMouseUp(event) {
 			var ball = new Ball(event.point, lastDelta);
 			balls.push(ball);
 			lastDelta = null;
 		}
 
-		var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
-		boundPath.style = {
-			strokeColor: 'red',
-			strokeWidth: 1
-		};
-
 		function onFrame() {
 			for (var i = 0, l = balls.length; i < l; i++)
 				balls[i].iterate();
-			boundPath.bounds = group.bounds;
 		}
 	</script>
 </head>
 <body>
-	<p>Click to add circles:</p>
-	<canvas id="canvas" resize stats keepalive="true"></canvas>
+	<canvas id="canvas" resize keepalive="true"></canvas>
 </body>
 </html>
\ No newline at end of file
