Skip to content

Commit 2c52c22

Browse files
frederickkfrederickk
committed
added 'Ring Flock' example
1 parent 55dd2a8 commit 2c52c22

19 files changed

Lines changed: 1407 additions & 374 deletions

‎distribution/paper.folio.js‎

Lines changed: 228 additions & 71 deletions
Large diffs are not rendered by default.

‎distribution/paper.folio.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎distribution/scriptographer.folio.js‎

Lines changed: 228 additions & 71 deletions
Large diffs are not rendered by default.

‎distribution/scriptographer.folio.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/paper.folio/js/boids.js‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
//
2+
// https://raw.github.com/nuterian/Flocking/master/js/boids.js
3+
// TODO: refactor
4+
//
5+
Boid = function(position)
6+
{
7+
this.shape = new Group();
8+
9+
this.accVector = new Path();
10+
this.body = new Path();
11+
12+
this.position = position;
13+
this.velocity = new Point();
14+
this.acceleration = new Point(0,0);
15+
16+
var pathRadius = 3;
17+
var maxSpeed = 4;
18+
var maxForce = 0.05;
19+
20+
var orientation = 0;
21+
var lastOrientation = 0;
22+
var lastLocation;
23+
24+
this.init = function()
25+
{
26+
this.velocity.x = Math.random() < 0.5 ? -1 : 1;;
27+
this.velocity.y = Math.random() < 0.5 ? -1 : 1;;
28+
29+
//console.log(this.velocity.x + ' ' + this.velocity.y + ' ' + (this.velocity.angle + 90));
30+
31+
// this.body.strokeColor = 'white';
32+
// this.body.strokeWidth = 2;
33+
34+
this.body.add(new Point(0, -pathRadius*2));
35+
this.body.add(new Point(-pathRadius, pathRadius*2));
36+
this.body.add(new Point(pathRadius, pathRadius*2));
37+
38+
this.body.position = this.position;
39+
this.body.fillColor = new Color.random({ hue:[45,225], saturation:[0.8,1.0], lightness:[0.8,0.9] }); //new RgbColor(255,255,255, 0.5);
40+
41+
this.body.closed = true;
42+
this.body.visible = false;
43+
44+
this.shape.addChild(this.body);
45+
}
46+
47+
this.run = function(boids)
48+
{
49+
this.flock(boids);
50+
this.update();
51+
this.borders();
52+
this.render();
53+
}
54+
55+
this.flock = function(boids)
56+
{
57+
var separation = this.separate(boids);
58+
var alignment = this.align(boids);
59+
var cohesion = this.cohesion(boids);
60+
61+
separation.length *= 1.5;
62+
alignment.length *= 1.0;
63+
cohesion.length *= 1.0;
64+
65+
this.acceleration = this.acceleration.add(separation);
66+
this.acceleration = this.acceleration.add(alignment);
67+
this.acceleration = this.acceleration.add(cohesion);
68+
69+
}
70+
71+
this.update = function()
72+
{
73+
lastLocation = this.position.clone();
74+
75+
this.velocity.x += this.acceleration.x;
76+
this.velocity.y += this.acceleration.y;
77+
this.velocity.length = Math.min( maxSpeed, this.velocity.length );
78+
79+
this.position.x += this.velocity.x;
80+
this.position.y += this.velocity.y;
81+
82+
this.acceleration.length = 0;
83+
}
84+
85+
this.seek = function(target)
86+
{
87+
var steer = this.steer(target, false);
88+
this.acceleration.x += steer.x;
89+
this.acceleration.y += steer.y;
90+
}
91+
92+
this.arrive = function(target)
93+
{
94+
var steer = this.steer(target, true);
95+
this.acceleration.x += steer.x;
96+
this.acceleration.y += steer.y;
97+
}
98+
99+
this.steer = function(target, slowdown)
100+
{
101+
var steer = new Point(0,0);
102+
var desired = new Point( target.x - this.position.x, target.y - this.position.y );
103+
var distance = desired.length;
104+
105+
if(distance > 0)
106+
{
107+
if((slowdown) && (distance < 100.0)) desired.length = maxSpeed * (distance/100);
108+
else desired.length = maxSpeed;
109+
110+
steer = desired.subtract(this.velocity);
111+
112+
// Limit Steer to maxForce
113+
steer.length = Math.min( maxForce, steer.length );
114+
}
115+
return steer;
116+
}
117+
118+
var acc = 0;
119+
var oacc = 0;
120+
var ang = 0;
121+
122+
this.render = function()
123+
{
124+
var locVector = new Point( this.position.x - lastLocation.x, this.position.y - lastLocation.y );
125+
orientation = (locVector.angle+90);
126+
this.shape.position = this.position.clone();
127+
this.shape.rotate(orientation - lastOrientation);
128+
lastOrientation = orientation;
129+
}
130+
131+
this.borders = function()
132+
{
133+
if(this.position.x < -pathRadius) this.position.x = view.bounds.width + pathRadius;
134+
if(this.position.y < -pathRadius) this.position.y = view.bounds.height + pathRadius;
135+
if(this.position.x > view.bounds.width+pathRadius) this.position.x = -pathRadius;
136+
if(this.position.y > view.bounds.height+pathRadius) this.position.y = -pathRadius;
137+
138+
}
139+
140+
this.separate = function(boids)
141+
{
142+
var desiredSeparation = 20.0;
143+
var steer = new Point(0,0);
144+
145+
var count = 0;
146+
147+
for(var i=0; i<boids.length; i++)
148+
{
149+
var other = boids[i];
150+
var distance = this.position.getDistance(other.position);
151+
152+
if((distance > 0) && (distance < desiredSeparation))
153+
{
154+
var diffVector = this.position.subtract(other.position);
155+
diffVector = diffVector.normalize();
156+
diffVector.divide(distance);
157+
158+
steer.x += diffVector.x;
159+
steer.y += diffVector.y;
160+
count++;
161+
}
162+
}
163+
164+
if(count > 0){
165+
steer.length /= count;
166+
}
167+
168+
if(steer.length > 0){
169+
steer = steer.normalize();
170+
steer = steer.multiply(maxSpeed);
171+
steer.x -= this.velocity.x;
172+
steer.y -= this.velocity.y;
173+
174+
steer.length = Math.min( maxForce, steer.length );
175+
}
176+
177+
return steer;
178+
179+
}
180+
181+
this.align = function(boids)
182+
{
183+
var neighbDist = 25.0;
184+
var steer = new Point(0, 0);
185+
var count = 0;
186+
for(var i=0; i<boids.length; i++)
187+
{
188+
var other = boids[i];
189+
var distance = this.position.getDistance(other.position);
190+
if((distance.length > 0) && (distance.length < neighbDist))
191+
{
192+
steer.x += other.velocity.x;
193+
steer.y += other.velocity.y;
194+
count++;
195+
}
196+
}
197+
198+
if(count > 0)
199+
{
200+
steer.length /= count;
201+
}
202+
203+
if(steer.length > 0)
204+
{
205+
steer = steer.normalize();
206+
steer = steer.multiply(maxSpeed);
207+
steer.x -= this.velocity.x;
208+
steer.y -= this.velocity.y;
209+
210+
steer.length = Math.min( maxForce, steer.length );
211+
}
212+
213+
return steer;
214+
}
215+
216+
this.cohesion = function(boids)
217+
{
218+
var neighbDist = 25.0;
219+
var sum = new Point(0,0);
220+
var count = 0;
221+
222+
for(var i=0; i<boids.length; i++)
223+
{
224+
var other = boids[i];
225+
var distance = this.position.getDistance(other.position);
226+
227+
if((distance > 0) && (distance < neighbDist))
228+
{
229+
sum.x += other.velocity.x;
230+
sum.y += other.velocity.y;
231+
count++;
232+
}
233+
}
234+
235+
if(count > 0)
236+
{
237+
sum.length /= count;
238+
return this.steer(sum, false);
239+
}
240+
return sum;
241+
}
242+
243+
244+
}

