Flocking Simulation with Quadtree

🌴 Watch this first if you have no idea what a quadtree is

🖋️ Code Update:

  • Inside sketch.js — draw() function: - Created two for loops, instead of one, to separate inserting and querying points in the quadtree. With just one for loop, all the boids did not have the chance to interact with a fully updated quadtree.

  • Inside boid.js — Boid's class & update() method: - Switched the order of this.velocity.add(this.acceleration) and this.position.add(this.velocity). Velocity should be updated first, then apply to the position vector.

🔗 Code Example: Quadtree (Part 2 of 2)

🔗 References:

🔗 Credits:

🔗 Timestamps:

  • 0:23 Quadtree quick recap

  • 0:51 What is a flocking simulation?

  • 02:20 Agenda and approach

  • 05:05 Create a Boid class

  • 16:16 Write an Alignment method

  • 24:39 Write a Cohesion method

  • 32:37 Write a Separation method

  • 40:30 Change from p5.js. to p5.min.js to improve performance

  • 41:59 Create a QuadTree class

  • 45:55 This is where the magic happens ✨

Previous

Pixelated Kaleidoscope

Next

Spiral Betty