From e772038727945d7dcd1108a1ba3ce7e8894ab492 Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Sun, 20 Feb 2011 23:28:38 +0100
Subject: [PATCH] Update examples.

---
 examples/Animated/RadialRainbows.html    |   2 +
 examples/Animated/RoundedRectangles.html |  46 ++++++----
 examples/Animated/animatedStar.html      |  59 ++++++++----
 examples/Scripts/BouncingBalls.html      | 111 +++++++++++++++--------
 examples/Scripts/arcTo.html              |   5 +
 examples/Scripts/circle.html             |   5 +
 examples/Scripts/letter.html             |   5 +
 examples/Scripts/lines.html              |   5 +
 examples/Scripts/rectangle.html          |   5 +
 examples/Scripts/roundRectangle.html     |   5 +
 examples/Scripts/star.html               |   5 +
 examples/Scripts/strokeJoin.html         |   5 +
 examples/Tools/Circles.html              |   5 +
 examples/Tools/Clouds.html               |   5 +
 examples/Tools/Dripping Brush.html       |   5 +
 examples/Tools/Fancy Brush.html          |   5 +
 examples/Tools/Grid.html                 |   5 +
 examples/Tools/MultiLines.html           |   5 +
 examples/Tools/Wave.html                 |   5 +
 examples/Tools/Worm Farm.html            |   5 +
 20 files changed, 223 insertions(+), 75 deletions(-)

diff --git a/examples/Animated/RadialRainbows.html b/examples/Animated/RadialRainbows.html
index 638c8acc..987b69d7 100644
--- a/examples/Animated/RadialRainbows.html
+++ b/examples/Animated/RadialRainbows.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
diff --git a/examples/Animated/RoundedRectangles.html b/examples/Animated/RoundedRectangles.html
index cffc8dee..cfc53c18 100644
--- a/examples/Animated/RoundedRectangles.html
+++ b/examples/Animated/RoundedRectangles.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,22 +27,26 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
-		var doc, mousePoint, amount = 25;
-		var count = 0, paths = [];
-		var colors = ['red', 'white', 'blue', 'white'];
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
-			doc = new Doc(canvas);
-			mousePoint = doc.size.divide(2);
+			var doc = new Doc(canvas);
+			var mousePoint = new Point(doc.size.divide(2));
+			
+			var amount = 25;
+			var colors = ['red', 'white', 'blue', 'white'];
+			
 			for (var i = 0; i < amount; i++) {
 				var rect = new Rectangle([0, 0], [25, 25]);
 				rect.center = mousePoint;
 				var path = new Path.RoundRectangle(rect, 6);
 				path.fillColor = colors[i % 4];
 				var scale = (1 - i / amount) * 20;
-				path.scale(scale, scale);
-				paths.push(path);
+				path.scale(scale);
+				new PlacedSymbol(path);
 			}
 			setInterval(draw, 30);
 			
@@ -48,19 +54,21 @@
 				onMouseDrag: function(event) {
 					mousePoint = event.point;
 				}
-			})
-		}
-		
-		function draw() {
-			count++;
-			for (var i = 0; i < amount; i++) {
-				var path = paths[i];
-				path.rotate(Math.sin((count + i) / 10) * 3);
-				var position = path.position;
-				var delta = mousePoint.subtract(position);
-				path.position = position.add(delta.divide(i));
+			});
+			
+			var children = Paper.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);
+					item.rotate(Math.sin((count + i) / 10) * 7);
+					if(delta.length > 0.1)
+						item.translate(delta);
+				}
+				doc.redraw();
 			}
-			doc.redraw();
 		}
 	</script>
 </head>
diff --git a/examples/Animated/animatedStar.html b/examples/Animated/animatedStar.html
index 74c0594e..a36189d3 100644
--- a/examples/Animated/animatedStar.html
+++ b/examples/Animated/animatedStar.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,34 +27,51 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
-		var canvas, doc;
-		var count = 0;
 		window.onload = function() {
-			canvas = document.getElementById('canvas');
-			doc = new Doc(canvas);
-			setInterval(draw, 60);
-		}
-
-		function draw() {
-			count++;
-			doc.activeLayer.children = [];
-			var point = new Point(1024, 768).divide(2);
-			for (var i = 0; i < 35; i++) {
-				var vector = new Point(20 + 10 * i, 0).rotate(i * (360 / 35 * 2) * Math.sin(count / 150));
-				var l = vector.length;
+			var canvas = document.getElementById('canvas');
+			var doc = new Doc(canvas);
+			var layer = doc.activeLayer;
+			
+			var values = {
+				count: 34,
+				points: 32
+			}
+			
+			var center = new Point(doc.size).divide(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';
 				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)));
