When you have kids, you start realizing that the world must be a really confusing place from their perspective. Take waking up for example. Imagine you’re 3 years old. You can’t tell time. Some days, you wake up and it’s dark outside, but venture into the kitchen, and see Mom is already making breakfast. Some days when you do this, she is still in bed, and exclaims “What?!? It’s the middle of the night! Go back to bed!”
This conundrum inspired my design of the Moon Clock. I wanted to make something that would help my kids know when it was ok to get up, despite their inability to tell time.
Spoilers! Here’s the clock running in his bedroom, from his perspective in bed:
I considered various delivery methods of such a clock/timer device. I could code a phone app, and hook up an iPad or Android tablet in the kid’s room. I could get some leds and create something that lights up. But ultimately, the shortest path to a minimal viable product, given my skillset, was Flash. I figured I could animate and code something in Flash and run it as a website on an old laptop.
I hadn’t really used Flash (now Adobe Animate) much since college, and even then I was mostly using it to animate, not making interactive sites. But I still thought I could mock something up pretty fast, and I did! I created a simple moon graphic and had it move in a slow arc across the night sky. It left a blue trail to help illustrate how much time had past, and how much time remains. I even added some subtle twinkling stars fading in and out with an offset.
Over several iterations, I made some design decisions to dim the entire screen considerably. My kids sleep in very dark rooms, and even with the background being black and the laptop at minimum brightness, the screen was putting out a lot of light. For simple tuning, I ended up just putting a semi-transparent black rectangle over the entire stage, so I could easily tweak the opacity until it felt right.
Even though the kids can’t tell time, I figured putting the times on the screen would help them learn. So I put the current time big and bold in the middle of the screen, with start and wake times on either end of the moon’s path. I added a percentage display in the middle, to start introducing that concept as well.
The moon and star animation was the easy part. Next I needed to create an input screen to set the start and end times. It’s not the most beautifully designed UX experience, but I settled on a few number spinners. I set the times to default to my typical settings, so I rarely have to touch them every day. The minute spinners increment by 5 minutes at a time, and the hours automatically switch from AM to PM. After a few iterations, I added a Wake Buffer too – more on that in a bit.
But speaking of AM/PM… figuring out the math to flip over midnight was TRICKY! I had to draw it out and think it through several times before getting it right. I kept track of the hours in 24-hour time in the code, but that still didn’t make it trivial to increment properly when you flip from 23:59 to 0:00. When all was said and done, it actually was quite simple:
I track the goalSleepTime – the amount of time you want the kid to sleep. And then I track how much time they have slept at the current moment in time (timeSlept). With those two values, I can easily determine the percentage slept and call up the right frame of the moon animation.
I did learn some pretty funky things about Flash programming during this project. One of which was that Flash does not elegantly handle global variables (at least as far as I was able to research). (SIDENOTE: Since Adobe changed the name of their software application from “Flash” to “Animate” it is REALLY HARD to search for documentation! “Animate” is all over the internet, and refers to all sorts of unrelated things.) So my (admittedly hacky) workaround was to create some textboxes with black text and use them to hold variable values. They’re invisible in the finished product, but I could color the text with a contrasting color when I was debugging.
When the moon reaches the end of its path, the screen switches to a bright, happy sunrise, and announces that it’s time to wake up!
Cute, right?
So about that “Wake Buffer”… there was a stretch of time where Ben would wake up at 6:30am, but I didn’t really want to start the morning routine until 7. I would watch him tossing and turning, but he dutifully stayed in bed, in the dark, for 30 minutes until the clock let him wake up. I started feeling guilty about this, and wanted a way to let him know it was ok to get up and read in him room, but it wasn’t yet time to get up and start the day. That’s where the Wake Buffer comes in. You can adjust the time, but by default, a graphic will come up 20 minutes before the programmed Waketime, telling the kid that it’s ok to read. This has been a great solution.
So there you have it! The famous Moon Clock. It’s a permanent fixture of our bedtime routine, and as long as we have an internet enabled device, we can use it on vacations or when the boys sleep over at Grammy’s house. And it has actually helped Ben learn a lot about time and percentages!
You can test out the Moon Clock in all its glory at:
www.caramalek.com/clock
Project! 