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 = [];