🌴 Watch this first if you have no idea what a quadtree is: https://youtu.be/7pxyIC_ZEwA -- 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. LET'S CONNECT ✨ Sign up for my newsletter at https://www.pattvira.com ✨ Instagram: https://www.instagram.com/pattvira ✨ Twitter: https://twitter.com/pattvira -- Links: 🔗 p5.js editor: https://editor.p5js.org/ 🔗 Quadtree (Part 2 of 2) Code: https://editor.p5js.org/pattvira/sketches/v_tmN-BC5 🔗 Introduction to Creative Coding Playlist: https://youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn References: 🔗 Boids by Craig Reynolds: https://red3d.com/cwr/boids/ 🔗 Nature of Code - Chapter 5: Autonomous Agents: https://natureofcode.com/autonomous-agents/ Credits: 🔗 Thumbnail: https://raw.githack.com/mrdoob/three.js/dev/examples/webgpu_compute_birds.html Timestamps: 0:00 Intro 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 ✨

---