December — Mr. Baby Paint & accidentally discovering a new cellular automata & pixel-fattening
December — Mr. Baby Paint & accidentally discovering a new cellular automata & pixel-fattening
Heikki Lotvonen | written on 4.2.2026
I spent a better part of December on building Mr. Baby Paint, a radically simple co-op drawing app for toddlers & accidentally discovering a flood-fill cellular automata, plus developing pixel-fattening algorithms for bitmap fonts.
Designing software for toddlers: Mr. Baby Paint
I also managed to make and release a new editor during December! It's called Mr. Baby Paint [link: https://glyphdrawingclub.itch.io/mr-baby-paint].
My 3-year old kid wants to participate in everything I do, including computer stuff. He enjoys pressing the springy keys, wiggling the mouse, making it do clicky sounds, and spinning the wheel. But with that kind of skillset, there's not yet a lot he can do with the computer. All I could think of is two things: experimental keyboard-smashing poetry in a text editor, or "action paint" in a drawing app.
We tried both Wordpad and MS Paint. As simple as it gets, I thought. While he did manage to draw some beautiful but random scribbles and produce interesting yet unintelligible letter poems, overall the experience was more frustrating than fun. Because his mouse movements and clicks were haphazard and erratic, and key presses random, I had to constantly intervene to bring back the typing or drawing mode after he "mis"clicked some random menu, toolbar or taskbar item. And changing colors, fonts or other options also meant I had to take the mouse away from him for a bit. He found these interruptions annoying, because he just wanted to keep playing. (But for some reason, when the computer is off, he's not interested in playing with them.)
So, Wordpad or MS Paint wouldn't do, and I couldn't find anything else that would be simple enough for our needs and his skillset. So, I had to make my own. And I wanted to tackle this task with the same seriousness that I would any other software project, and really think how to design a good software experience for toddlers (in co-op with their carers).
The result is a radically simple drawing app called Mr. Baby Paint. At first I thought because the app is simple, that it would be a simple to do, but it turned out to be a much more interesting challenge than I expected, and it produced some surprising outcomes, like accidentally discovering a flood fill based cellular automaton.
Requirements
The minimum viable product I envisioned for this drawing app is as follows: a fullscreen blank canvas with no menus or toolbars, where clicking and dragging the mouse draws directly on the screen. My kid sits on my lap controlling the mouse while I handle keyboard shortcuts with my left hand — CMD+S to save his drawings and CMD+E to clear the canvas. The entire screen is the drawing area, and nothing breaks the experience, not even if he smashes the keyboard.
But, I also wanted the app to be slighlty more interesting and fun than that and really encourage drawing and creative play. Every action should be rewarding, whether they were intentional or not. So every action either makes a mark, produces a sound effect, visual effect, or a combination of these. There's no way to "mess up".
So, left-click draws, scroll drops sand and right-click paintbuckets. The faster you draw, the more paint splatter it produces.
One of the problems I had was that when you move the mouse really fast, the computer doesn't actually register the movement as a fluid continuous<br>curve, but as discrete points in space captured every few milliseconds. This is fine for normal computer use, but<br>unuseable for a drawing app where you want to draw a continuous line. Most drawing apps solve this by connecting<br>each point with a line, which works great for moderately fast mouse movements. But, toddler mouse movements can be<br>really fast, so the distance between the captured mouse positions can be tens or hundreds of<br>pixels apart, making the supposedly fluid curve look very angular. I solved this by using a Catmull-Rom spline to<br>connect the points, which creates a smooth continuous curve between points. Then, I just stamp the brush texture<br>along the curve every 1px. This approach was laggy for larger brushes, so I had to limit the stamping distance for<br>them.
The UI
Instead of requiring precise mouse control, I made use of the erratic mouse movement: moving the cursor anywhere on the screen edges changes some setting:
Left edge of the screen is divided into 16 segments, which controls the brush size AND the selected font.
Bottom edge of the screen is also divided into 16 segments, for selecting one of 16 colors.
Top edge is divided into 64, for selecting one of the following characters: "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ! ?".<br>One of the fonts is a set of icons and shapes...