From 3db61a350904dbc94718a583ab51c649a363c63d Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Sat, 2 Mar 2013 20:58:56 +0100
Subject: [PATCH] Examples: Move improved and simplified version of Bouncing
 Balls to Paperjs.org folder.

---
 examples/Scripts/BouncingBalls.html | 115 ++++++++++++++--------------
 1 file changed, 57 insertions(+), 58 deletions(-)

diff --git a/examples/Scripts/BouncingBalls.html b/examples/Scripts/BouncingBalls.html
index 8211258d..c88111d7 100644
--- a/examples/Scripts/BouncingBalls.html
+++ b/examples/Scripts/BouncingBalls.html
@@ -6,63 +6,60 @@
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		var balls = [];
-		var group = new Group();
-
-		var Ball = Base.extend({
-			initialize: function(point, vector) {
-				if (!vector || vector.isZero()) {
-					this.vector = Point.random() * 5;
-				} else {
-					this.vector = vector * 2;
-				}
-				this.point = point;
-				this.dampen = 0.4;
-				this.gravity = 3;
-				this.bounce = -0.6;
-				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 RadialGradient(color, 'black');
-				compound.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 LinearGradient(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() {
-				var size = view.size;
-				this.vector.y += this.gravity;
-				this.vector.x *= 0.99;
-				var pre = this.point + this.vector;
-				if (pre.x < this.radius || pre.x > size.width - this.radius)
-					this.vector.x *= -this.dampen;
-				if (pre.y < this.radius || pre.y > size.height - this.radius) {
-					if (Math.abs(this.vector.x) < 3)
-						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);
+		var Ball = function(point, vector) {
+			if (!vector || vector.isZero()) {
+				this.vector = Point.random() * 5;
+			} else {
+				this.vector = vector * 2;
 			}
-		});
+			this.point = point;
+			this.dampen = 0.4;
+			this.gravity = 3;
+			this.bounce = -0.6;
 
+			var color = new HsbColor({
+				hue: Math.random() * 360,
+				saturation: 1,
+				brightness: 1
+			});
+			var gradient = new RadialGradient(color, 'black');
+
+			var radius = this.radius = 50 * Math.random() + 30;
+			this.item = new CompoundPath({
+				children: [
+					new Path.Circle({
+						radius: radius
+					}),
+					new Path.Circle({
+						center: radius / 8,
+						radius: radius / 3
+					})
+				],
+				fillColor: new GradientColor(gradient, 0, radius, radius / 8),
+				position: this.point
+			});
+		}
+
+		Ball.prototype.iterate = function() {
+			var size = view.size;
+			this.vector.y += this.gravity;
+			this.vector.x *= 0.99;
+			var pre = this.point + this.vector;
+			if (pre.x < this.radius || pre.x > size.width - this.radius)
+				this.vector.x *= -this.dampen;
+			if (pre.y < this.radius || pre.y > size.height - this.radius) {
+				if (Math.abs(this.vector.x) < 3)
+					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);
+		};
+
+
+		var balls = [];
 		for (var i = 0; i < 10; i++) {
 			var position = Point.random() * view.size,
 				vector = (Point.random() - [0.5, 0]) * [50, 100],
@@ -70,9 +67,11 @@
 			balls.push(ball);
 		}
 
-		var textItem = new PointText(20, 30);
-		textItem.fillColor = 'black';
-		textItem.content = 'Click, drag and release to add balls.'
+		var textItem = new PointText({
+			point: [20, 30],
+			fillColor: 'black',
+			content: 'Click, drag and release to add balls.'
+		});
 
 		var lastDelta;
 		function onMouseDrag(event) {