Giter VIP home page Giter VIP logo

boids's Introduction

Boids algorithm demonstration

Copyright 2020 Ben Eater

This code is MIT licensed.

What is this?

This is a simple demonstration of the boids algorithm that's featured in this Smarter Every Day video:

This simulation is running on my website if you’d like to check it out.

How does it work?

Each of the boids (bird-oid objects) obeys three simple rules:

1. Coherence

Each boid flies towards the the other boids. But they don't just immediately fly directly at each other. They gradually steer towards each other at a rate that you can adjust with the centeringFactor variable. In the demo, you can adjust this from 0 to 0.01 with the "coherence" slider.

2. Separation

Each boid also tries to avoid running into the other boids. If it gets too close to another boid it will steer away from it. You can control how quickly it steers with the avoidFactor variable. In the demo, you can adjust this from 0 to 0.1 with the "separation" slider.

3. Alignment

Finally, each boid tries to match the vector (speed and direction) of the other boids around it. Again, you can control how quickly they try to match vectors using the centeringFactor variable. In the demo, you can adjust this from 0 to 0.1 with the "coherence" slider.

Visual range

There are a ton of ways to extend this simple model to better simulate the behavior of different animals. An example I showed in the video is to limit the "visual range" of each boid. Real animals can't see the entire flock; they can only see the other animals around them. By adjusting the visualRange variable, you can adjust how far each boid can "see"—that is which other boids it considers when applying the three rules above.

How do I run this code?

It ought to run in any web browser. Download (or clone) the files. Then, just double-clicking on index.html on most computers will open the simulation in your web browser. You can then edit boids.js to tweak and experiment with the algorithm. Simply save your changes and reload the web browser page to see the effect.

What else can I do?

There are lots of features you could try adding to the code yourself:

  • Add a predator that the boids try to avoid that scatters the flock if it gets too close.
  • Add a strong wind or current to see what effect it has on the flock.
  • Add "perching" behavior. If a boid gets close to the bottom of the screen, have it land and hang out on the ground for a bit before taking off again and rejoining the flock.
  • Make it 3D! The boids' velocity is currently represented as a 2D vector. You could change them to 3D vectors and update the vector math to work. To draw in 3D, you could just change the size of the boids to represent how far away they are.

See this link for more ideas and hints on how to do some of the ideas above.

boids's People

Contributors

beneater avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

boids's Issues

Question about your Visualizing Quaternions Exploratory Videos Implementation

Hi Ben!

Huge fan of your work! I couldn't find your email on your website so I hope it's alright that I write my message here.

I was wondering if you will open source the technology you created for visualizing quaternions?

I inspected the page and found out that it's regular styled html input elements on top of an svg and the svg is manipulated with javascript. The minified javascript file is about 1.3 MB.

The reason I'm asking is that I created this bare minimum hexapod robot simulator from scratch. I used plotly's scatter + line plot for rendering the hexapod skeleton, but it seems like it is a bit of an overkill and x3dom or d3js is just as heavy.
I couldn't find a more lightweight way to accomplish what I need, I'm beginning to think that I'll have to write one from scratch.

I'm thinking that maybe it wouldn't hurt to ask if I can view your code for inspiration and for education purposes? (I'm particularly interested in how you implemented the touch or mouse drag event listener callbacks to manipulate the camera view of the plot)

Thanks for taking the time to read this, and I'm really hoping that you could find a few seconds to share your thoughts.

Here's the repo of my project by the way hope you find it interesting!

https://github.com/mithi/hexapod

Sincerely,
Mithi

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.