Update examples to PaperScript.

examples/Animated/RadialRainbows.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,15 +33,13 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		var vector = new Point(document.size.height, 0);
-			var doc = new Document(canvas);
+		var point = new Point(document.size) / 2;
-			var vector = new Point(doc.size.height, 0);
-			var point = new Point(doc.size).divide(2);
 		var gradient = new Gradient();
 		gradient.type = 'radial';
-			var gradientColor = new GradientColor(gradient, point, point.add(vector));
+		var gradientColor = new GradientColor(gradient, point, point + vector);
 		
 		var colors = ['red', 'orange', 'yellow', 'green', 'blue'];
 		var stops = [];
@@ -50,7 +49,7 @@
 		}
 		
 		gradient.stops = stops;
-			var path = new Path.Rectangle(new Rectangle([0, 0], doc.size));
+		var path = new Path.Rectangle(new Rectangle([0, 0], document.size));
 		path.fillColor = gradientColor;
 		var mouseDown = false;
 		var tool = new Tool({
@@ -79,9 +78,8 @@
 			vector.length += (grow ? 1 : -1);
 			vector.angle += 5;
 			if (!mouseDown) {
-					gradientColor.hilite = point.add(vector);
+				gradientColor.hilite = point + vector;
-					doc.redraw();
+				document.redraw();
-				}
 			}
 		}
 	</script>

examples/Animated/RoundedRectangles.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,11 +33,9 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		var mousePoint = document.bounds.center;
-			var doc = new Document(canvas);
-			var mousePoint = new Point(doc.size.divide(2));
 		
 		var amount = 25;
 		var colors = ['red', 'white', 'blue', 'white'];
@@ -58,19 +57,18 @@
 			}
 		});
 		
-			var children = paper.document.activeLayer.children;
+		var children = document.activeLayer.children;
 		var count = 0;
 		function draw() {
 			count++;
 			for (var i = 0, l = children.length; i < l; i++) {
 				var item = children[i];
-					var delta = mousePoint.subtract(item.position).divide(i + 1);
+				var delta = (mousePoint - item.position) / (i + 1);
 				item.rotate(Math.sin((count + i) / 10) * 7);
 				if (delta.length > 0.1)
 					item.translate(delta);
 			}
-				doc.redraw();
+			document.redraw();
-			}
 		}
 	</script>
 </head>

examples/Animated/animatedStar.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,22 +33,21 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		var layer = document.activeLayer;
-			var doc = new Document(canvas);
-			var layer = doc.activeLayer;
 	
 		var values = {
 			count: 34,
 			points: 32
 		}
 	
-			var center = new Point(doc.size).divide(2)
+		var center = new Point(document.size) / 2;
 		for (var i = 0; i < values.count; i++) {
 			var offset = new Point(20 + 10 * i, 0);
 			var path = new Path();
 			path.fillColor = i % 2 ? 'red' : 'black';
+			console.log(path.fillColor);
 			path.closed = true;
 		
 			var l = offset.length;
@@ -55,7 +55,7 @@
 				offset.angle += 360 / values.points;
 				var vector = offset.clone()
 				vector.length = l * (j % 2 ? 0.1 : -0.1);
-					path.add(offset.add(vector));
+				path.add(offset + vector);
 			}
 			path.smooth();
 			var placedSymbol = new PlacedSymbol(path);
@@ -72,8 +72,7 @@
 				var angle = (values.count - i) * Math.sin(count / 128) / 10;
 				item.rotate(angle);
 			}
-				doc.redraw();
+			document.redraw();
-			}
 		}
 	</script>
 </head>

examples/Scripts/BouncingBalls.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,12 +33,8 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-
 		var balls = [];
 
 		var circlePath = new Path.Circle([0, 0], 10);
