Interactive Space Artwork

A demonstration of the intersection between visual design and Javascript. A generative, interactive artwork to be displayed in the background of a website.

Inspect Code

Role
UX Designer
Head Programmer

Tools
p5.js Editor

Time
5 months

Design Challenge

The design is inspired by the beauty of space and rotational gravity. The artwork incorporates different celestial elements, such as stars, planets and comets rotating around the Earth. I wanted it to be soothing to look at, dynamic but slow, simple, yet still aesthetically pleasing, but at the same time possess complex, interactive and generative elements.

Suitable to be displayed in the background of a website without being too distracting.

The Code

The artwork's design and interactive code are built upon the "Star" and "Planet" classes and with the help of senior coders, I was able to finish my interactive artwork.

class Star {

constructor() {

// Properties of class Star

this.radius = random(250, width * 2);
this.angle = random(360);
this.speed = random(0.04, 0.08);
this.size = random(0.5, 4.5);
this.color = random(random(starColours);

}

The Earth

The construction of the Earth required research and drawing skills from outside sources. From searching the Javascript library, it was found that using noise was a great method for forming what resembled “landmasses” on the Earth.

Here is the after, with noise, versus the before:

Interactions

Move your mouse across the screen and watch the stars.

Try moving the planets, make them crash,

And discover comets in the process.

Last chance, try it out

See how it was made

Inspect Code