From 0c53c8b29eadc806f1cfc6c5d6d0def562443e8b Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Wed, 9 Feb 2011 01:10:55 +0100
Subject: [PATCH] Add a few more examples.

---
 examples/Tools/Dripping Brush.html |  98 +++++++++++++++++++++++++++
 examples/Tools/Fancy Brush.html    | 102 +++++++++++++++++++++++++++++
 examples/Tools/Grid.html           |  56 ++++++++++++++++
 examples/Tools/Worm Farm.html      |  98 +++++++++++++++++++++++++++
 4 files changed, 354 insertions(+)
 create mode 100644 examples/Tools/Dripping Brush.html
 create mode 100644 examples/Tools/Fancy Brush.html
 create mode 100644 examples/Tools/Grid.html
 create mode 100644 examples/Tools/Worm Farm.html
diff --git a/examples/Tools/Dripping Brush.html b/examples/Tools/Dripping Brush.html
new file mode 100644
index 00000000..e6b98ba2
--- /dev/null
+++ b/examples/Tools/Dripping Brush.html	
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Example</title>
+	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Item.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Point.js"></script>
+	<script type="text/javascript" src="../../src/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/Size.js"></script>
+	<script type="text/javascript" src="../../src/Segment.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Path.js"></script>
+	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/Tool.js"></script>
+	<script>
+		window.onload = function() {
+			var canvas = document.getElementById('canvas');
+			var doc = new Doc(canvas);
+			
+			var path;
+			var minSize = 5;
+			
+			var tool = new Tool({
+				onMouseDown: function(event) {
+					
+				},
+
+				onMouseDrag: function(event) {
+					// If the user dragged more then minSize:
+					if (event.getDelta().getLength() > minSize) {
+						// If there is no path, make one:
+						if (!path) {
+							path = new Path();
+							path.fillColor = 'black';
+							path.add(event.lastPoint);
+							doc.children.push(path);
+						}
+
+						var step = event.getDelta().divide(2);
+						step.setAngle(step.getAngle() + 90);
+
+						// The top point: the middle point + the step rotated by 90 degrees:
+						//   -----*
+						//   |
+						//   ------
+						var top = event.getMiddlePoint().add(step);
+
+						// The bottom point: the middle point - the step rotated by 90 degrees:
+						//   ------
+						//   |
+						//   -----*
+						var bottom = event.getMiddlePoint().subtract(step);
+
+						path.add(top);
+						path.insert(0, bottom);
+						path.smooth();
+					} else {
+						// If the user dragged too slowly:
+
+						// If there is currently a path, close it
+						if (path) {
+							path.add(event.getPoint());
+							path.closed = true;
+							path.smooth();
+
+							// Set path to null (nothing) so the path check above
+							// will force a new path next time the user drags fast enough:
+							path = null;
+						}
+					}
+				},
+				
+				onMouseUp: function(event) {
+					if (path) {
+						path.add(event.getPoint());
+						path.closed = true;
+						path.smooth();
+
+						// Set path to null (nothing) so the path check above
+						// will force a new path next time the user drags fast enough:
+						path = null;
+					}
+				}
+			});
+
+			tool.setDocument(doc);
+			tool.setMaxDistance(20);
+		}
+	</script>
+</head>
+<body>
+	<canvas id='canvas' width=1024 height=768></canvas>
+</body>
\ No newline at end of file
diff --git a/examples/Tools/Fancy Brush.html b/examples/Tools/Fancy Brush.html
new file mode 100644
index 00000000..eae08389
--- /dev/null
+++ b/examples/Tools/Fancy Brush.html	
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Example</title>
+	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Item.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Point.js"></script>
+	<script type="text/javascript" src="../../src/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/Size.js"></script>
+	<script type="text/javascript" src="../../src/Segment.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Path.js"></script>
+	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/Tool.js"></script>
+	<script>
+		window.onload = function() {
+			var canvas = document.getElementById('canvas');
+			var doc = new Doc(canvas);
+			
+			var path;
+			var strokeEnds = 6;
+			
+			////////////////////////////////////////////////////////////////////////////////
+			// Mouse handling
+
+			var lastPoint;
+			
+			var tool = new Tool({
+				onMouseDown: function(event) {
+					path = new Path();
+					path.fillColor = event.getCount() % 2 ? 'red' : 'black';
+					doc.children.push(path);
+				},
+
+				onMouseDrag: function(event) {
+					// If this is the first drag event,
+					// add the strokes at the start:
+					if (event.getCount() == 1) {
+						addStrokes(event.getMiddlePoint(), event.getDelta().multiply(-1));
+					} else {
+						var step = event.getDelta().divide(2);
+						step.setAngle(step.getAngle() + 90);
+
+						// The top point: the middle point + the step rotated by 90 degrees:
+						//   -----*
+						//   |
+						//   ------
+						var top = event.getMiddlePoint().add(step);
+
+						// The bottom point: the middle point - the step rotated by 90 degrees:
+						//   ------
+						//   |
+						//   -----*
+						var bottom = event.getMiddlePoint().subtract(step);
+
+						path.add(top);
+						path.insert(0, bottom);
+					}
+					path.smooth();
+
+					lastPoint = event.getMiddlePoint();
+				},
+				
+				onMouseUp: function(event) {
+					var delta = event.getPoint().subtract(lastPoint);
+					delta.setLength(tool.getMaxDistance());
+					addStrokes(event.getPoint(), 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));
+				step = step.divide(strokePoints - 1);
+				for(var i = 0; i < strokePoints; i++) {
+					var strokePoint = point.add(step.multiply(i));
+					var offset = delta.multiply(Math.random() * 0.3 + 0.1);
+					if (i % 2) {
+						offset = offset.multiply(-1);
+					}
+					strokePoint = strokePoint.add(offset);
+					path.insert(0, strokePoint);
+				}
+			}
+			
+			tool.setDocument(doc);
+			tool.setFixedDistance(40);
+			// tool.setMinDistance(values.minDistance);
+		}
+	</script>
+</head>
+<body>
+	<canvas id='canvas' width=1024 height=768></canvas>
+</body>
\ No newline at end of file
diff --git a/examples/Tools/Grid.html b/examples/Tools/Grid.html
new file mode 100644
index 00000000..3b8b2bd6
--- /dev/null
+++ b/examples/Tools/Grid.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Example</title>
+	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Item.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Point.js"></script>
+	<script type="text/javascript" src="../../src/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/Size.js"></script>
+	<script type="text/javascript" src="../../src/Segment.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Path.js"></script>
+	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/Tool.js"></script>
+	<script>
+		window.onload = function() {
+			
+			var values = { size: 10 };
+			
+			var point, path;
+			
+			function getPos(pt) {
+				return (pt.divide(values.size)).round().multiply(values.size);
+			}
+			
+			var canvas = document.getElementById('canvas');
+			var doc = new Doc(canvas);
+			var point, path;
+			var tool = new Tool({
+				onMouseDown: function(event) {
+					point = getPos(event.getPoint());
+					path = new Path();
+					path.strokeColor = 'black';
+					path.add(point);
+					doc.children.push(path);
+				},
+				onMouseDrag: function(event) {
+					var p = getPos(event.getPoint());
+					if (!point.equals(p)) {
+						path.add(p);
+						point = p;
+					}
+				}
+			});
+			tool.setDocument(doc);
+		}
+	</script>
+</head>
+<body>
+	<canvas id='canvas' width=1024 height=768></canvas>
+</body>
\ No newline at end of file
diff --git a/examples/Tools/Worm Farm.html b/examples/Tools/Worm Farm.html
new file mode 100644
index 00000000..cfe97685
--- /dev/null
+++ b/examples/Tools/Worm Farm.html	
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Example</title>
+	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
+	<script type="text/javascript" src="../../src/Item.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Point.js"></script>
+	<script type="text/javascript" src="../../src/Rectangle.js"></script>
+	<script type="text/javascript" src="../../src/Size.js"></script>
+	<script type="text/javascript" src="../../src/Segment.js"></script>
+	<script type="text/javascript" src="../../src/PathItem.js"></script>
+	<script type="text/javascript" src="../../src/Path.js"></script>
+	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
+	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
+	<script type="text/javascript" src="../../src/Tool.js"></script>
+	<script>
+		window.onload = function() {
+			var canvas = document.getElementById('canvas');
+			var doc = new Doc(canvas);
+			
+			var values  = {
+				minDistance: 30,
+				varyThickness: true
+			};
+
+			////////////////////////////////////////////////////////////////////////////////
+			// Mouse handling
+
+			var worm;
+			
+			var tool = new Tool({
+				onMouseDown: function(event) {
+					worm = new Path();
+					worm.fillColor = '#ffffff';
+					worm.strokeColor = '#000000';
+					worm.add(event.getPoint());
+					doc.children.push(worm);
+				},
+
+				onMouseDrag: function(event) {
+					// the vector in the direction that the mouse moved
+					var step = event.getDelta();
+
+					// if the vary thickness checkbox is marked
+					// divide the length of the step vector by two:
+					if (values.varyThickness) {
+						step.setLength(step.getLength() / 2);
+					} else {
+						// otherwise set the length of the step vector to half of minDistance
+						step.setLength(values.minDistance / 2);
+					}
+
+					// the top point: the middle point + the step rotated by -90 degrees
+					//   -----*
+					//   |
+					//   ------
+					var top = event.getMiddlePoint().add(step.rotate(-90));
+
+					// the bottom point: the middle point + the step rotated by 90 degrees
+					//   ------
+					//   |
+					//   -----*
+					var bottom = event.getMiddlePoint().add(step.rotate(90));
+
+					// add the top point to the end of the path
+					worm.add(top);
+
+					// insert the bottom point in the beginning of the path
+					worm.insert(0, bottom);
+
+					// make a new line path from top to bottom
+					var line = new Path.Line(top, bottom);
+					line.strokeColor = '#000000';
+					doc.children.push(line);
+
+					// smooth the segments of the path
+					worm.smooth();
+				},
+				
+				onMouseUp: function(event) {
+					worm.closed = true;
+					worm.add(event.getPoint());
+					worm.smooth();
+				}
+			});
+			tool.setDocument(doc);
+			tool.setFixedDistance(3);
+			tool.setMinDistance(values.minDistance);
+		}
+	</script>
+</head>
+<body>
+	<canvas id='canvas' width=1024 height=768></canvas>
+</body>
\ No newline at end of file