@@ -52,9 +49,9 @@
 		var Ball = Base.extend({
 			initialize: function(point, vector) {
 				if (!vector || vector.isZero()) {
-						this.vector = Point.random().multiply(5);
+					this.vector = Point.random() * 5;
 				} else {
-						this.vector = vector.multiply(1.5);
+					this.vector = vector * 1.5;
 				}
 				this.point = point;
 				this.dampen = 0.4;
@@ -71,32 +68,32 @@
 				var x = this.point.x;
 				var y = this.point.y;
 				var radius = this.radius;
-					this.point.x = Math.min(Math.max(radius, x), doc.size.width - radius);
+				this.point.x = Math.min(Math.max(radius, x), document.size.width - radius);
-					this.point.y = Math.min(Math.max(radius, y), doc.size.height - radius);
+				this.point.y = Math.min(Math.max(radius, y), document.size.height - radius);
 			},
 
 			iterate: function() {
 				this.vector.y += this.gravity;
 				this.vector.x *= 0.99;
-					var pre = this.point.add(this.vector);
+				var pre = this.point + this.vector;
-					if (pre.x < this.radius || pre.x > doc.size.width - this.radius)
+				if (pre.x < this.radius || pre.x > document.size.width - this.radius)
 					this.vector.x *= -this.dampen;
-					if (pre.y < this.radius || pre.y > doc.size.height - this.radius) {
+				if (pre.y < this.radius || pre.y > document.size.height - this.radius) {
 					if (Math.abs(this.vector.x) < 3) {
 						this.vector.x = Math.random() * 150 - 75;
 						this.vector.y = Math.random() * 100 + 20;
 					}
 					this.vector.y *= this.bounce;
 				}
-					this.point = this.point.add(this.vector);
+				this.point = this.point + this.vector;
 				this.contrainPoint();
 				this.item.position = this.point;
 			}
 		});
 
 		for (var i = 0; i < 10; i++) {
-				var position = Point.random().multiply(doc.size);
+			var position = Point.random() * document.size;
-				var vector = Point.random().subtract(0.5, 0).multiply(50, 100);
+			var vector = (Point.random() - [0.5, 0]) * [50, 100];
 			var ball = new Ball(position, vector);
 			balls.push(ball);
 		}
@@ -123,8 +120,7 @@
 				balls[i].iterate();
 			}
 			boundPath.bounds = group.bounds;
-				doc.redraw();
+			document.redraw();
-			}
 		}
 	</script>
 </head>

examples/Scripts/arcTo.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,12 +33,9 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		var point = document.bounds.center;
-			var doc = new Document(canvas);
-
-			var point = new Point(1024, 768).divide(2);
 		for (var i = 0; i < 30; i++) {
 			var vector = new Point(10 + 20 * i, 0).rotate(i);
 			var l = vector.length;
@@ -47,15 +45,14 @@
 			for (var j = 0; j < 17; j++) {
 				vector = vector.rotate(45 / 2);
 				if (j == 0) {
-						path.add(point.add(vector));
+					path.add(point + vector);
 				} else {
-						path.arcTo(point.add(vector), true);
+					path.arcTo(point + vector, true);
 				}
 			}
-				doc.activeLayer.appendBottom(path);
+			document.activeLayer.appendBottom(path);
-			}
-			doc.redraw();
 		}
+		document.redraw();
 	</script>
 </head>
 <body>

examples/Scripts/circle.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,19 +33,14 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		var count = 0;
+	<script type="text/paperscript" canvas="canvas">
-		var doc;
+		var center = document.bounds.center;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
-			var center = doc.size.divide(2);
 		for (var i = 0; i < 70; i++) {
 			var path = new Path.Circle(center, i * 5);
 			path.strokeColor = 'black';
 		}
-			doc.redraw();
+		document.redraw();
-		}
 	</script>
 </head>
 <body>

examples/Scripts/letter.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,11 +33,8 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-
 		var letterPath = new Path(
 			new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
 			new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
@@ -55,8 +53,7 @@
 		);
 		letterPath.closed = true;
 		letterPath.fillColor = 'black';
-			doc.redraw();
+		document.redraw();
-		}
 	</script>
 </head>
 <body>

examples/Scripts/lines.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,25 +33,24 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
 		var count = 0;
-		var doc;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
 		setInterval(draw, 20);
