Zenith

front end development, data visualization

Winter 2014

Background

experience zenith

Tools

HTML, CSS, Javascript, Three.js, Python

Constellations have shaped humanity's culture, lore, and science. Yet, they are still just a human invention; dots in the sky joined together based on our desire for order. It's easy to forget that these stars exist in three dimensional space when one looks at the night sky from earth.

The goal of Zenith is to reframe the familiar view of constellations in a new perspective by using the capabilities of webGL to allow people to explore the constellations in 3D.

The stars are modelled to scale in size and distance from earth using data from the HYG database.

Highlights

Embrace a different perspective

Explore the constellations from different perspectives by using your mouse. Drag to navigate, scroll to zoom. Hover for the constellation name.

Learn the lore

What makes the constellations fascinating is the history and culture that's intertwined with them. Click on constellations to read the associated Greek lore

Process

Conceptualization

My initital concept was to build an interactive planetarium that would let the user browse the night sky on the web. However that idea was scrapped when I realized it didn't really take advantage of the affordances of 3D.

Second concept leveraged the affordance of 3D by allowing people to view and explore the stars from space.
Zenith user experience flowchart

Building

This project taught me a lot about project management and how to develop an entire application from scratch. By listing all of the features and forcing myself to prioritize, I was able to arrive at a minimally viable product (MVP); something that I could successfully implement within the given timeline.

First attempt. Stars are represented by spheres using Three.js

I knew that I needed to start small so I tried to map the stars of a single constellation. During that time, I made sure to keep scalability in mind as I wanted to be able to map all 12 constellations eventually.

Starting to connect the lines of the constellation and implementing collision detection of the mouse with the stars. Boy it's a lot harder to detect mouse hovers in 3 space.

Along the way I learned about the value of compromise and hacking it a little bit. Don't have time to implement a unique render engine to give the stars some sparkle? Just use a transparent png to give the stars their glow.

Half of the battle was sanitizing and organizing the star location data into a format that my web application could read. I learned that python could be used to accomplish that task so with a little help from a friend, learned just enough to extract all of data I needed from the HYG database.

Stars for all the constellations are in place. Wooo!

Learnings

  • Conceptualize/design at a high level. Develop at a low level by defining the core components of the concept (MVP) and focus on that first.
  • Understand the medium and leverage the affordances of the medium in the design.