A Starry Night

A demonstration of the app in action, generating a unique universe each playthrough.
After a few minutes, the night sky becomes filled with various patterns.
Research for colours in the background
Hertzsprung-Russell Diagram for use a reference for star colours
Probability Distribution Function for star generation

Inspiration

In today's media, negative events are often overemphasized for press revenue. As a result, this create a society which becomes more and more on edge as a result of negativity. We wanted to build an experience which can captivate users, and direct their time online to a more soothing experience and serve as a positive outlet for time spent online.

What it does

The user is presented with the prompt to place down 7 stars in a blank night sky. These stars connect to form a first constellation. Afterwards, the screen zooms out slowly, as new stars come in, and themselves make more constellations. The experience lasts as long as you want, and becomes richer the longer you let it run.

You can keep adding stars by your own command, to complement the stars being continuously generated as you zoom out. Therefore, the experience is interactive and adaptive to your inputs.

How I built it

We used HTML to build the exoskeleton of the page, including the gradient background and the font embed.

The rest of the app was coded in JavaScript, using the Canvas component.

We defined a Star Class to use as our baseline object and then used various path finding-like algorithms to both generate and link new stars as they were produced.

We used several iteration of colour design as well as consultation with real-life reference pictures and Hertzsprung-Russell diagrams for star and background colours.

Challenges I ran into

Audio issues; Google Chrome does not allow autoplay audio, and we needed to work around this by instead assigning the audio trigger to a mouse click.
Probability Distribution; we wanted the stars to spawn near the edges of the screen, which required us to compute a sigmoid function for our probability distribution
Constellation Algorithm: Early iterations of the algorithms were unable to successfully link objects in a desirable way, and required extensive tuning to look correct
Twinkling of stars; We wanted the stars to twinkle just as they do in the night sky from Earth. This required a significant deal of additional consideration to make the flickers both 1) realistic looking and 2) desirable to look at

Accomplishments that I'm proud of

We were able to produce an algorithm which generates, from points in an array, constellation-like graphics which are mostly realistic, and more importantly, mesmerizing to look at {constellation path, fading, twinkling}.

We were able to pick up the basics of HTML and JS from virtually ZERO prior experience in only a single day.

We were able to produce an experience that is demonstrable on all JS supported platforms, which is not only functional, but also looks quite good!