-					path.add(newPoint);
+				
+				var l = offset.length;
+				for (var j = 0; j < values.points * 2; j++) {
+					offset.angle += 360 / values.points;
+					var vector = offset.clone()
+					vector.length = l * (j % 2 ? 0.1 : -0.1);
+					path.add(offset.add(vector));
 				}
 				path.smooth();
+				var placedSymbol = new PlacedSymbol(path);
+				placedSymbol.position = center;
+				layer.appendBottom(placedSymbol);
+			}
+			setInterval(draw, 30);
+
+			var count = 0;
+			function draw() {
+				count++;
+				for (var i = 0, l = layer.children.length; i < l; i++) {
+					var item = layer.children[i];
+					var angle = (values.count - i) * Math.sin(count / 128) / 10;
+					item.rotate(angle);
+				}
+				doc.redraw();
 			}
-			doc.activeLayer.children.reverse();
-			doc.redraw();
 		}
 	</script>
 </head>
diff --git a/examples/Scripts/BouncingBalls.html b/examples/Scripts/BouncingBalls.html
index 2f6ceced..a9d4c3ac 100644
--- a/examples/Scripts/BouncingBalls.html
+++ b/examples/Scripts/BouncingBalls.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,45 +27,83 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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 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 type="text/javascript" src="../../src/document/Symbol.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script>
-		var count = 0, balls = [];
-		var ball;
-		var doc, amount = 50, group;
 		window.onload = function() {
+			
+			var canvas = document.getElementById('canvas');
+			var doc = new Doc(canvas);
+			
+			var balls = [];
+			
+			
+			var circlePath = new Path.Circle([0, 0], 10);
+			circlePath.fillColor = new GradientColor(null, [0, 0], [0, 12], [0, 2]);
+			circlePath.fillColor.gradient.type = 'radial';
+			
+			var symbol = new Symbol(circlePath);
+			
+			var group = new Group();
+			
 			var Ball = Base.extend({
 				initialize: function(point, vector) {
-					this.vector = vector;
+					if (vector.isZero()) {
+						this.vector = Point.random().multiply(5);
+					} else {
+						this.vector = vector;
+					}
 					this.point = point;
 					this.dampen = 0.4;
 					this.gravity = 3;
-					this.bounce = -0.8;
+					this.bounce = -0.6;
 					this.radius = 50 * Math.random() + 10;
-					this.path = new Path.Circle(this.point, this.radius);
-					this.path.fillColor = 'black';
-					this.path.strokeColor = 'white';
-					this.path.strokeWidth = 3;
-					group.appendTop(this.path);
+					this.item = new PlacedSymbol(symbol);
+					this.item.position = point;
+					this.item.scale(this.radius / 10);
+					group.appendTop(this.item);
 				},
-
+				
+				contrainPoint: function() {
+					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.y = Math.min(Math.max(radius, y), doc.size.height - radius);
+				},
+				
 				iterate: function() {
 					this.vector.y += this.gravity;
+					this.vector.x *= 0.99;
 					var pre = this.point.add(this.vector);
-					if(pre.x < this.radius || pre.x > doc.size.width - this.radius)
+					if (pre.x < this.radius || pre.x > doc.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 > doc.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);
-					if(Math.abs(this.vector.x) < 3) {
-						this.vector.x = Math.random() * 100 - 50;
-						this.vector.y = Math.random() * 50;
 					}
-					this.path.position = this.point;
+					this.point = this.point.add(this.vector);
+					this.contrainPoint();
+					this.item.position = this.point;
 				}
 			});
-
-			var canvas = document.getElementById('canvas');
-			doc = new Doc(canvas);
-			group = new Group();
+			
+			for(var i = 0; i < 10; i++) {
+				var position = Point.random().multiply(doc.size);
+				var vector = Point.random().subtract(0.5, 0).multiply(50, 100);
+				var ball = new Ball(position, vector);
+				balls.push(ball);
+			}
+			
 			var lastPoint;
 			tool = new Tool({
 				onMouseDown: function(event) {
@@ -73,23 +113,22 @@
 					lastPoint = event.point;
 				},
 				onMouseUp: function(event) {
-					balls.push(new Ball(event.point, lastPoint.subtract(event.point)));
+					var delta = lastPoint.subtract(event.point);
+					var ball = new Ball(event.point, delta);
+					balls.push(ball);
 				}
 			});
 			setInterval(draw, 30);
-		}
-		var boundPath;
-		function draw() {
-			for (var i = 0, l = balls.length; i < l; i++) {
-				balls[i].iterate();
-			}
-			if(balls.length) {
-				if(boundPath)
-					boundPath.remove();
-				boundPath = new Path.Rectangle(group.bounds);
-				boundPath.strokeColor = 'black';
-				boundPath.strokeWidth = 5;
-				boundPath.strokeCap = 'round';
+			
+			var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
+			boundPath.strokeColor = 'red';
+			boundPath.strokeWidth = 1;
+
+			function draw() {
+				for (var i = 0, l = balls.length; i < l; i++) {
+					balls[i].iterate();
+				}
+				boundPath.bounds = group.bounds;
 				doc.redraw();
 			}
 		}
diff --git a/examples/Scripts/arcTo.html b/examples/Scripts/arcTo.html
index 1756c508..4b84e704 100644
--- a/examples/Scripts/arcTo.html
+++ b/examples/Scripts/arcTo.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Scripts/circle.html b/examples/Scripts/circle.html
index 34476c04..f0b839ab 100644
--- a/examples/Scripts/circle.html
+++ b/examples/Scripts/circle.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/letter.html b/examples/Scripts/letter.html
index f2f5bb96..32a22d0d 100644
--- a/examples/Scripts/letter.html
+++ b/examples/Scripts/letter.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Scripts/lines.html b/examples/Scripts/lines.html
index d9068f90..f9c72f42 100644
--- a/examples/Scripts/lines.html
+++ b/examples/Scripts/lines.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/rectangle.html b/examples/Scripts/rectangle.html
index f6f256c5..75cd785a 100644
--- a/examples/Scripts/rectangle.html
+++ b/examples/Scripts/rectangle.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/roundRectangle.html b/examples/Scripts/roundRectangle.html
index ae74452a..2cf44cdd 100644
--- a/examples/Scripts/roundRectangle.html
+++ b/examples/Scripts/roundRectangle.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		var count = 0;
 		var doc;
diff --git a/examples/Scripts/star.html b/examples/Scripts/star.html
index d3831f76..6f12939f 100644
--- a/examples/Scripts/star.html
+++ b/examples/Scripts/star.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Scripts/strokeJoin.html b/examples/Scripts/strokeJoin.html
index 0b6950f0..1e599c1e 100644
--- a/examples/Scripts/strokeJoin.html
+++ b/examples/Scripts/strokeJoin.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Circles.html b/examples/Tools/Circles.html
index 90e70af1..da434e46 100644
--- a/examples/Tools/Circles.html
+++ b/examples/Tools/Circles.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
diff --git a/examples/Tools/Clouds.html b/examples/Tools/Clouds.html
index b46f420d..ca00ac5a 100644
--- a/examples/Tools/Clouds.html
+++ b/examples/Tools/Clouds.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Dripping Brush.html b/examples/Tools/Dripping Brush.html
index da4ade7f..816ada19 100644
--- a/examples/Tools/Dripping Brush.html	
+++ b/examples/Tools/Dripping Brush.html	
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Fancy Brush.html b/examples/Tools/Fancy Brush.html
index 92940782..5a59536a 100644
--- a/examples/Tools/Fancy Brush.html	
+++ b/examples/Tools/Fancy Brush.html	
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Grid.html b/examples/Tools/Grid.html
index a708a06d..1ef90f09 100644
--- a/examples/Tools/Grid.html
+++ b/examples/Tools/Grid.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			
diff --git a/examples/Tools/MultiLines.html b/examples/Tools/MultiLines.html
index ec1277a6..a931efeb 100644
--- a/examples/Tools/MultiLines.html
+++ b/examples/Tools/MultiLines.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Wave.html b/examples/Tools/Wave.html
index 9d5b9d1e..e82752f0 100644
--- a/examples/Tools/Wave.html
+++ b/examples/Tools/Wave.html
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
diff --git a/examples/Tools/Worm Farm.html b/examples/Tools/Worm Farm.html
index b7848317..d1122326 100644
--- a/examples/Tools/Worm Farm.html	
+++ b/examples/Tools/Worm Farm.html	
@@ -14,7 +14,9 @@
 	<script type="text/javascript" src="../../src/basic/Size.js"></script>
 	<script type="text/javascript" src="../../src/basic/Matrix.js"></script>
 	<script type="text/javascript" src="../../src/document/Doc.js"></script>
+	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Item.js"></script>
+	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
@@ -25,6 +27,9 @@
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
 	<script type="text/javascript" src="../../src/color/GrayColor.js"></script>
+	<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>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');