p5.js Coding Tutorial | Quadtree 🌴 (how not to crash your program w +1,000 colliding particles!)

LET'S CONNECT
✨ Sign up for my newsletter at https://www.pattvira.com
✨ Instagram:   / pattvira  
✨ Twitter:   / pattvira  
--
Links:
🔗 p5.js editor: https://editor.p5js.org/
🔗 Quadtree (Part 1 of 2) Code: https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist:    • START HERE: Creative Coding for Begin...  

What to watch next!
🔗 Quadtree - Flocking Simulation (Part 2 of 2):    • p5.js Coding Tutorial | Flocking Simu...  

References:
🔗 Inspiration - Chris Barber's Adrift:   / c-qhx2asmwx  
🔗 OpenFrameworks - Creative coding tool in C++ used to make Adrift: https://openframeworks.cc/
🔗 ‪@TheCodingTrain‬ 's Quadtree Series:
🔗 Part 1:    • Coding Challenge #98.1: Quadtree - Pa...  
🔗 Part 2:    • Coding Challenge #98.2: Quadtree - Pa...  
🔗 Part 3:    • Coding Challenge #98.3: Quadtree Coll...  
🔗 Collision Detection:    • Creative Coding Math: Collision Detec...  

Timestamps:
0:00 Intro
0:10 Inspiration for the tutorial
1:06 Agenda
1:49 What is a quadtree?
3:19 Let's start coding
3:58 Create a Point class to represent a simple coordinate (x, y)
4:19 Create a Rect class for a rectangular bounding box
4:58 Create a Quadtree class with 3 main methods (insert, subdivide, and query)
6:29 Write an Insert method
14:08 Write a Subdivide method
23:02 Write a Query method
30:02 Fix a bug
32:41 Create a Circle class for a circular bounding box
40:52 Create a Particle class
47:37 Call collision detection without a quadtree (oh no!)
50:53 Call collision detection with a quadtree (oh yes!)
57:42 Moment of truth