-		}
 		
 		function draw() {
 			count++;
-			doc.activeLayer.children = [];
+			document.activeLayer.children = [];
-			var point = new Point(1024, 768).divide(2);
+			var point = new Point(document.size) / 2;
 			var vector = new Point(100, 0);
 			for (var i = 0; i < 180; i++) {
-				var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
+				var center = point + vector.rotate(i * 2).normalize(30);
+				var length = 30 + Math.abs(Math.sin((i + count / 20)) * 300);
+				var end = point + vector.rotate(i * 2).normalize(length);
+				var path = new Path.Line(center, end);
 				path.strokeColor = i % 4 ? 'black' : 'red';
 			}
-			doc.redraw();
+			document.redraw();
 		}
 	</script>
 </head>

examples/Scripts/rectangle.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,16 +33,11 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		var count = 0;
+	<script type="text/paperscript" canvas="canvas">
-		var doc;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
 		var path = new Path.Rectangle([50, 50], [100, 100]);
 		path.strokeColor = 'black';
-			doc.redraw();
+		document.redraw();
-		}
 	</script>
 </head>
 <body>

examples/Scripts/roundRectangle.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,22 +33,18 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
 		var count = 0;
-		var doc;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
 		setInterval(draw, 30);
-		}
 		function draw() {
 			count++;
-			doc.activeLayer.children = [];
+			document.activeLayer.children = [];
 			var rect = new Rectangle([150, 150], [300, 300]);
 			var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
 			var path = new Path.RoundRectangle(rect, size);
 			path.fillColor = 'black';
-			doc.redraw();
+			document.redraw();
 		}
 	</script>
 </head>

examples/Scripts/star.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,12 +33,9 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		var point = new Point(document.size) / 2;
-			var doc = new Document(canvas);
-
-			var point = new Point(1024, 768).divide(2);
 		for (var i = 0; i < 30; i++) {
 			var vector = new Point(1 + 10 * i, 0).rotate(i);
 			var l = vector.length;
@@ -46,14 +44,13 @@
 			path.closed = true;
 			for (var j = 0; j < 32; j++) {
 				vector = vector.rotate(45 / 4);
-					var newPoint = point.add(vector).add(vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1)));
+				var newPoint = point + vector + vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1));
 				path.add(newPoint);
 			}
 			path.smooth();
-				doc.activeLayer.appendBottom(path);
+			document.activeLayer.appendBottom(path);
-			}
-			doc.redraw();
 		}
+		document.redraw();
 	</script>
 </head>
 <body>

examples/Scripts/strokeJoin.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,10 +33,8 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
 		var path = new Path([100, 150], [150, 200], [200, 150]);
 		path.strokeColor = 'black';
 		path.strokeWidth = 30;
@@ -68,9 +67,8 @@
 		path.strokeWidth = 30;
 		path.strokeJoin = 'miter';
 		path.strokeCap = 'butt';
-			
+		console.log(path.segments);
-			doc.redraw();
+		document.redraw();
-		}
 	</script>
 </head>
 <body>

