Character Design with Microbit
Recently, I’ve been really intrigued by the Microbit, a nifty little programmable computer that strikes a compelling balance of out-of-box functionality and affordability.
Unlike many other microcontroller platforms, the Microbit has many sensors built in, including an accelerometer, compass, temperature sensor, and two pushbuttons. These sensors, along with a 25 pixel LED array, mean there’s plenty to explore without having to purchase additional hardware. And at $15 a board, it’s an extremely affordable way to introduce programming and embedded hardware to anyone.
When I first got a Microbit a year ago, a did a quick prototype to see how the LED array can be embedded in 3D prints (designed in Tinkercad).
Using the MakeCode editor, I programmed my “bunny” to respond when it was shaken or flipped upside down.
I hadn’t returned to this prototype in a while, but since launching 3D electronic components in Tinkercad last week (including the Microbit!), I thought it was a good time to continue exploring the design of interactive characters combining Microbit and Tinkercad. So as a weekend project, I did just that!
Inspiration
Considering how to best use the Microbit’s 5x5 pixel array for illustrating expressions was more challenging than I first anticipated.
On the one hand, it does not take much for us personify human expression more generally (my favorite example of this is the Twitter account Faces in Things). We can convey a surprising spectrum of emotion just using a pair of eyes and a single line for a mouth:
But to see how a 5px-wide resolution makes designing characters difficult, it’s helpful to compare to some existing examples of icon design for low-resolution computer graphics.
Back in 1999, Shigetaka Kurita introduced the initial set of emoji, designed for a 12x12 grid (that’s over 500% more pixels than the Microbit):
In the second to last row of the image above, you’ll find a set of simple emoji expressing happiness, anger, sadness, disgust, and surprise:
Notice how each eye has a resolution of 3x3 pixels, and there are 2 pixels separating the eyes so that you can easily distinguish them. With the Microbit, if you want to retain a space between two eyes, you are limited to a 2px-wide eye (2+1+2 = 5), which does not accommodate the “iconic” ^ ^ or x x eyes, or many other for that matter; for example, check out the 8-bit expressions below, where many expressive eyes are 3 pixels wide:
This leads us to our first challenge:
Challenge #1: The 5x5 LED array requires eyes that are no wider than 2px, which limits the range of expression.
The next challenge largely has to do with the design of the mouth and stems from the fact that 5 is an odd number. If you’ve designed icons before, you will know that icon standards for everything from mobile to desktop use an even number of pixels (e.g., 16x16, 32x32, etc.). With an odd-numbered pixel grid, the Microbit requires that any symmetric mouth is 1, 3, or 5 pixels wide at its widest point.
With 1 pixel at the base, an attempt at making a mouth bears a stronger resemblance to a downward-facing arrow:
A 3-pixel-wide symmetric mouth gives you the default smile / frown, as well as a wide grin:
For a 5-pixel-wide base, the expressions start appearing more abstract. Also note that either the mouth or the eyes need to dominate in order to maintain at least a 1-row gap between the two.
This leads us to our second issue:
Challenge #2: Attempting to maintain symmetry, an important aspect to how we interpret faces, is hard with an odd pixel grid
Another place to look for inspiration is toys with low-resolution displays, including one of my childhood favorites: the Tamagotchi. The original Tamagotchi from 1997 had a 32x16px display. Note that the mouth here is symmetric and 2 pixels wide.
One aspect I love about these size-constrained displays is that they are still able to make the character feel dynamic, with constant movement and small changes in expression that make it come to life. I wanted to capture this spirit in designing expressions on the Microbit.
Finally, a special affordance of the Microbit is that you have the power to embed it in whatever shape you want. Thus, unlike the Tamagotchi, where the screen displays both the character’s body and its facial expression, we can use the Microbit’s LED grid to only convey expression while encasing the microcontroller in a custom shape defining the body of the character (that’s where the 3D printing comes in, in this particular example!)
A few additional examples of digital pets from my childhood are shown here, including the Nano Baby and Nintendo’s Pokemon Pikachu toy. I find it fascinating that the eyes can be quite simple (as in the case of the Nano Baby) yet still be entirely evocative.
Microbit Experiments
To begin, I decided to experiment with creating as many recognizable emotions as I could using the 5x5 grid. This led to a spectrum of expressions illustrated below:
I personally found the minimalistic 1x1px eyes to be the most compelling, but there are certain types of expressions that cannot be conveyed without having a higher-resolution eye, such as blinking (which I found works best for 2x2 eyes). I also found that non-symmetric mouths can give a fun and mischievous look, such as the one-sided smile.
After coming up with a matrix of expressions, I combined them in ways that could begin animating the character. In the same way that Tamagotchi are constantly moving, I wanted to vary just a few pixels to make the character feel constantly active. I worked on two different types of animations: Neutral States, or continuous animations not triggered by any particular interaction, and Reactive States, or movement in response to sensory input (in my examples, pressing the pushbuttons).
Neutral states
Blinking
Expanding the eye up and down to animate blinking worked best for 2x2 eyes, rather than a 1x2 eyes in my experience. I also found timing was important, with a longer delay after the default state giving a more realistic feel.
Looking around
By shifting the entire face over in equal amounts to the left or right, I was able to give the perception of a curious character constantly evaluating its surroundings.
Boredom
1x2 eyes worked well for an apathetic or lethargic appearance. Here, the long, closed eye combined with an off-axis mouth conveys a feeling of boredom.
Reactive states
Playful sideways glance
Pressing either the A or B button triggers a sideways glance and an asymmetric smile to give a playful and silly look.
Winking
I programmed a wink using 2x2 eyes, which is more impactful when transitioning from a neutral state to one with a smile.
I then combined most of these animations to create my own character in MakeCode:
When the Microbit is turned on, the character blinks to signify that it’s waking up. After waking up, it glances to the left and right several times until it starts to get bored. When it’s been bored long enough, it falls asleep. Pressing on either button wakes him up. (:
Here’s a link to my initial design that you can import and edit in MakeCode:
Now that I had the interaction down, I could begin to embed my Microbit into a 3D-printed character!
Tinkercad Prototyping
I designed a character in Tinkercad, a free online 3D modeling tool that I also happen to work on. Using the new Circuit Components in Tinkercad, you can easily add a 3D model of the Microbit to your design and begin to design an enclosure around it. See the video below for how to access Circuit Components in Tinkercad:
After dragging in the Microbit, I began building a cat character to fit around it, making a few changes from my “bunny” design from a year ago.
First, I decided to have the character’s body extruded from the Microbit case, rather than having it fully formed around it. If you use the entire Microbit as the body, it inevitably leads to boxy shapes, which can be limiting for the type of character you may want to build.
I initially wanted to hide the LED array under a very thin layer of plastic like the bunny design. But since I only had dark gray filament on hand, I created an opening for the LED array instead. I also found that the light sensor, which I originally intended to use, does not work well when the LED array is fully enclosed; this gave me another reason not to enclose the LED array completely.
Next, I created tabs for the character’s arms that act as little levers that trigger the pushbuttons on the Microbit when depressed. To make the arms flexible, I made them thin and cut out slots in the material around it. I also added cylinders behind the arms to reduce the spacing between the arms and the pushbuttons.
Lastly, with a fully encased design, I found it difficult to have enough clearance to insert the Microbit at an angle such that the push buttons were still exposed. I cut out most of the back of the enclosure to make inserting the Microbit easier, but I still plan on modifying the design so that the Microbit is secure in the case — more prototyping soon!
You can make a copy of my design to modify and build your own at https://www.tinkercad.com/things/azRTRLvzH5D-microbit-character#/
Prototype
It took a few prints (and will require a few more adjustments for things to fit more snugly), but here is my prototype in its current instantiation.
More Opportunities to Explore
I’d love to see others build off of this example to explore a range of different possibilites, including,
- Coming up with new expressions to add to the Microbit Expression Cheatsheet.
- Figuring out more creative ways to embed the Microbit in a 3D print that don’t appear so boxy.
- Improving the 3D design so that the Microbit is more secure in the enclosure.
- Adding an embedded battery holder so that the character can be mobile.
- Connecting the Microbit to external actuators like servos or motors to make the design even more animated with moving parts like arms and ears.
- Experimenting with different materials to make the LED array further embedded in the 3D-printed design.
- Using the built-in radio to prototype multiple characters interacting with one another!
Overall, I’m super excited about the potential for children to program their own interactive “Tamagotchi” to do whatever they imagine, an activity I would have loved to do as a kid!
