Time, Space, and Universe

This work is a procedurally generating view of star-tracks and constellation with p5.js. I try to reshape the sense of time and space in the universe in a two-dimensional media.  Time, space, and Universe is the case study of Computational Form Course in 2018 Spring. You can find all my class sketches here.





I have always been fascinated by things related to astronomy. Like the universe, like galaxies, they are full of mysteries and seem to have inexhaustible energy, unlimited time, and infinite possibilities. This time I’m still continuing exploring the sense of time and space in the universe with the help of computational form.
This theme has appeared for several times in my previous sketches. The exploration of the sense of space was unexpectedly realized by harmonograph in the Paper.js week. The spatial distortion effect was great, but it was very regular and lacked randomness and arbitrariness. Similarly, it is a gray-scale sketch, which makes it feel severe and rigid.


The gray-scale sketch about the black hole



I got some inspirations from Hyper Glu ‘s work Going to Quasar. There are some features of this work that contribute to its unique visual effect;

  1. It creates a structural misalignment through color differences; adjacent colors also have adjacent hues. 
  2.  The brightness of color has a negative relationship with the distance between tracks and center point, so does the saturation. These produce a depth of field for this work. 
  3.  The length of the arc(or the radians) of every track is different, and it seems to be controlled by random();

So I started to draw the star track. The idea is to make all the tracks in an array, but each of these tracks is not circular but each arc, so the hierarchy should be more than one. Considering the platform I’ve chosen, I set “class” of every track and orbit and made the color more HSB;

To make it look less flat, I tried sin() to control the brightness of the orbit, and shrink the width of stroke to make it like the track.

下载 (30)

While changing this, I find this could be a pretty common scene of a constellation in a sci-fi movie. So I kept searching for more inspirations, and I found Beeple’s everyday – June 2017 made a great illustration for this scene.

It has a particular angle and a central celestial and marginal galaxies and clusters. Besides, the emitting effect of the light creates a kind of mobility. Based on this information, I added another track under the original track and changed the blender mode into “ADD.” The randomness of distance between tracks was added, and the rotation in space are faked by scale(); As for the central celestial, I drew a shallow halo of its outline to give the hint that some mysterious thing exists here.


Drawing the constellation uses the same strategy as the track, but it has three random() filters: the constellation, its emission, and its orbit. The brightness of color changes in the same way as the track, but the value of saturation is very low.


The last step is to add randomness and arbitrariness to it. I’ve spent a hard time to test which variable I should set, and which I won’t give the control to the computer, and the proper range of different variables. 

For the sense of distorted space, according to my Paper.js sketch, there should be an angle shift between different orbits. Also, not only the tracks will change shaking from left to right, but I could also set a different offset of orbits, so the tracks will look like they are rolling.

However, when I tried to use noise to control the rolling, I found that the constant rolling won’t be a good choice because it is hard to tell tracks if they are staggered together. So I turned to pow(); I searched for the formula and got one from Kynd



Adding it to the orbit and it makes a huge difference. 

下载 (27)

The rest of the work is to add the random rotation of the view and random color range. And here’s final outcome.


Other projects:




Flappy Bird ARAR Game, UX Design

BlueVideo Game, UX Design

Rollin'UI/UX Design

Pleasing DiningFront-end Coding of Mobile App

Motion GraphicsMotion Design


The LampLighterExpressive Game

Computional FormCreative Coding


Close Bitnami banner