From f39895a9455dfd99bec64d0d54f881280bfb011a Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Sat, 12 Mar 2011 15:17:08 +0100
Subject: [PATCH] Update lines.html example.

---
 examples/Scripts/lines.html | 54 ++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 13 deletions(-)
diff --git a/examples/Scripts/lines.html b/examples/Scripts/lines.html
index be3a8620..b3fcd1ed 100644
--- a/examples/Scripts/lines.html
+++ b/examples/Scripts/lines.html
@@ -6,25 +6,53 @@
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
+		var amount = 180;
+		for(var i = 0; i < amount; i++) {
+			var path = new Path();
+			path.fillColor = new HSBColor(1, 1, Math.random());
+			path.strokeCap = 'round';
+			path.closed = true;
+		}
+
+		var position = new Point(document.size) / 2;
+		var mousePos = position;		
+		var children = document.activeLayer.children;
 		var count = 0;
-		setInterval(draw, 20);
 		
-		function draw() {
+		function iterate() {
 			count++;
-			document.activeLayer.children = [];
-			var point = new Point(document.size) / 2;
-			var vector = new Point(100, 0);
-			for (var i = 0; i < 180; i++) {
-				var center = point + vector.rotate(i * 2).normalize(30);
-				var length = 30 + Math.abs(Math.sin((i + count / 20)) * 300);
-				var end = point + vector.rotate(i * 2).normalize(length);
-				var path = new Path.Line(center, end);
-				path.strokeColor = i % 4 ? 'black' : 'red';
+			var delta = (mousePos - position);
+			position += delta / 10;
+			for (var i = 1; i < amount; i++) {
+				var length = Math.abs(Math.sin(i + count / 20) * 300);
+				children[i].segments = [
+					position + delta / 1.5,
+					position + { angle: i * 2, length: length },
+					position + { angle: (i + 1) * 2, length: length }
+				];
+				children[i].fillColor.hue = count - length;
 			}
-			document.redraw();
+		}
+		
+		
+		var lastRedraw = 0;
+		setInterval(draw, 30);
+		function draw() {
+			iterate();
+			var now = Date.now();
+			if(now - lastRedraw > 30) {
+				document.redraw();
+				lastRedraw = now;
+			}
+		}
+		
+		function onMouseMove(event) {
+			iterate();
+			lastRedraw = Date.now();
+			mousePos = event.point;
 		}
 	</script>
 </head>
-<body>
+<body style='background-color:black'>
 	<canvas id='canvas' width=1024 height=768></canvas>
 </body>
\ No newline at end of file
