I spent last week making Tiny Animator and didn’t get any time for new doodles.
So today I though I would talk about older doodles and while I’m at it, attack a subject that get requested a lot: the pixelly dithering that I use a lot. Also, this subject is vast, so I will cover it over at least 2 parts, maybe 3.
Today we’re gonna take a look at how it’s done, why I like it so much, the most common uses I have for it, and the drawbacks of using it.
For those who have no idea what regular dithering is, it’s a technique commonly used in pixel-art, generally to do gradients. It consists of making the transition between to colored parts smoother by mixing pixels of the two colors. Here is an example of dithering that I found on the internet:
But the way I do it is a bit different. In fact it’s pretty terrible for still pictures and really works only when animated. Because I use random.
To do dithering the TRASEVOL_DOG way, first you need to get rid of screen clearing, then you want to take a certain amount of random pixels of your surface at each frame (I generally take 1000), you find the color you want for each of these pixels and then you set this color to its immediate pixel neighbors (‘circ(x,y,1,c)’ does that very well). Here’s an example with two metaballs.
But to make it really pretty, I generally go one step further by taking the intended color and randomly (50% chances) make it a shade darker. The result is the following:
So how do I know what is the intended color in the first place? That depends very much on the situation but the three most common ways are maths, second surfaces that serve as map, and cellular automata.
When I say maths, it could be something like this:
A second surface would be the case where you draw your non-dithered screen on a second surface (generally stored in the sprite-sheet in Pico-8) and then, when doing the dithering, check the corresponding pixels on the second surface for your random pixels on the screen.
Cellular automata is a bit more special because it’s best use is to generate more effects from the dithering. In the example below, each random pixel taken in the screen is compared to a fire palette. We take the next color in the palette and draw this one, until we get to the end of the palette and only draw black.
Now why use it? Well, this technique adds life to visuals in a very efficient and fairly consistent way (at least with a good random). The pixels switching randomly to a color or another make your screen look like it’s teeming with micro-life. And it’s no wonder, since this technique was mostly inspired by cellular automata, a category of algorithm generally seen (I think) as simulating micro-lives with invented rules.
Besides, this technique can be fairly cheap, using the absence of screen clearing to change only random pixels instead of the whole screen each frame while still getting a picture that is clear enough and has a lot more style too.
The main use I have for it though, is for backgrounds. For example, each of the games in Pixel Session Vol.1 have a background based on this technique (and slightly complexified). Because the dithering is random, it can be dangerous to use it on gameplay elements. But backgrounds are generally a safe for this aspect, at most they can serve an additional feedback and that can still be handled by this technique. Besides, by using it on a background and then drawing your game objects on top, you create cool trails that look like particle effects!
Outside of games, this trick is also great for animations as it adds A LOT of texture to any color. You can make gold shine like in one of the doodles shown above or you can use it to remove effects of stuttering when rendering tiny animations at bigger scales like here:
The drawbacks are mostly the lack of control over the random and in some cases, the performance can also prove to be a problem, especially when dealing with more complex cellular automata. Both of these subjects will be dealt with in the next part(s) of the Dithering Doodle Insights.
The usage in games is also quite limited, especially with the use of a camera, which will make the background look very strange, unless you assume it as a style and work on it with that perspective in mind. One of my Ludum Dare entries, BRICKS is an example of this.
Last but not least, when using such a technique, you NEED to consider people with seizure problems, and the other people who might feel uncomfortable when facing constantly moving graphics in general. To ease this problem, you should always make sure that the two colors you are dithering together are not too far away from each other. Prefer using colors which are neighbors on the color rainbow, or shades of the same color. The result will be prettier anyway.
‘Procedural dithering’, or more humbly ‘random dithering’ is a very powerful technique that will add a lot of life to any visuals, as well as a mountain of possibilities for playing with colors and different effects. These possibilities will be the subjects of the next post(s) on this technique.
But make sure the random dithering is not too unpredictable for your own works and most of all, make sure the colors you use it on are not too contrasted.
Here ends this edition of the Doodle Insights! I hope you found it interesting! All the doodles presented here can be downloaded for free in the 45 Pico-8 Doodles pack and can also be played directly on the Pico-8 BBS!
Doodle Insights #3 should happen next Tuesday again and is likely to be the direct sequel to this one, unless I find something even more interesting to write about!
If you have comments, questions or suggestions, please leave them on the Patreon post, thank you! 🙂
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 dithering!
TRASEVOL_DOG
* TRASEVOL_DOG * 