examples/Tools/BezierTool.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,11 +33,9 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		document.currentStyle = {
-			var doc = new Document(canvas);
-			doc.currentStyle = {
 			strokeColor: '#4f7aff',
 			strokeWidth: 1
 		};
@@ -68,8 +67,7 @@
 		lastInCircle.position = [-100, -100];
 
 		var curRect;
-			var tool = new Tool({
+		function onMouseDown(event) {
-				onMouseDown: function(event) {
 			if (event.count > 1) {
 				var first = lastInLine.segments.first;
 				first.point = inLine.segments.first.point;
@@ -86,32 +84,30 @@
 			inLine.visible = true;
 			outLine.visible = true;
 			
-					outCircle.position = event.point.round().add(0.5, 0.5);
+			outCircle.position = event.point.round() + [0.5, 0.5];
-					inCircle.position = event.point.round().add(0.5, 0.5);
+			inCircle.position = event.point.round() + [0.5, 0.5];
 			
 			var rect = new PlacedSymbol(rectSymbol);
-					rect.position = event.point.round().add(0.5, 0.5);
+			rect.position = event.point.round() + [0.5, 0.5];
 			
 			curRect = new Path.Rectangle([0.5, 0.5], [4, 4]);
 			curRect.position = event.point.round();
 			curRect.fillColor = '#4f7aff';
 			curRect.strokeWidth = 0;
-				},
+		}
 			
-				onMouseDrag: function(event) {
+		function onMouseDrag(event) {
-					var delta = event.point.subtract(event.downPoint);
+			var delta = event.point - event.downPoint;
 			currentSegment.handleOut = delta;
-					currentSegment.handleIn = delta.multiply(-1);
+			currentSegment.handleIn = -delta;
-					outLine.segments.last.point = currentSegment.handleIn.add(event.downPoint);
+			outLine.segments.last.point = currentSegment.handleIn + event.downPoint;
-					inLine.segments.last.point = currentSegment.handleOut.add(event.downPoint);
+			inLine.segments.last.point = currentSegment.handleOut + event.downPoint;
 			outCircle.position = outLine.segments.last.point;
 			inCircle.position = inLine.segments.last.point;
-				},
-				
-				onMouseUp: function(event) {
-					curRect.remove();
 		}
-			});
+			
+		function onMouseUp(event) {
+			curRect.remove();
 		}
 	</script>
 </head>

examples/Tools/Circles.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,25 +33,20 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
 			var path;
-			var tool = new Tool({
+			function onMouseDrag(event) {
-				onMouseDrag: function(event) {
 				if (path) path.remove();
-					var distance = event.downPoint.subtract(event.point).length;
+				var distance = (event.downPoint - event.point).length;
 				path = new Path.Circle(event.downPoint, distance);
 				path.strokeColor = 'black';
 				path.fillColor = 'white';
-				},
+			};
 
-				onMouseUp: function(event) {
+			function onMouseUp(event) {
 				path = null;
 			}
-			});
-		}
 	</script>
 </head>
 <body>

examples/Tools/Clouds.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,26 +33,21 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
 		var path;
-			var tool = new Tool({
+		function onMouseDown(event) {
-				onMouseDown: function(event) {
 			path = new Path();
 			path.strokeColor = 'black';
 			path.strokeWidth = 5;
 			path.strokeJoin = 'round';
 			path.strokeCap = 'round';
 			path.add(event.point);
-				},
+		}
-				onMouseDrag: function(event) {
+		function onMouseDrag(event) {
 			path.arcTo(event.point, true);
 		}
-			});
 		tool.minDistance = 30;
-		}
 	</script>
 </head>
 <body>

examples/Tools/Dripping Brush.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,16 +33,12 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			
 		var path;
 		var minSize = 5;
-			
+		tool.maxDistance = 20;
-			var tool = new Tool({
+		function onMouseDrag(event) {
-				onMouseDrag: function(event) {
 			// If the user dragged more then minSize:
 			if (event.delta.length > minSize) {
 				// If there is no path, make one:
@@ -51,20 +48,20 @@
 					path.add(event.lastPoint);
 				}
 
-						var step = event.delta.divide(2);
+				var step = event.delta / 2;
 				step.angle = step.angle + 90;
 
 				// The top point: the middle point + the step rotated by 90 degrees:
 				//   -----*
 				//   |
 				//   ------
-						var top = event.middlePoint.add(step);
+				var top = event.middlePoint + step;
 
 				// The bottom point: the middle point - the step rotated by 90 degrees:
 				//   ------
 				//   |
 				//   -----*
-						var bottom = event.middlePoint.subtract(step);
+				var bottom = event.middlePoint - step;
 
 				path.add(top);
 				path.insert(0, bottom);
@@ -83,9 +80,9 @@
 					path = null;
 				}
 			}
-				},
+		}
 	
-				onMouseUp: function(event) {
+		function onMouseUp(event) {
 			if (path) {
 				path.add(event.point);
 				path.closed = true;
@@ -96,9 +93,6 @@
 				path = null;
 			}
 		}
-			});
-			tool.maxDistance = 20;
-		}
 	</script>
 </head>
 <body>

examples/Tools/Fancy Brush.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,45 +33,44 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		////////////////////////////////////////////////////////////////////////////////
-			var doc = new Document(canvas);
+		// This script belongs to the following tutorial:
+		//
+		// http://scriptographer.org/tutorials/geometry/working-with-mouse-vectors/#adding-brush-stroke-ends
+
+		tool.fixedDistance = 80;
 
 		var path;
 		var strokeEnds = 6;
 
-			////////////////////////////////////////////////////////////////////////////////
+		function onMouseDown(event) {
-			// Mouse handling
-
-			var lastPoint;
-			
-			var tool = new Tool({
-				onMouseDown: function(event) {
 			path = new Path();
 			path.fillColor = event.count % 2 ? 'red' : 'black';
-				},
+		}
 
-				onMouseDrag: function(event) {
+		var lastPoint;
+		function onMouseDrag(event) {
 			// If this is the first drag event,
 			// add the strokes at the start:
 			if (event.count == 1) {
-						addStrokes(event.middlePoint, event.delta.multiply(-1));
+				addStrokes(event.middlePoint, event.delta * -1);
 			} else {
-						var step = event.delta.divide(2);
+				var step = event.delta / 2;
-						step.angle = step.angle + 90;
+				step.angle += 90;
 
 				// The top point: the middle point + the step rotated by 90 degrees:
 				//   -----*
 				//   |
 				//   ------
-						var top = event.middlePoint.add(step);
+				var top = event.middlePoint + step;
 
 				// The bottom point: the middle point - the step rotated by 90 degrees:
 				//   ------
 				//   |
 				//   -----*
-						var bottom = event.middlePoint.subtract(step);
+				var bottom = event.middlePoint - step;
 
 				path.add(top);
 				path.insert(0, bottom);
@@ -78,34 +78,31 @@
 			path.smooth();
 
 			lastPoint = event.middlePoint;
-				},
+		}
 
-				onMouseUp: function(event) {
+		function onMouseUp(event) {
-					var delta = event.point.subtract(lastPoint);
+			var delta = event.point - lastPoint;
 			delta.length = tool.maxDistance;
 			addStrokes(event.point, delta);
 			path.closed = true;
 			path.smooth();
 		}
-			});
 
 		function addStrokes(point, delta) {
 			var step = delta.rotate(90);
 			var strokePoints = strokeEnds * 2 + 1;
-				point = point.subtract(step.divide(2));
+			point -= step / 2;
-				step = step.divide(strokePoints - 1);
+			step /= strokePoints - 1;
 			for(var i = 0; i < strokePoints; i++) {
-					var strokePoint = point.add(step.multiply(i));
+				var strokePoint = point + step * i;
-					var offset = delta.multiply(Math.random() * 0.3 + 0.1);
+				var offset = delta * (Math.random() * 0.3 + 0.1);
 				if (i % 2) {
-						offset = offset.multiply(-1);
+					offset *= -1;
 				}
-					strokePoint = strokePoint.add(offset);
+				strokePoint += offset;
 				path.insert(0, strokePoint);
 			}
 		}
-			tool.fixedDistance = 80;
-		}
 	</script>
 </head>
 <body>

examples/Tools/Grid.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,36 +33,38 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
+		/////////////////////////////////////////////////////////////////////
+		// Values
 
-			var values = { size: 10 };
+		tool.fixedDistance = 10;
+
+		var values = { size: tool.fixedDistance };
+
+		/////////////////////////////////////////////////////////////////////
+		// Mouse handling
 
 		var point, path;
 
 		function getPos(pt) {
-				return (pt.divide(values.size)).round().multiply(values.size);
+			return (pt / values.size).round() * values.size;
 		}
 
-			var canvas = document.getElementById('canvas');
+		function onMouseDown(event) {
-			var doc = new Document(canvas);
-			var point, path;
-			var tool = new Tool({
-				onMouseDown: function(event) {
 			point = getPos(event.point);
 			path = new Path();
 			path.strokeColor = 'black';
 			path.add(point);
-				},
+		}
-				onMouseDrag: function(event) {
+
+		function onMouseDrag(event) {
 			var p = getPos(event.point);
-					if (!point.equals(p)) {
+			if (point != p) {
 				path.add(p);
 				point = p;
 			}
 		}
-			});
-		}
 	</script>
 </head>
 <body>

examples/Tools/Wave.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,38 +33,41 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		//////////////////////////////////////////////////////////////////////
-			var doc = new Document(canvas);
+		// Values
+
+		tool.minDistance = 10;
+
 		var values = {
 			curviness: 0.5,
-				distance: 10,
+			distance: tool.minDistance,
 			offset: 10,
 			mouseOffset: true
 		};
 
-			var path;
+		//////////////////////////////////////////////////////////////////////
-			var mul = 1;
+		// Mouse handling
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					path = new Path();
-					path.strokeColor = 'black';
-				},
 
-				onMouseDrag: function(event) {
+		var path;
+		function onMouseDown(event) {
+			path = new Path();
+		}
+
+		var mul = 1;
+		function onMouseDrag(event) {
 			var step = event.delta.rotate(90 * mul);
+
 			if (!values.mouseOffset)
 				step.length = values.offset;
-					var segment = new Segment(event.point.add(step));
+
-					segment.handleIn = event.delta.multiply(-values.curviness);
+			var segment = new Segment(event.point + step);
-					segment.handleOut = event.delta.multiply(values.curviness);
+			segment.handleIn = -event.delta * values.curviness;
+			segment.handleOut = event.delta * values.curviness;
 			path.add(segment);
 			mul *= -1;
 		}
-			});
-			tool.fixedDistance = 10;
-		}
 	</script>
 </head>
 <body>

