scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
paper.js/examples/Paperjs.org/Tadpoles.html

283 lines
8.5 KiB
HTML
Raw Normal View History

Add Flock example.
2011-04-19 15:27:59 -04:00
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Examples: Added more descriptive titles to each example html page
2011-06-30 09:57:17 -04:00
<title>Tadpoles</title>
Make all examples resize to the size of the browser window.
2011-05-05 11:25:17 -04:00
<link rel="stylesheet" href="../css/style.css">
Switch from "out" folder for built library to "dist".
2011-06-12 14:03:18 -04:00
<script type="text/javascript" src="../../dist/paper.js"></script>
Add Flock example.
2011-04-19 15:27:59 -04:00
<script type="text/paperscript" canvas="canvas">
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
// Adapted from Flocking Processing example by Daniel Schiffman:
Flock: credits & small changes.
2011-04-19 17:32:34 -04:00
// http://processing.org/learning/topics/flocking.html
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Rename Document -> Project, DocumentView -> ProjectView, paper.document -> paper.project and paper.documents -> paper.projects, to avoid name clashing with window.document.
2011-05-16 08:33:15 -04:00
project.currentStyle = {
Add Flock example.
2011-04-19 15:27:59 -04:00
strokeColor: 'white',
strokeWidth: 2,
strokeCap: 'round'
};
Rename Path.Oval() to Path.Ellipse(), and deprecate Path.Oval().
2012-11-06 14:37:00 -05:00
var head = new Path.Ellipse([0, 0], [13, 8]);
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
head.fillColor = 'white';
head.strokeColor = null;
var headSymbol = new Symbol(head);
Fix examples to use view.bounds/size/center instead of document.bounds/size.
2011-05-16 07:51:20 -04:00
var size = view.size;
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
var Boid = Base.extend({
initialize: function(position, maxSpeed, maxForce) {
var strength = Math.random() * 0.5;
this.acc = new Point(0, 0);
Clean up Tadpoles example.
2011-06-28 06:20:29 -04:00
this.vel = Point.random() * 2 - 1;
Add Flock example.
2011-04-19 15:27:59 -04:00
this.loc = position.clone();
this.r = 30;
this.maxSpeed = maxSpeed + strength;
this.maxForce = maxForce + strength;
Flock: Use Symbol#place() instead.
2011-06-20 12:52:46 -04:00
this.head = headSymbol.place();
Add Flock example.
2011-04-19 15:27:59 -04:00
this.path = new Path();
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
this.shortPath = new Path();
Some minor changes to the Flock example.
2011-04-26 10:01:41 -04:00
this.shortPath.strokeWidth = 4;
Clean up code (for() -> for ()).
2011-05-03 03:54:13 -04:00
for (var i = 0, l = strength * 10 + 10; i < l; i++) {
Add Flock example.
2011-04-19 15:27:59 -04:00
this.path.add(this.loc);
}
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Update Tadpoles example to use Project#importJson.
2013-03-02 10:06:31 -05:00
this.firstSegment = this.path.firstSegment;
Add Flock example.
2011-04-19 15:27:59 -04:00
this.count = 0;
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
this.lastRot = 0;
Add Flock example.
2011-04-19 15:27:59 -04:00
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
run: function(boids) {
this.lastLoc = this.loc.clone();
Some minor changes to the Flock example.
2011-04-26 10:01:41 -04:00
if (!groupTogether) {
Add Flock example.
2011-04-19 15:27:59 -04:00
this.flock(boids);
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
} else {
this.align(boids);
}
Add Flock example.
2011-04-19 15:27:59 -04:00
this.borders();
this.update();
this.firstSegment.point = this.loc;
var lastPoint = this.firstSegment.point;
var lastVector = this.loc - this.lastLoc;
var segments = this.path.segments;
for (var i = 1, l = segments.length; i < l; i++) {
var segment = segments[i];
var vector = lastPoint - segment.point;
this.count += this.vel.length * 10;
Clean up Tadpoles example.
2011-06-28 06:20:29 -04:00
var rotLength = Math.sin((this.count + i * 3) / 300);
var rotated = lastVector.rotate(90).normalize(rotLength);
lastPoint += lastVector.normalize(-5 - this.vel.length / 3);
segment.point = lastPoint;
Add Flock example.
2011-04-19 15:27:59 -04:00
segment.point += rotated;
lastVector = vector;
}
Flock example: smooth segments.
2011-05-04 13:36:44 -04:00
this.path.smooth();
Add Flock example.
2011-04-19 15:27:59 -04:00
this.head.position = this.loc;
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
var vector = this.loc - this.lastLoc;
var rot = vector.angle;
this.head.rotate(rot - this.lastRot);
this.lastRot = rot;
Fix bug in Tadpoles example. Fixes a bug where the segments array of a path was being changed directly, which caused the bounds to not be updated.
2012-11-22 13:20:30 -05:00
this.shortPath.segments = segments.slice(0, 3);
Add Flock example.
2011-04-19 15:27:59 -04:00
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
// We accumulate a new acceleration each time based on three rules
flock: function(boids) {
var sep = this.separate(boids) * 3;
var ali = this.align(boids);
var coh = this.cohesion(boids);
this.acc += sep + ali + coh;
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
update: function() {
// Update velocity
this.vel += this.acc;
// Limit speed (vector#limit?)
this.vel.length = Math.min(this.maxSpeed, this.vel.length);
this.loc += this.vel;
// Reset acceleration to 0 each cycle
this.acc.length = 0;
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
seek: function(target) {
this.acc += this.steer(target, false);
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
arrive: function(target) {
this.acc += this.steer(target, true);
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
// A method that calculates a steering vector towards a target
Clean up Tadpoles example.
2011-06-28 06:20:29 -04:00
// Takes a second argument, if true, it slows down as it approaches
// the target
Add Flock example.
2011-04-19 15:27:59 -04:00
steer: function(target, slowdown) {
var steer,
desired = target - this.loc,
d = desired.length;
if (d > 0) {
Clean up Tadpoles example.
2011-06-28 06:20:29 -04:00
// Two options for desired vector magnitude
// (1 -- based on distance, 2 -- maxSpeed)
Add Flock example.
2011-04-19 15:27:59 -04:00
if (slowdown && d < 100) {
Update Tadpoles example to use Project#importJson.
2013-03-02 10:06:31 -05:00
// This damping is somewhat arbitrary:
Clean up Tadpoles example.
2011-06-28 06:20:29 -04:00
desired.length = this.maxSpeed * (d / 100);
Add Flock example.
2011-04-19 15:27:59 -04:00
} else {
desired.length = this.maxSpeed;
}
steer = desired - this.vel;
steer.length = Math.min(this.maxForce, steer.length);
} else {
steer = new Point(0, 0);
}
return steer;
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
borders: function() {
Let's not use variable chaining in examples, for clearer code.
2011-05-15 06:36:10 -04:00
var loc = this.loc;
var r = this.r;
var oldLoc = this.loc.clone();
var width = size.width;
var height = size.height;
Add Flock example.
2011-04-19 15:27:59 -04:00
if (loc.x < -r) loc.x = width + r;
if (loc.y < -r) loc.y = height + r;
if (loc.x > width + r) loc.x = -r;
if (loc.y > height + r) loc.y = -r;
var vector = this.loc - oldLoc;
Some minor changes to the Flock example.
2011-04-26 10:01:41 -04:00
if (!vector.isZero())
Add Flock example.
2011-04-19 15:27:59 -04:00
this.path.position += vector;
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
separate: function(boids) {
Let's not use variable chaining in examples, for clearer code.
2011-05-15 06:36:10 -04:00
var desiredSeperation = 60;
var steer = new Point(0, 0);
var count = 0;
Add Flock example.
2011-04-19 15:27:59 -04:00
// For every boid in the system, check if it's too close
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = other.loc.getDistance(this.loc);
if (d > 0 && d < desiredSeperation) {
// Calculate vector pointing away from neighbor
var diff = this.loc - other.loc;
steer += diff.normalize(1 / d);
count++;
}
}
// Average -- divide by how many
if (count > 0)
steer /= count;
Some minor changes to the Flock example.
2011-04-26 10:01:41 -04:00
if (steer.length > 0) {
Add Flock example.
2011-04-19 15:27:59 -04:00
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vel;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
// Alignment
// For every nearby boid in the system, calculate the average velocity
align: function(boids) {
Let's not use variable chaining in examples, for clearer code.
2011-05-15 06:36:10 -04:00
var neighborDist = 25;
var steer = new Point(0, 0);
var count = 0;
var nearest = 999;
var closestPoint;
Add Flock example.
2011-04-19 15:27:59 -04:00
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
Some minor changes to the Flock example.
2011-04-26 10:01:41 -04:00
if (d > 0 && d < nearest) {
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
closestPoint = other.loc;
Add Flock example.
2011-04-19 15:27:59 -04:00
nearest = d;
Some more work on the Flock example.
2011-04-20 07:07:40 -04:00
}
Some minor changes to the Flock example.
2011-04-26 10:01:41 -04:00
if (d > 0 && d < neighborDist) {
Add Flock example.
2011-04-19 15:27:59 -04:00
steer += other.vel;
count++;
}
}
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
if (count > 0)
steer /= count;
if (steer.length > 0) {
// Implement Reynolds: Steering = Desired - Velocity
steer.length = this.maxSpeed;
steer -= this.vel;
steer.length = Math.min(steer.length, this.maxForce);
}
return steer;
},
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Add Flock example.
2011-04-19 15:27:59 -04:00
// Cohesion
Clean up Tadpoles example.
2011-06-28 06:20:29 -04:00
// For the average location (i.e. center) of all nearby boids,
// calculate steering vector towards that location
Add Flock example.
2011-04-19 15:27:59 -04:00
cohesion: function(boids) {
Let's not use variable chaining in examples, for clearer code.
2011-05-15 06:36:10 -04:00
var neighborDist = 100;
var sum = new Point(0, 0);
var count = 0;
Add Flock example.
2011-04-19 15:27:59 -04:00
for (var i = 0, l = boids.length; i < l; i++) {
var other = boids[i];
var d = this.loc.getDistance(other.loc);
Some minor changes to the Flock example.
2011-04-26 10:01:41 -04:00
if (d > 0 && d < neighborDist) {
Add Flock example.
2011-04-19 15:27:59 -04:00
sum += other.loc; // Add location
count++;
}
}
if (count > 0) {
sum /= count;
// Steer towards the location
return this.steer(sum, false);
}
return sum;
}
});
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Update Tadpoles example to use Project#importJson.
2013-03-02 10:06:31 -05:00
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","strokeColor":["rgb",1,1,1],"strokeWidth":2,"strokeCap":"round"}]');
Fix examples to use view.bounds/size/center instead of document.bounds/size.
2011-05-16 07:51:20 -04:00
heartPath.position = view.center;
Flock: credits & small changes.
2011-04-19 17:32:34 -04:00
heartPath.strokeColor = null;
heartPath.scale(1.5);
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Let's not use variable chaining in examples, for clearer code.
2011-05-15 06:36:10 -04:00
var groupTogether = false;
var pathLength = heartPath.length;
var mouseDown = false;
var boids = [];
Flock example: move the onresize function to the top, and resize the document before creating the boids.
2011-04-28 15:23:30 -04:00
// Add the boids:
for (var i = 0; i < 30; i++) {
Fix examples to use view.bounds/size/center instead of document.bounds/size.
2011-05-16 07:51:20 -04:00
var position = Point.random() * size;
Flock example: move the onresize function to the top, and resize the document before creating the boids.
2011-04-28 15:23:30 -04:00
boids.push(new Boid(position, 10, 0.05));
Fix examples to use view.bounds/size/center instead of document.bounds/size.
2011-05-16 07:51:20 -04:00
}
Shorten definition of heart shape.
2011-04-27 18:19:33 -04:00
Switch examples to using event.count in onFrame().
2011-05-15 13:12:56 -04:00
function onFrame(event) {
Clean up code (for() -> for ()).
2011-05-03 03:54:13 -04:00
for (var i = 0, l = boids.length; i < l; i++) {
Add Flock example.
2011-04-19 15:27:59 -04:00
if (groupTogether) {
Clean up Tadpoles example.
2011-06-28 06:20:29 -04:00
var length = ((i + event.count / 30) % l) / l * pathLength;
var point = heartPath.getPointAt(length);
Add Flock example.
2011-04-19 15:27:59 -04:00
boids[i].arrive(point);
}
boids[i].run(boids);
}
}
Shorten definition of heart shape.
2011-04-27 18:19:33 -04:00
Fix examples to use view.bounds/size/center instead of document.bounds/size.
2011-05-16 07:51:20 -04:00
// Reposition the heart path whenever the window is resized:
function onResize(event) {
size = view.size;
heartPath.position = view.center;
}
Add Flock example.
2011-04-19 15:27:59 -04:00
function onMouseDown(event) {
Flock: simplify grouping.
2011-04-19 15:38:06 -04:00
groupTogether = !groupTogether;
Add Flock example.
2011-04-19 15:27:59 -04:00
}
Clean up white spaces.
2011-07-07 10:09:02 -04:00
Rename Document -> Project, DocumentView -> ProjectView, paper.document -> paper.project and paper.documents -> paper.projects, to avoid name clashing with window.document.
2011-05-16 08:33:15 -04:00
var layer = project.activeLayer;
Flock example: space bar toggles selection state of items in the document.
2011-04-28 14:57:04 -04:00
function onKeyDown(event) {
Prevent default when handling space key.
2011-05-08 12:26:35 -04:00
if (event.key == 'space') {
Flock example: space bar toggles selection state of items in the document.
2011-04-28 14:57:04 -04:00
layer.selected = !layer.selected;
Prevent default when handling space key.
2011-05-08 12:26:35 -04:00
return false;
}
Flock example: space bar toggles selection state of items in the document.
2011-04-28 14:57:04 -04:00
}
Add Flock example.
2011-04-19 15:27:59 -04:00
</script>
Flock example: use Element.getScrollBounds() to define Document#size, move css into the head and simplify the construction of heartPath.
2011-05-05 08:31:36 -04:00
<style>
body {
background: black;
}
</style>
Add Flock example.
2011-04-19 15:27:59 -04:00
</head>
Flock example: use Element.getScrollBounds() to define Document#size, move css into the head and simplify the construction of heartPath.
2011-05-05 08:31:36 -04:00
<body>
Don't use keepAlive option in examples.
2011-06-29 07:44:06 -04:00
<canvas id="canvas" resize></canvas>
Examples: close html tag.
2011-05-30 18:27:39 -04:00
</body>
</html>
Reference in a new issue Copy permalink