<!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>

Add animated example of the different boolean path operations.
Add animated example of the different boolean path operations.
