• Jack Chen

ICM Final Project


Cycle_of_Universe from Jack on Vimeo.

Project link on Glitch: https://cycle-of-universe.glitch.me/

Project link on P5 editor: https://editor.p5js.org/ukpfilms/sketches/4MFtkPQkq


I took inspiration from “The Last Question” by Isaac Asimov – a short science fiction story published in 1956 about humanity’s inability to prevent the eventual heat death of the universe. I was blown away by the story’s ambitious setting along with its philosophical approach in exploring the limits of existence on a cosmic scale.


entropy_p5_sc1

Inspired by Asimov’s story, my project is an interactive simulation of a universe where the user can initiate the “Big Bang” of their own universe, then look around while modifying attributes of their universe before it reaches the end of its life span. The simulated microcosm of the universe provides an opportunity to consider our existence on a cosmic scale – a perspective not often conjured up when preoccupied with the routines of day to day living.

This project was created using P5.js with WebGL. It is best experienced in full screen with the sound turned on, as the music will react to the user input alongside the visual elements, formulating an immersive interactive experience.

The basic particle system used in my project was modified from a 3D WebGL particle system found online .

The soundtrack used in the sketch is composed by my friend Adrian Emond, written originally for a Sci-Fi short film which I am making. I experimented with various interactions with the soundtrack in the sketch, in the final version, the soundtrack frequency is tied to the size and gravity of the planets.

A lot of time was spent curating the narrative of the interaction. In the previous version, a title screen with text and icons showing the name of the project and instructions for controls is shown in the beginning, but is later replaced with a more minimum screen with only an instruction to “click to start the big bang”.


old title

click to start the big bang

The other control instructions are instead moved to the main component of the sketch. This is because in user testing, a common feedback was that users could not remember the instructions after reading it only in the title screen.

It was challenging to write all the interactions in the sketch. Many variables are used, a few notable ones include:

BigBang – Boolean variable which determines the state of the sketch, weather if the simulation is running or if the title is showing.

entropy – increases with time after the Big Bang begins, named after the second law of thermodynamics which will lead to the end of the universe in the far future according to some theories.

shrinkTime – at the end of the simulation, all planets shrink together. This variable and a few others measures if and how long the planets are shrunk together in the middle, ending the simulation once the planets are all back in the middle for a while.

Many other variables and expressions are used to reference each other to run all the interactions of the sketch such as the planets’ changing size, color, text display, amount of planets with rings, and audio frequency.

Working on this project gave me an opportunity to familiarize with using WebGL, something which I have been interested in since I discovered it near the final weeks of the semester since I like having 3D elements in my project for a more dynamic visualization. On top of that, I was also able to implement a lot of elements taught during class such as sound modification, objects, arrays, variables, images/videos etc. (I don’t have coding experience prior to this class so everything I used in the sketch are done using skills I learned this semester).

Moving forward, I plan to learn more about processing and three.js when I have the opportunity. A lot of tutorials and examples for creative coding/visualization uses processing instead of P5, so I want to implement those online resources into my future projects by first learning processing. On the other hand, three.js is a common library for working with 3D elements, I will be able to do more with 3D elements than with just WebGL once I learn it.

I will definitely be using creative coding languages such as P5 or processing in my future works. I’ve always been interested in exploring concepts and telling narratives through immersive experiences, and my previous practices of video and photography does not allow for interaction beyond observation. Creative coding has really opened up a new window for me to explore concepts in an interactive way for my future projects, and I am very excited to learn more creative coding techniques to implement into future projects.

6 views0 comments

Recent Posts

See All

ICM week 8 – Trippy Mirror

This week I created a trippy mirror using P5 using input from a webcam: https://editor.p5js.org/ukpfilms/sketches/0Ia0ZObuj The project was conceptually inspired by the mechanical mirrors created by m