Frosted – Clockface for Fitbit Ionic and Fitbit Versa

App Gallery Image

Goal

The goal was to create the effect of frosted glass, something that's not natively possible on the hardware since it can't blur images and there is no direct framebuffer access. I achieved this by rendering out each individual square that can be lit up in a 3D scene that already contains the frosted glass ribbons. The images get colored and composited directly on the watch, creating the impression that the effect is dynamically created.

Here are a few of the raw assets of the prerendered squares in greyscale before compositing, and their coordinates

<image href="" fill="white" id="1-2" class="square" x="70" y="36" width="79" height="83" />

<image href="" fill="white" id="2-3" class="square" x="86" y="30" width="87" height="85" />

<image href="" fill="white" id="2-7" class="square" x="243" y="62" width="43" height="50" />

<image href="" fill="white" id="6-5" class="square" x="175" y="180" width="59" height="59" />

<image href="" fill="white" id="7-5" class="square" x="166" y="215" width="68" height="60" />

<image href="" fill="white" id="7-6" class="square" x="195" y="205" width="70" height="68" />