You can... Draw a Box

Is that the time? Yes it is! It's time for the weekly...

🎁🐸 TODEPOND TIMES 🐸🎁

What's new this week?

Boxes

I visited Steve Ruiz recently (who makes tldraw). Look! Here I am in their office. While I was there, they showed me an experiment they had made. It lets you select-and-drag a hundred-thousand boxes in your web browser. That's quite a lot of boxes! The main thing slowing it down seems to be drawing all those boxes onto the screen (while still managing to do all the selecting/moving/dragging/etc).

I can't resist a speed-boosting challenge, so I've been doing my own little experiments too - to find out what I can learn about this sort of problem. 

Interacting with around 200,000 boxes seems quick enough without doing any big optimisations. If we need to speed this up, we could probably try something like a quadtree. We could split the world up into smaller sections, so that we don't have to search over the ENTIRE world each time we look for a box (CellPond uses something similar to this).

Drawing all of the boxes was very slow though! So I tried this: I made it so boxes only get redrawn when they change position or colour. Otherwise, they just sit there. This means we don't waste time redrawing them every single frame (60 times a second) for no reason!

This did help to speed it up a lot, but it also created some odd-looking visual artifacts. If a box overlaps with another box, it might end up getting redrawn on top of something that it should actually be underneath - creating a strange 'wobbling' effect whenever you select some boxes. This distracted me a lot! Instead of fixing the wobble, I quite liked the visual effect that it made. And I ended up playing around with the different sorts of visuals that you could create with it.

If I return to this box experiment, I think I'll try rendering the boxes with WebGL (instead of the JavaScript canvas). I reckon that would help a lot!

Sides

In a previous update, I mentioned that I want to try making cellular automata out of lots of different shapes. Normally, they're made with SQUARES. We could also use HEXAGONS, TRIANGLES, PENTAGONS and DIAMONDS (as mentioned last time).

But what other shapes could we use? Let's look at the number of sides that we've covered so far...

(3) TRIANGLES
(4) SQUARES
(5) PENTAGONS
(6) HEXAGONS

Let's leave out (2) for now... What about (1) CIRCLES? It's hard to neatly arrange circles in a grid. You end up with lots of little gaps between them. Instead, we could try some sort of circle packing, where we try to cram in as many as we can. We could keep on cramming in smaller-and-smaller circles, until the gaps get small enough for our liking. Then, we could make up some rules for how the circle-shaped-cells interact/behave.

Let's go further! What about cells with (0) sides?? Let's get rid of the shape altogether! We could imagine the cellular automata as a network of points and paths (instead of a grid). This is known as graph cellular automata, and I find it much harder to find info about it on the internet (but it's there if you look hard enough).

It seems like all of these different shapes are adding up to make a neat little video! At this rate, maybe I'll end up making it in... 3 years from now! Check out my to-do list to see what I'm working on at the moment! I'm still working hard on finishing the next video, 📺 Screens in Screens in Screens. I am planning to release it next week!

Thank you again for supporting me and my projects! You're really helping to make them happen, and I hope you enjoy following along! I hope you have a great week, wherever you are in the world 🎁🐸🎁

Days since tode got locked in a cage: 139