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: https://www.instagram.com/pattvira ✨ Twitter: https://twitter.com/pattvira -- Links: 🔗 p5.js editor: https://editor.p5js.org/ 🔗 Quadtree (Part 1 of 2) Code: https://editor.p5js.org/pattvira/sketches/ga_GjOZps 🔗 Introduction to Creative Coding Playlist: https://youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn What to watch next! 🔗 Quadtree - Flocking Simulation (Part 2 of 2): https://youtu.be/AMugNCfP1NA References: 🔗 Inspiration - Chris Barber's Adrift: https://www.instagram.com/p/C-QHx2ASmWx/ 🔗 OpenFrameworks - Creative coding tool in C++ used to make Adrift: https://openframeworks.cc/ 🔗 @TheCodingTrain 's Quadtree Series: 🔗 Part 1: https://www.youtube.com/watch?v=OJxEcs0w_kE 🔗 Part 2: https://www.youtube.com/watch?v=QQx_NmCIuCY 🔗 Part 3: https://www.youtube.com/watch?v=z0YFFg_nBjw&t=169s 🔗 Collision Detection: https://youtu.be/gUTeWOfwECc 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