29 lines
1.4 KiB
Markdown
29 lines
1.4 KiB
Markdown
# 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" />`
|
||
|