You there, would you like to hear about Quadtrees?


Well, what I know about quadtrees, anyways. You see, I ran into this data structure technique while I was trying to find a way to keep track of empty space on the screen to place random buttons for the player to click. I was having trouble doing this in an efficient manner.

Being new to this whole programing thing. The first technique I tried was just brute-forcing it by trying to check where everything was and attempting to place the button in what might be an empty spot. Let me tell you, that was prone to error and was very CPU-intensive for the number of buttons I was trying to place.

Next, I thought, "Well, I'll just Google 'How to find empty space on a webpage with TypeScript.'" Surprisingly, that was not very helpful. The results were mostly about how to remove white space in TypeScript. Yeah, that's not going to help with what I need. I tried a bunch of different search terms and got nothing.

Feeling a bit bummed, I wondered, "What the heck kind of search term do I need?" ...Also, I just realized I've spent three paragraphs talking about how I found quadtrees and not what quadtrees are.

To summarize, according to Wikipedia:

In simple terms, a quadtree is a way to organize and divide a two-dimensional space into smaller parts. It is called a "quad" tree because each internal node in the tree has exactly four children. This data structure is often used to partition or divide a space into four quadrants or regions.

The main idea behind a quadtree is to break down a larger area into smaller and smaller regions, like splitting a map into smaller sections. These regions can be squares, rectangles. The process of subdividing continues recursively until the desired level of detail or accuracy is achieved.

Link: https://en.wikipedia.org/wiki/Quadtree

As you've just read, a quadtree is exactly what I needed. The thing is, I had no idea about quadtrees and wouldn't have found it through a Google search with the limited knowledge I had at the time. I actually stumbled upon it while playing around with ChatGPT and asked it the same question I had asked Google before, and boom it told me about quadtrees.

So I did some research about them, since you should always double-check any info you get, and with a little help from ChatGPT, I implemented them into my game. There is a bug right now with how I'm inputting the 2D plane of the screen into the quadtrees. It sometimes doesn't quite get the right dimensions. I also have to set up a check for when the screen rotates or if the window gets resized to reposition the buttons.

I think I've talked enough for now about my experience with quadtrees. If you'd like me to go into more detail about how I implemented them into my game, please leave a comment or ask a question. I'd be happy to talk more about it.

But for now here's the TL;DR: Quadtrees are your friend if you need to efficiently manage a 2D space.

Leave a comment

Log in with itch.io to leave a comment.