Doodle Insights #1: Spline-Powered

This very first edition of the Doodle Insights is about splines!

Splines, in graphic design, are curved lines. I always thought there were complicated and CPU-expensive maths behind them but there’s actually a super simple implementation for one type of splines: quadratic Bézier curves! This particular type of spline can be defined with a start point, an end point and a third point towards which the spline will curve.

The two main ressources I used to implement them were this part of the Bézier curve Wikipedia page, with this GIF:

…and this discussion about making one of these curves using more than three points (by cheating).

It didn’t take too much time before I had these implemented in Pico-8:

From then on, the possibilities seemed quite numerous. So I started with something pretty simple. I wanted to reproduce a demo scene thing I remembered with a looping spline wandering across the screen and leaving a very cool-looking trail. This is what came out of it:

The first step was to make looping splines from my linear splines. That didn’t take too long, I only had to cheat a little bit more.

Then there was the trail. That was also fairly straightforward! During each frame, the looping spline is drawn in Pico-8’s last color, indexed as 15. Then, the screen is copied to the sprite sheet, using the memcpy() Pico-8 function. At the very beginning of the next frame, before drawing the spline, the whole spritesheet is copied to the screen, using palette swaps to replace each color with the one before them (i.e: 15 becomes 14, 14 becomes 13, etc). And finally I used palette swaps at screen level to convert the 16 colors of the Pico-8 palette to a selection of 8 colors I like. And that’s your trail effect!

In the end, the only part that gave me a harder time was the spline points’ behaviors. I ended up choosing a very simple method of points moving at varying speeds and bounce on the screen’s borders. But before that I tried making them constantly change trajectory, I tried making the bouncing softer… It was quite a frustrating part.

The next doodle, also based on looping splines, was inspired by a generative rendering technique. Take simple shapes or lines, make them move with a more-or-less random behavior and mark the new shapes on top of previous ones with a reduced alpha (=opacity), repeat the two previous steps as much as you want. The stacking of the reduced alpha will generally render a very refined-looking result.

But Pico-8 doesn’t handle alpha at all. So the solution I found was to store the screen in the spritesheet, clear the screen, draw my looping spline with the color 1, then take each pixel on the screen and its corresponding pixel on the spritesheet and add them up. Max that addition at 15 and draw the result on screen. Repeat. Palette swap like with the previous doodle and the result is lovely!

However, these operations being executed on every pixel of the 128×128 screen are quite slow and overload the CPU to about 200~300%. A solution to this was to use memory functions instead of checking each pixel individually. That reduced it to 150% but the result looked a bit strange, due to the funny way Pico-8 handles two pixels into each byte. In the end I kept the first method because the lag wasn’t very noticeable on the rendering anyway.

Both of these doodles were fairly straight-forward to make and mostly based on things I had seen previously.

But the final doodle I’m gonna be writing about is quite different. Here it is:

This doodle is inspired by 2D sandbox games, such as Terraria and Starbound. Both of these games have 2D terrain generation and I’ve been wanting to try and reproduce it for quite a few months but had no idea of what would be a good way to go about it. Until I thought about using splines for it.

This generation algorithm is mostly spline drawing, with a few randomized cellular automata. The splines define the surface, the composition of the dirt under it and then the caves and their width. The first cellular automaton simply fills up most of the tiny holes with dirt, the next ones generate the pools of water and then lava. The one after that adds greenery and the final one adds ores here and there.

Take a good look at the gif and you should be able to identify all of these steps.

This is one great example of a situation when all is needed is a good idea of how to go about it. The implementation was very straight-forward and I encountered almost no problem at all while coding it.

It might come in handy at some point too if I ever want to make a sandbox survival game or a Worms clone or anything like that, but I’m really just happy that the generation looks so good!

Splines are a very powerful tool is what we found out this week! They are great at rendering slick visual effects and generative art but they also have a huge potential for more mechanical procedural generation.

This was the first edition of the doodle insights! ‘Pico-8 Lover’ tier patrons can download all three of these doodles’ source codes right now (here, here and there) but if you are willing to wait a few weeks, they will also get released for free with a lot of others, like the 45 firsts.

The next doodle insight should appear next Tuesday and will offer an analysis of the effect produced by the next doodles, rather than how I made them. Look forward to it! ;D

If you have suggestions or comments about this post or the doodles in general, the comment section of the Patreon post is awaiting you! I will be answering as fast as I can! 🙂

These Doodle Insights are here thanks to the awesome people supporting it on Patreon! Here are their names!

Joseph White, Adam M. Smith, Matthew, Tim and Alexandra, Christopher Mayfield, Jearl, Dave Hoffman, Thomas Wright, Morgan Jensen, Zach Bracken, Anne Le Clech, Jared Butowsky, Tony Sarkees and Justin TerAvest!

Thank you for reading and enjoy the splines!

TRASEVOL_DOG