-
1The Idea
Dude, I was just getting to that…
Piko tracks your movement using an onboard accelerometer, applying a bit of clever math and physics to estimate how fast, and how often, you’re taking steps. We’ll dive into the technical details later, but in short, by analysing changes in acceleration, Piko figures out what you’re doing.
Once he detects a shift in your motion, like switching from walking to running, the ESP32 kicks in, choosing the right animation to match your activity. That’s how you know Piko’s keeping up: his display changes as you do.
-
2Design Inspiration
Piko’s design draws inspiration from the nostalgic charm of Tamagotchi characters and the clean aesthetic of minimalist pixel art. The goal was to create a companion that felt familiar, comforting, and visually timeless.
He was intentionally designed to be:
- Instantly lovable with a hint of deadpan personality
- Approachable and non-intimidating
- Visually simple, using only black and white for maximum clarity and charm
-
3Sketching & Choosing the Final Design
After a whole lot of sketching and back-and-forth of ideas, four character designs made the final shortlist, each with its own unique charm. Some were expressive, some more peace-loving, but in the end, there was one clear winner…
Piko! 🎉
Minimal, deadpan, and just the right amount of cute — think Baymax meets pixel art.
When finalising his design, 3 things mattered most:
- A clean black-and-white colour palette for that crisp pixel feel
- A neutral expression that users could project their own emotions onto
- Soft, rounded features to keep him friendly, familiar, and wearable
-
4Creating Pixel Art
Okay, chill out there, Piko...
Piko was brought to life in Procreate, a powerful digital art app with built-in animation assist tools, perfect for pixel art. Before getting started, I watched a few tutorials to understand how to best set up a workflow for crisp, clean animation.
Here’s how the setup worked:
- Created a low-resolution canvas (50×50 pixels) with a visible grid for accurate pixel placement
- Built a custom pixel brush to get sharp, blocky lines without any anti-aliasing
- Drew each frame by hand, using layers and onion-skinning for smooth motion
- Exported the final frames and rescaled them using nearest-neighbour interpolation to keep the pixels sharp
- Imported a custom pixel font to tie everything together in a consistent visual style
If you’re new to this kind of workflow, this tutorial is a great place to start.
-
5Animating Piko's Activity States
Piko comes to life through 4 core animation states that reflect your movement in real-time:
When you're inactive for a bit too long, Piko is gonna get tired and fall asleep... so let's keep it pushing!
Each animation was hand-crafted to feel smooth, expressive, and engaging, with a consistent character-style across all states. Here’s how the animation process unfolded:
- Mapped out motion: Started by collecting reference videos and sketching rough thumbnails to plan how Piko should look in each state.
- Idle animation: A simple, looping bounce that gives a subtle sense of life even when stationary.
- Walk cycle: Built using the classic four-frame method — lift, step, contact, and drag. Onion-skinning in Procreate helped align movements precisely.
- Reused the base body shape across frames to stay consistent
- Tweaked limb positions frame by frame for smooth transitions
4. Jog & Sprint cycles: Evolved versions of the walk loop
- Added forward lean and more exaggerated movement
- Increased frame rate and reduced spacing between keyframes to convey speed
The walk cycle took the most time to refine, but once it was locked in, it served as a solid template for the faster motion states, saving time while keeping a consistent style.
Studying references on Pinterest and frame-by-frame tutorials really helped to understand how subtle changes in posture and spacing create the illusion of movement, especially in pixel art, where every pixel counts.
Examples like these were great to learn from.
-
6Building Piko's Body
I think I have a couple idea’s for that.
The goal is to create a clean, minimal enclosure that didn’t distract from Piko himself. No extra buttons, no bulky frames — just a simple, wearable shell that fits comfortably on the wrist and keeps the focus on the display.
By stripping away unnecessary complexity, the design should stay true to the overall aesthetic: functional, low-profile, and charmingly understated. Here are a couple of my early sketches for the watch:
-
7Designing the Base and Cover
Once the initial sketches were locked in, it was time to jump into Fusion 360 and start translating the concept into a real, functional design. This stage was especially fun — and a bit of a puzzle — as it involved modeling around the actual electronic components to make sure everything fit snugly inside the case without wasting space. Precision was key, and every millimetre counted.
-
8The Fusion 3D Model
The files for the model have been added to the project and are available further up.
-
93D Printing
This is the stage where we begin 3D printing the frames and cases.
Pro tip: The cases have tight tolerances and require a high degree of printing accuracy, so it’s important to ensure that your printing environment maintains a stable, consistent temperature. This helps prevent warping and ensures that the parts fit together as intended.
-
10Building My Brain
So now we get to the part that actually brings Piko to life, and that would be his internal circuitry. Building on the components mentioned earlier, the connections are quite simple, and lucky for us, everything is able to be run on one powerful, tiny ESP. So let's get to connecting!
Discussions
Become a Hackaday.io Member
Create an account to leave a comment. Already have an account? Log In.