‎examples/paper.folio/scripts/Centre.js‎

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,5 @@
11
paper.Path.inject({
22

3-
getCircumcircle: function() {
4-
var that = this;
5-
var circumradius = 0;
6-
7-
var arr = this._segments.slice();
8-
function getDistanceToCentroid(segment) {
9-
var point = segment.point;
10-
var x = point.x - that.getCentroid().x,
11-
y = point.y - that.getCentroid().y,
12-
d = x * x + y * y;
13-
return Math.sqrt(d);
14-
};
15-
arr.sort( function(a, b) {
16-
return getDistanceToCentroid(a) - getDistanceToCentroid(b);
17-
});
18-
19-
circumradius = getDistanceToCentroid( arr[arr.length-1] ) + getDistanceToCentroid( arr[arr.length-2] );
20-
circumradius /= 2;
21-
22-
// // for( var i=0; i<arr.length; i++ ) {
23-
// // var seg = arr[i].point;
24-
// // if( seg.getDistance( this.getCentroid()) > circumradius ) {
25-
// // circumradius = seg.getDistance( this.getCentroid());
26-
// // }
27-
// // }
28-
29-
return Path.Circle(
30-
that.getCentroid(),
31-
// that.getCenterOfPolygon(),
32-
circumradius
33-
);
34-
},
35-
363
// getCenterOfPolygon: function() {
374

385
// for( var i=0; i<this._segments.length; i++ ) {
@@ -139,7 +106,7 @@ function Setup() {
139106
path.name = '_polygon';
140107

141108
// create vertices
142-
var numVertices = paper.randomInt(3,15);
109+
var numVertices = paper.randomInt(3,5);
143110
for( var t=0; t<360; t+=360/numVertices ) {
144111
var r = paper.random( 100, 150 );
145112
var point = new Point(
@@ -237,12 +204,13 @@ function centroid(path) {
237204
// circumcircle
238205
var circumcircle = path.getCircumcircle();
239206
circumcircle.style = style;
207+
circumcircle.strokeColor = new Color('ff00ff');
240208

241209
// incircle
242-
var incircle = path.getIncircle();
243-
incircle.style = style;
210+
// var incircle = path.getIncircle();
211+
// incircle.style = style;
244212

245-
return new Group([ centroid, line, circumcircle, incircle ]);
213+
return new Group([centroid, line, circumcircle]); //, incircle ]);
246214
};
247215

248216
// ------------------------------------------------------------------------

0 commit comments

Comments
 (0)