From 083cd7a05706879333a071f48b01dc151870cd2e Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Mon, 28 Apr 2014 20:23:45 +0200
Subject: [PATCH] Add animated example of the different boolean path
 operations.

---
 examples/Animated/BooleanOperations.html | 81 ++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 examples/Animated/BooleanOperations.html
diff --git a/examples/Animated/BooleanOperations.html b/examples/Animated/BooleanOperations.html
new file mode 100644
index 00000000..6db26a1f
--- /dev/null
+++ b/examples/Animated/BooleanOperations.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Boolean Operations</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper-full.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var text = new PointText({
+			position: view.center + [0, 200],
+			fillColor: 'black',
+			justification: 'center',
+			fontSize: 20
+		});
+
+		var square = new Path.Rectangle({
+		    position: view.center,
+		    size: 300
+		});
+
+		var circle = new Path.Circle({
+		    center: view.center,
+		    radius: 140
+		});
+
+		// Remove both items from the dom:
+		circle.remove();
+		square.remove();
+
+		var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
+		var colors = ['red', 'green', 'blue', 'black'];
+		var curIndex = -1;
+		var operation, result;
+
+		function setMode() {
+			curIndex++;
+			if (curIndex == operations.length)
+				curIndex = 0;
+			operation = operations[curIndex];
+			text.content = 'square.' + operation + '(circle)';
+		}
+
+		// Change the mode every 3 seconds:
+		setInterval(setMode, 3000);
+
+		// Set the initial mode:
+		setMode();
+
+		function onFrame(event) {
+			// Move the circle around:
+			var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
+			circle.position = view.center + offset;
+
+			// Remove the result of the last path operation:
+			if (result)
+				result.remove();
+
+			// Perform the path operation on the circle:
+			result = square[operation](circle);
+			result.selected = true;
+			result.fillColor = colors[curIndex];
+			result.moveBelow(text);
+
+			// If the result is a group, color each of its children differently:
+			if (result instanceof Group) {
+				for (var i = 0; i < result.children.length; i++) {
+					result.children[i].fillColor = colors[i];
+				}
+			}
+		};
+
+		function onResize() {
+			text.position = view.center + [0, 200];
+			square.position = view.center;
+		}
+	</script>
+</head>
+<body>
+	<canvas id="canvas" resize stats></canvas>
+</body>
+</html>
