Show HN: HTML5 Bird Flocks Simulation in CoffeeScript(chrisp.gr)
chrisp.gr
Show HN: HTML5 Bird Flocks Simulation in CoffeeScript
http://chrisp.gr/projects/boids/
11 comments
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.
Try increasing the collision avoidance importance in the options and decreasing everything else. Generally, playing with the sliders can result in completely different behaviors.
The attraction to the center seems to produce very erratic pathing - cutting that to zero immediately makes the flocking effect more 'natural'. Then increasing the acceleration factor helps produce those instantaneous changes of direction that are characteristic of animal flocks. With the current defaults the behavior is more 'cloud of flies' than 'flock of starlings' - which is fine, but doesn't show off the large scale co-ordinated movement the boids algorithm can produce. The collision avoidance threshold seems a little high - a slider to reduce that would help make flocks more compact which would produce better behavior when the number of boids is high...
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
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... source: https://github.com/acruikshank/html5-playground/blob/gh-page...
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... source: https://github.com/acruikshank/html5-playground/blob/gh-page...
Just had a look at this one - definitely one of the better flocking/swarming implementations I have seen.
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.
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.
Sage advice. It took me longer than it should have to learn this.
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...
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.
It's not web based unfortunately so here's a short video of it running: http://www.youtube.com/watch?v=eY4DHcsuv1Y&feature=youtu...
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.
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
Bird flocks are actually much simpler. It's just three simple rules that define how each boid moves.
Love it...Please hack for education!
Here's my last appeal:
http://news.ycombinator.com/item?id=4534204
Here's my last appeal:
http://news.ycombinator.com/item?id=4534204
[deleted]
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.
Absolutely beautiful. I will definitely take a crack at making the screensaver myself when I get around it it.
This is what I did a few months ago http://cssdeck.com/labs/ckosol2k/1
But yours feel much better.
But yours feel much better.
Please hack for education!
Here's my last appeal:
http://news.ycombinator.com/item?id=4534204
Here's my last appeal:
http://news.ycombinator.com/item?id=4534204
I really like yours, the direction changes and merging are a bit 'robotic' but I like the cohesion.
This is very attractive. What's the "flock size" slider? Is it the number of neighbours it keeps track of or the neighbour distance?
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.
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.
Do they have awareness of the other boids around them?