Creating a Star Trail

Our goal in creating the new www.cuberto.com was to build a site that not only conveyed the magnitude of our work, but also inspired visitors about the possibility of working with us. We called the new theme Star Trail and used a specific type of long-exposure photography to capture the movement of stars across the night sky in-detail.


Version 1

The project got underway with simple sketches to ascertain a functional idea of how we wanted our sky to look. Ultimately, this pushed us to elect an animation — we wanted to create a feeling of movement akin to how stars move across the sky, we added an interaction related to the mouse movements of the user. These animations were developed from our original sketches and then refined using After Effects.

During the first iteration, we employed continuous canvas drawing to render the circular movement of the “stars” with each “star” with a different radius and traction. The canvas was then filled with semitransparent color. Special empirical formulas were used for each shot to calculate the coordinates of the stars on the canvas.

Ultimately, the HTML canvas provided met all of our needs, rendering 4000 stars for 30 fps. However, the stars were leaving the trail behind so we decided to try another approach to achieve a more favorable result.

The first iteration, we employed continuous canvas drawing to render the circular movement of the “stars” with each “star” with a different radius and traction.

Version 2

In this, the second iteration, we rendered the stars as incomplete arcs. To allow the arcs to collapse into stars, we had to minimize the arc length by one or two pixels, and use rounded edges. As the arc length changed, so too did the star trail length.

We connected the speed of the mouse to the speed of the sky-rotation effect, with cursor movement to the center of the screen triggering the star trailing process. Unfortunately, the canvas performed much worse in the second iteration, and after just 2000 stars in 30 fps it started to lag.

Despite these performance limitations, we actually decided to use the second iteration because the star-trail effect rendered was far more similar to how stars actually behave in reality.

The final step of our website design project involved setting the max trailing length for each arc, and ensuring the speed of movement avoided any unsightly filling by a full-white color.

https://vimeo.com/201851658