Merge remote-tracking branch 'origin/master'

examples/Animated/AnimatedStar.html

@@ -27,7 +27,7 @@
 			}
 			path.smooth();
 			var placedSymbol = new PlacedSymbol(path);
-			layer.appendBottom(placedSymbol);
+			layer.insertChild(0, placedSymbol);
 		}
 		layer.position = view.center;
 		

examples/Animated/Extruded.html

@@ -28,7 +28,7 @@
 		for (var i = 0; i < lineCount; i++) {
 			var linePath = new Path.Line([0, 0], [0, 0]);
 			linePath.strokeColor = 'red';
-			lineGroup.appendTop(linePath);
+			lineGroup.addChild(linePath);
 		}
 
 		var path1 = new Path();

examples/Scripts/Arcs.html

@@ -21,7 +21,7 @@
 					path.arcTo(point + vector, true);
 				}
 			}
-			project.activeLayer.appendBottom(path);
+			project.activeLayer.insertChild(0, path);
 		}
 	</script>
 </head>

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.radius = 50 * Math.random() + 30;
-				this.item = new Path.Circle(point, this.radius);
+				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');
+				var gradient = new Gradient([color, 'black'], 'radial');
-				this.item.fillColor = new GradientColor(gradient, point,
+				compound.children[0].fillColor = new GradientColor(gradient, this.point,
-						point + this.radius, this.radius * 0.8);
+						this.point + this.radius, overlayPos);
-				this.item.blendMode = 'luminosity';
+				var overlay = new Path.Circle(overlayPos, this.radius / 2);
-//				this.item.opacity = 0.75;
+				var overlayColor = color.clone();
-				group.appendTop(this.item);
+				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 position = Point.random() * view.size,
-			var vector = (Point.random() - [0.5, 0]) * [50, 100];
+				vector = (Point.random() - [0.5, 0]) * [50, 100],
-			var ball = new Ball(position, vector);
+				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 keepalive="true"></canvas>
-	<canvas id="canvas" resize stats keepalive="true"></canvas>
 </body>
 </html>

examples/Scripts/DivisionRaster.html

@@ -46,7 +46,7 @@ function onMouseMove(event) {
 			var topLeft = bounds.topLeft.floor();
 			var path = new Path.Rectangle(topLeft, size.ceil());
 			path.fillColor = raster.getAverageColor(path);
-			path.moveBelow(child);
+			path.insertBelow(child);
 
 			var secondPath = path.clone();
 			size = size.floor();
@@ -54,7 +54,7 @@ function onMouseMove(event) {
 					? [size.width, 0]
 					: [0, size.height];				
 			secondPath.fillColor = raster.getAverageColor(secondPath);
-			secondPath.moveBelow(path);
+			secondPath.insertBelow(path);
 
 			// Remove the path which was split:
 			child.remove();

examples/Scripts/PhyllotaxisRaster.html

@@ -46,7 +46,7 @@
 				var cornerSize = new Size(radius / 4);
 				var path = new Path.RoundRectangle(rectangle, cornerSize);
 				path.rotate(i * rotation + 45);
-				group.appendTop(path);
+				group.addChild(path);
 			}
 			return group;
 		}