

Show HN: HTML5 Bird Flocks Simulation in CoffeeScript - chris_p
http://chrisp.gr/projects/boids/

======
Malcx
Smooth running, but the flocking behaviour just doesn't quite feel right. The
boids overlap/collide and just don't feel to "flock" correctly.

Do they have awareness of the other boids around them?

~~~
chris_p
Yes, they do. They're not meant to completely avoid each other, theoretically
there's a Z-axis that's not visible.

Try increasing the collision avoidance importance in the options and
decreasing everything else. Generally, playing with the sliders can result in
completely different behaviors.

~~~
Malcx
Ah OK - yes some better behaviour can be adjusted, maybe tweak the default
values a bit?

~~~
chris_p
Truth is I didn't spend much time choosing the default values. And there are
still a few configuration variable in the code that are not accessible through
the GUI.

------
shuw
I also use flocking algorithm for a visualization of words on my homepage
<http://shuw.github.com/>. I ported the algorithm to D3 here
<https://github.com/shuw/flock> if anyone wants to reuse it

------
andrewfhart
nice!

Another great take on an HTML5 flocking implementation is Alex Cruikshank's
"birds on a line" demo, in which the birds also "land" on wires. I really like
how Alex handles 3-dimensionality by adjusting the darkness of the birds so
that the further "back" they are, the lighter they appear.

demo: [http://carbonfive.github.com/html5-playground/birds-on-a-
lin...](http://carbonfive.github.com/html5-playground/birds-on-a-line.html)
source: [https://github.com/acruikshank/html5-playground/blob/gh-
page...](https://github.com/acruikshank/html5-playground/blob/gh-pages/birds-
on-a-line.html)

~~~
SeanDav
Just had a look at this one - definitely one of the better flocking/swarming
implementations I have seen.

------
iamwil
Like others here, I had a run at this using lua love four years back.

<https://github.com/iamwilhelm/frock>

In my experience tweaking the variables, to make it look 'realistic', the
settings need to change as the number of boids increase. So what might work
for n boid, won't work for m boids, where m >> n.

In addition, you need to limit the turn angle for the boids. They don't look
like they're flocking as much as they're orbiting. Just as birds can't turn on
a dime (actually, they can. I've seen a sparrow change direction in mid-flight
just as I was going to hit it with my car going 40 mph, but for the purpose of
flocking it looks better when they can't.), you don't want your boids to, so
you get a swooping effect and feel.

~~~
eyevariety
Sage advice. It took me longer than it should have to learn this.

------
onehp
I had a go at this too a little while ago.

It's not web based unfortunately so here's a short video of it running:
[http://www.youtube.com/watch?v=eY4DHcsuv1Y&feature=youtu...](http://www.youtube.com/watch?v=eY4DHcsuv1Y&feature=youtu.be)

And sourcecode: <https://github.com/OneHP/murmuration>

Also because I'm not great with my vector maths you'll spot that the boids
have some odd behaviour where they favour vertical movement. Strange little
bug.

------
amirrajan
Any similarities to the bird flocking algorithm when compared to a force
directed graph? Here's a link to a force directed graph I did in HTML5:
<http://amirrajan.net/Home/FdgHtml5>

~~~
chris_p
Bird flocks are actually much simpler. It's just three simple rules that
define how each boid moves.

------
Edmond
Love it...Please hack for education!

Here's my last appeal:

<http://news.ycombinator.com/item?id=4534204>

------
Lockyy
My immediate reaction is that I really want this as a screensaver.

Absolutely beautiful. I will definitely take a crack at making the screensaver
myself when I get around it it.

~~~
chris_p
Thank you! Do you think there's any way to not rewrite the entire thing?

~~~
Lockyy
I have absolutely no idea, I don't know a thing about making screensavers, but
I'm willing to learn if I can set this up as one.

------
kushsolitary
This is what I did a few months ago <http://cssdeck.com/labs/ckosol2k/1>

But yours feel much better.

~~~
Edmond
Please hack for education!

Here's my last appeal:

<http://news.ycombinator.com/item?id=4534204>

------
hythloday
This is very attractive. What's the "flock size" slider? Is it the number of
neighbours it keeps track of or the neighbour distance?

~~~
chris_p
It's the number of neighbors each boid considers to calculate its velocity.
There's also an option that defines the maximum distance for collision
detection, but it's not accessible through the UI.

~~~
hythloday
Thanks! The canonical data structure to avoid the O(n^2) lookup is a kdtree,
which I think is reasonably easy to implement in coffeescript.

------
MatthewPhillips
Link the github page 404s.

~~~
chris_p
Thanks, I fixed it!

