Skip to content

Flocking simulation using the HTML Canvas API. Vector Physics and quadtree optimization were implemented with Vanilla JS. Based off of Daniel Schiffman's Nature of Code with some personal modifications.

Notifications You must be signed in to change notification settings

NikolasP98/interactive_flocking_simulation_with_quadtree_implementation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flocking Simulator

For details on theory of how the mechanics of the simulator and the quadtree optimization, feel free to check out my blog post to see how they work.

Demo

Installation

To install and run the sim, run yarn or npm in the root folder.

After doing that, run yarn dev to initiate the dev server!

Usage

Click on the screen to add a family of boids that will simulate flocking. The size of each boid determines the range of each of their parameters (bigger boid = more perception radius)

When running the simulator, adjust the intensity of each parameter (Alignment, Cohesion, and Separation). The checkboxes can be used to visualize the perception radii for every boid.

Particle Size Rand. will increase the randomness of the size of boids generated on each click (higher value adds more size variety)

Perception Radius globally adjusts the perception radii (when higher, boids become more aware of neighboring boids)

Sources

Changelog

1.0.0

Added better QT implementation (self-coded) that can either handle points or bodies. More efficient results that

To-Do

  • Revamp vector.js and add static methods that return new Vector objects (previous methods will adjust current Vector object, allowing method chaining!)
  • Implement Quadtree params in the controls menu
  • Make controls menu draggable
  • Make boids triangular for sense of direction
  • Adjust parameter values so that the sim runs more predictablity (smaller max radii, lower max speed, better proportional perception radii)
  • Port to reactjs? (better state management for controls)

About

Flocking simulation using the HTML Canvas API. Vector Physics and quadtree optimization were implemented with Vanilla JS. Based off of Daniel Schiffman's Nature of Code with some personal modifications.

Resources

Stars

Watchers

Forks