From e269ba7cc6820a4e171c3e31e007b6494a7cf815 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Sun, 8 Dec 2013 10:58:19 +0100
Subject: [PATCH] Optimize Tadpoles example.

- Shape instead Symbol
- Directly modify segments instead of copying points
---
 examples/Paperjs.org/Tadpoles.html | 59 ++++++++++++++++--------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/examples/Paperjs.org/Tadpoles.html b/examples/Paperjs.org/Tadpoles.html
index 5eb6d8ac..b5c56900 100644
--- a/examples/Paperjs.org/Tadpoles.html
+++ b/examples/Paperjs.org/Tadpoles.html
@@ -18,10 +18,7 @@
 				this.radius = 30;
 				this.maxSpeed = maxSpeed + strength;
 				this.maxForce = maxForce + strength;
-				this.points = [];
-				for (var i = 0, l = strength * 10 + 10; i < l; i++) {
-					this.points.push(new Point());
-				}
+				this.amount = strength * 10 + 10;
 				this.count = 0;
 				this.lastAngle = 0;
 				this.distances = [];
@@ -42,47 +39,53 @@
 			},
 
 			calculateTail: function() {
-				var points = this.points;
+				var segments = this.path.segments,
+					shortSegments = this.shortPath.segments;
 				var speed = this.vector.length;
 				var pieceLength = 5 + speed * 0.3;
-				var point = points[0] = this.position.clone();
-				var lastVector = this.vector.clone();
-				for (var i = 1, l = points.length; i < l; i++) {
+				var point = this.position.clone();
+				segments[0].point = shortSegments[0].point = point;
+				// Chain goes the other way than the movement
+				var lastVector = -this.vector;
+				for (var i = 1; i < this.amount; i++) {
+					var vector = segments[i].point - point;
+					var sideways = lastVector.rotate(90);
 					this.count += speed * 15;
-					var vector = point - points[i];
-					var rotated = lastVector.rotate(90);
-					rotated.length = Math.sin((this.count + i * 3) * 0.003);
-					lastVector.length = -pieceLength;
-					point += lastVector;
-					points[i] = point + rotated;
+					sideways.length = Math.sin((this.count + i * 3) * 0.003);
+					lastVector.length = pieceLength;
+					point += lastVector + sideways;
+					segments[i].point = point;
+					if (i < 3)
+						shortSegments[i].point = point;
 					lastVector = vector;
 				}
 			},
 
 			createItems: function() {
-				this.head = (project.symbols[0]
-					? project.symbols[0]
-					: new Symbol(new Path.Ellipse({
-						from: [0, 0],
-						to: [13, 8],
-						fillColor: 'white'
-					}))).place();
+				this.head = new Shape.Ellipse({
+					center: [0, 0],
+					size: [13, 8],
+					fillColor: 'white'
+				});
+
 				this.path = new Path({
 					strokeColor: 'white',
 					strokeWidth: 2,
 					strokeCap: 'round'
 				});
+				for (var i = 0; i < this.amount; i++)
+					this.path.add(new Point());
+
 				this.shortPath = new Path({
 					strokeColor: 'white',
 					strokeWidth: 4,
 					strokeCap: 'round'
 				});
+				for (var i = 0; i < Math.min(3, this.amount); i++)
+					this.shortPath.add(new Point());
 			},
 
 			updateItems: function() {
-				this.path.segments = this.points;
-				this.shortPath.segments = this.points.slice(0, 3);
-
 				this.head.position = this.position;
 				var angle = this.vector.angle;
 				this.head.rotate(angle - this.lastAngle);
@@ -134,9 +137,9 @@
 				if (position.y > size.height + radius) vector.y = -size.height -radius;
 				if (!vector.isZero()) {
 					this.position += vector;
-					var points = this.points;
-					for (var i = 0, l = points.length; i < l; i++) {
-						points[i] += vector;
+					var segments = this.path.segments;
+					for (var i = 0; i < this.amount; i++) {
+						segments[i].point += vector;
 					}
 				}
 			},
@@ -236,7 +239,7 @@
 			}
 		});
 
-		var heartPath = project.importJSON('["Path",{"pathData":"M514.69629,624.70313c-7.10205,-27.02441 -17.2373,-52.39453 -30.40576,-76.10059c-13.17383,-23.70703 -38.65137,-60.52246 -76.44434,-110.45801c-27.71631,-36.64355 -44.78174,-59.89355 -51.19189,-69.74414c-10.5376,-16.02979 -18.15527,-30.74951 -22.84717,-44.14893c-4.69727,-13.39893 -7.04297,-26.97021 -7.04297,-40.71289c0,-25.42432 8.47119,-46.72559 25.42383,-63.90381c16.94775,-17.17871 37.90527,-25.76758 62.87354,-25.76758c25.19287,0 47.06885,8.93262 65.62158,26.79834c13.96826,13.28662 25.30615,33.10059 34.01318,59.4375c7.55859,-25.88037 18.20898,-45.57666 31.95215,-59.09424c19.00879,-18.32178 40.99707,-27.48535 65.96484,-27.48535c24.7373,0 45.69531,8.53564 62.87305,25.5957c17.17871,17.06592 25.76855,37.39551 25.76855,60.98389c0,20.61377 -5.04102,42.08691 -15.11719,64.41895c-10.08203,22.33203 -29.54687,51.59521 -58.40723,87.78271c-37.56738,47.41211 -64.93457,86.35352 -82.11328,116.8125c-13.51758,24.0498 -23.82422,49.24902 -30.9209,75.58594z","strokeWidth":2,"strokeCap":"round"}]');
+		var heartPath = new Path('M514.69629,624.70313c-7.10205,-27.02441 -17.2373,-52.39453 -30.40576,-76.10059c-13.17383,-23.70703 -38.65137,-60.52246 -76.44434,-110.45801c-27.71631,-36.64355 -44.78174,-59.89355 -51.19189,-69.74414c-10.5376,-16.02979 -18.15527,-30.74951 -22.84717,-44.14893c-4.69727,-13.39893 -7.04297,-26.97021 -7.04297,-40.71289c0,-25.42432 8.47119,-46.72559 25.42383,-63.90381c16.94775,-17.17871 37.90527,-25.76758 62.87354,-25.76758c25.19287,0 47.06885,8.93262 65.62158,26.79834c13.96826,13.28662 25.30615,33.10059 34.01318,59.4375c7.55859,-25.88037 18.20898,-45.57666 31.95215,-59.09424c19.00879,-18.32178 40.99707,-27.48535 65.96484,-27.48535c24.7373,0 45.69531,8.53564 62.87305,25.5957c17.17871,17.06592 25.76855,37.39551 25.76855,60.98389c0,20.61377 -5.04102,42.08691 -15.11719,64.41895c-10.08203,22.33203 -29.54687,51.59521 -58.40723,87.78271c-37.56738,47.41211 -64.93457,86.35352 -82.11328,116.8125c-13.51758,24.0498 -23.82422,49.24902 -30.9209,75.58594z');
 		var pathLength = heartPath.length;
 
 		var boids = [];