examples/Tools/Worm Farm.html

@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,30 +33,33 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
-		window.onload = function() {
+	<script type="text/paperscript" canvas="canvas">
-			var canvas = document.getElementById('canvas');
+		/////////////////////////////////////////////////////////////////////
-			var doc = new Document(canvas);
+		// Values
 
 		var values  = {
-				minDistance: 30,
+			minDistance: 10,
 			varyThickness: true
 		};
 
-			////////////////////////////////////////////////////////////////////////////////
+		/////////////////////////////////////////////////////////////////////
 		// Mouse handling
 
+		tool.minDistance = values.minDistance;
+
 		var worm;
 
-			var tool = new Tool({
+		// Every time the user clicks the mouse to drag we create a path
-				onMouseDown: function(event) {
+		// and when a user drags the mouse we add points to it
+		function onMouseDown(event) {
 			worm = new Path();
 			worm.fillColor = '#ffffff';
 			worm.strokeColor = '#000000';
 			worm.add(event.point);
-				},
+		}
 
-				onMouseDrag: function(event) {
+		function onMouseDrag(event) {
 			// the vector in the direction that the mouse moved
 			var step = event.delta;
 
@@ -64,21 +68,24 @@
 			if (values.varyThickness) {
 				step.length = step.length / 2;
 			} else {
-						// otherwise set the length of the step vector to half of minDistance
+				// otherwise set the length of the step vector to half of
+				// minDistance
 				step.length = values.minDistance / 2;
 			}
 
-					// the top point: the middle point + the step rotated by -90 degrees
+			// the top point: the middle point + the step rotated by -90
+			// degrees
 			//   -----*
 			//   |
 			//   ------
-					var top = event.middlePoint.add(step.rotate(-90));
+			var top = event.middlePoint + step.rotate(-90);
 
-					// the bottom point: the middle point + the step rotated by 90 degrees
+			// the bottom point: the middle point + the step rotated by 90
+			// degrees
 			//   ------
 			//   |
 			//   -----*
-					var bottom = event.middlePoint.add(step.rotate(90));
+			var bottom = event.middlePoint + step.rotate(90);
 
 			// add the top point to the end of the path
 			worm.add(top);
@@ -92,17 +99,13 @@
 
 			// smooth the segments of the path
 			worm.smooth();
-				},
+		}
 
-				onMouseUp: function(event) {
+		function onMouseUp(event) {
 			worm.closed = true;
 			worm.add(event.point);
 			worm.smooth();
 		}
-			});
-			tool.fixedDistance = 3;
-			tool.minDistance = values.minDistance;
-		}
 	</script>
 </head>
 <body>