8 Queens Problem
Abhivadaye
Anagram Finder
Bouncing Spheres
Break Out
Classic Snake
Cycloids
Deflection Demo
Double Pendulum
EV Savings
Flocking
Fog fly through
Forces on Objects
Fractals
Game of Life
Horizontal Stars
Image Scanning
JSON Beautify
Julia Sets
Kaleidoscope
Kock Fractals
Lorenz Attractor
Mandlebrot Set
Meta Balls
Natural Flocking
Number Convert
Number Game
Pandemic Simulator
Particles & Nodes
Perlin Noise
Poisson Disk
QuadTree Search
Ripples
Set Demonstration
Sierpiński Triangles
Simple Pendulum
Sine Waves
Starfield
Super Shapes 2D
Target Finder
Tic Tac Toe
Voronoi Diagram
Who Moved My...
Natural Flocking
20 Oct 2019
Flocking behavior is the behavior exhibited when a group of birds, called a flock, are in flight. In the canvas below I have tried to simulate the same with digital "Boids". This is different from my earlier attempt at flocking wherein all the "boids" where in a flock. In this attempt I ensured that "boids" only flock with members who are within range.

Sorry, your browser does not support Canvas.
VariableValue RangeValue
Align Radius 50 - 150
Cohesion Radius 50 - 200
Separation Radius 1 - 50

Now, I haven't done anything different with my flocking demo above than other flocking implementations elsewhere on the internet. The boids follow the same pattern that defines flocking behaviour. Remember, each boid is independent of others and has three rules to follow.
Alignment: When in range of other boids, the boid will try to align itself with the other boids. This is done by finding the average speed of the other boids and normalize these averages.
Cohesion: When in range of other boids, the boid will try to move to the center of mass of the other boids. This is done by finding the average of their positions (and not their speed) and changing the boid speed to align with the average position.
Separation: This is the opposite of Cohesion. When boids get too close to each other. We want to avoid that just like the real world. This is done by finding the average of their positions (and not their speed) and changing the boid speed to move away from the average position.
Remember that each of these equations sometimes returns very high values that results in a very large change in momentum. This looks very unnatural. Thus, each of these forces is normalized to small value so that the change in momentum looks more organic. The code below is properly commented on. Each of forces in play are parameterized and can be adjusted in the demo above.

1. realflocking.js - Download, index.html
//Code goes here