developing right now — adding possibility to take a screenshot
consol
dont find me??

gloam.io

Where does it come from?

It started as a student project at the HfG Schwäbisch Gmünd. The task was to create something that visualizes programmed and repeated data. I found it interesting to work with sunrise and sunset times, because not only do they change over the course of a year, but they also change differently according to your location on earth.
When I had submitted my project in July 2014, I decided to continue developing it and therefore created the interface and the touchversion.

Basic functionality

If you tap/click in gloam.io it triggers a series of events. gloam.io calculates the latitude depending on the y-position of your tap/click in relation to the whole window height. That latitude will be transferred to a PHP-Script to calculate the sunrise, sunset and twilight times. When these times come back from the server they are used to create a gradient according to the global date and time. gloam.io interpolates between sunrise, sunset and astronomically defined twilight times to create a smooth transition.

Colors

This was one of the hardest parts of my project. gloam.io interpolates on 4 different levels between 24 colors. So there are nearly 100 different color hues which are used to create this visualization. They were handpicked by watching a lot of sunrise/sunset time-lapses and then adjusted to the overall look and feel.

Who did this?

My name is Nikolas Klein and im studying Interaction Design at the HfG in Schwäbisch Gmünd. I love what I'm doing! If you have any feedback or want to contact me—feel free to do so!

presskit / with high-res images

presskit with high-res images … // 9MB

set of postcards / ready to print

postcards

#nicetohave / my todo list

  • sharing of created visualizations (!)
  • fixing rendering issues in safari and firefox
  • debounce and throttle a lot of inputs
  • swipe to navigate up and down in menu
  • PHP bug fixing when there is polar night/day
  • possibility to delete only one element
  • jump tutorial steps with keyboard
  • save skipped tutorial in cookie
  • modernizr check

#done / code on github

  • adding capture button for screenshots (10-29-14)
  • not calling it beta anymore (10-27-14)
  • UX tweaking for mouse-input (10-27-14)
  • direct feedback while trying to delete (10-19-14)
  • better swipe detection when deleting (10-19-14)
  • added latitude information (10-17-14)
  • implement mouse input (10-16-14)
  • better cross browser support (10-16-14)

Thanks!

Thanks to everyone who helped me with my project. Thanks to all my friends at the HfG for enduring endless talks and being my hardest critics at the same time. Thanks to Frank and Torsten for helping me with print and photography. Thanks to my good friend Erik for translating and thanks to Prof. Jens Döring and Prof. Michael Götte for getting me started on this project and all the advice along my way. And thanks to Guido Gerding for the astronomical input.

This work and the downloadable content is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Google Analytics is used.

sharing/not quite ready

Of course I want you to share your own beautiful visualisations—I'm working on that.

Clicking on capture will hide the GUI giving you the possibility to hold the moment with a screenshot.

In the meantime there is still the option to share gloam.io itself, if you like it. Or check it out on github.

Tap anywhere to create a gradient.
Swipe around to change date and time.

XXX
Tap and hold to adjust.

Swipe around to adjust the latitudes.

The latitudes are constrained from 65° to -65° because of polar night and day values.
After adjusting just hold again to reload.

There you go! Enjoy creating your visualisations.