From 1cbb3039419cf057f5fa003ae613c4b7ac6d4935 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Sun, 21 Apr 2013 09:00:53 -0700
Subject: [PATCH] Add SpaceUsingShapes.html, as an example for Shape.Circle()

---
 examples/Animated/SpaceUsingShapes.html | 78 +++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 examples/Animated/SpaceUsingShapes.html
diff --git a/examples/Animated/SpaceUsingShapes.html b/examples/Animated/SpaceUsingShapes.html
new file mode 100644
index 00000000..6b0c88e5
--- /dev/null
+++ b/examples/Animated/SpaceUsingShapes.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Space</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+	// The amount of symbol we want to place;
+	var count = 150;
+
+	project.currentStyle = {
+		fillColor: 'white'
+	};
+
+	// Place the instances of the symbol:
+	for (var i = 0; i < count; i++) {
+		// The center position is a random point in the view:
+		var center = Point.random() * view.size;
+		var path = new Shape.Circle(center, 5 * (i / count));
+		path.data.vector = new Point({
+			angle: Math.random() * 360,
+			length : (i / count) * Math.random() / 5
+		});
+	}
+
+	var vector = new Point({
+		angle: 45,
+		length: 0
+	});
+
+	var mouseVector = vector.clone();
+
+	function onMouseMove(event) {
+		mouseVector = view.center - event.point;
+	}
+
+	// The onFrame function is called up to 60 times a second:
+	function onFrame(event) {
+		vector = vector + (mouseVector - vector) / 30;
+
+		// Run through the active layer's children list and change
+		// the position of the placed symbols:
+		for (var i = 0; i < count; i++) {
+			var item = project.activeLayer.children[i];
+			var size = item.bounds.size;
+			var length = vector.length / 10 * size.width / 10;
+			item.position += vector.normalize(length) + item.data.vector;
+			keepInView(item);
+		}
+	}
+
+	function keepInView(item) {
+		var position = item.position;
+		var itemBounds = item.bounds;
+		var bounds = view.bounds;
+		if (itemBounds.left > bounds.width) {
+			position.x = -item.bounds.width;
+		}
+
+		if (position.x < -itemBounds.width) {
+			position.x = bounds.width + itemBounds.width;
+		}
+
+		if (itemBounds.top > view.size.height) {
+			position.y = -itemBounds.height;
+		}
+
+		if (position.y < -itemBounds.height) {
+			position.y = bounds.height  + itemBounds.height / 2;
+		}
+	}
+	</script>
+</head>
+<body>
+	<canvas id="canvas" resize style='background:black'></canvas>
+</body>
+</html>
\ No newline at end of file
