Project Inspiration + Initial Proposal

My project was inspired by the Future World exhibit at the ArtScience Museum in Singapore, where I live. This exhibit which was created in collaboration with the international art collective teamLab – essentially consists of a maze of rooms with interactive installations inspired by different aspects of Singapore from its climate to culture. Each of them introduces a new fantasy space into which the viewer is invited to engage and shape their own narrative. Consequently, since I was interested in continuing to experiment with the interactive elements of p5.js such as the mouse and key events, functions, and random variables; as well as enjoyed making patterns generally, for my final I envisioned the larger project being an exhibition similar to Future World that is instead focused on the theme of personal memory and how it is reflected through abstraction, and to submit, I wanted to flesh out some of these patterns with due consideration given to their interactive elements.

Here is a link to my full proposal.

Final Documentation

Here is a link to a html page with other info regarding each pattern (i.e. the code) collated in one place!
Here is a link to demo videos for each of the sketches!
Just as a note, all of the sketches can be downloaded as .PNGs!

Pattern 1 – Who Am I Today?

Here is a link to the Pattern

This pattern was inspired by my identity as an immigrant. This is a topic that I have been exploring consistently recently, and thus believed it would make an appropriate addition to this collection of sketches. Thus the sketch itself consists of the colours of the Indian and Singaporean flags dripping down the screen unpredictably, reflecting the often volatile sense of identity that I feel.

Pattern 2 – Heartbeat

Here is a link to the Pattern

This pattern allows the user to interact with it and control the “heartbeat” of the pattern, i.e. the speed at the concentric circles expand and contract. It is not only representative of the constant highs and lows that I have felt in my own personal life recently, but also allows the viewer to see themselves and their personal mindset reflected in a highly visual form.

Pattern 3 – Where Do The Memories Go?

Here is a link to the Pattern

This pattern is inspired by the fading of memories as time passes. It prompts the viewer for their age and then displays a vibrant collection of orbs flashing the same number of times. Then, in an almost foreboding manner, at 1 fps, each of the orbs begins to turn black as the viewer can do nothing but sit back and watch as the symbolic representations of their memories are wiped away into nothingness.

Reflection

I think overall I was able to get quite close to what my intention was with this project. I wanted to create a couple of patterns with more well-considered and symbolic interactive elements and I believe I have managed to accomplish this. However, in doing so I think the direction that I took changed. Initially I had planned to create a work that was more aligned with culture and history, but over time, as a result of other explorations that I have been dabbling in recently, my final sketches turned out to be more abstract representations of identity and personal experiences. 

Concepts Covered

In my final sketches, I have used values, variables, debugging, random values, functions, logic, and loops. I chose to use these as I think the employing values, variables, and debugging are inevitable in creating any sketch. But random values were useful to me particularly in Sketch 3, wherein I created radial gradients. By randomising the start colour of the gradient, I was able to ensure that each orb is a different radial gradient rather than having them all look completely uniform. Additionally, in-built p5.js functions such as mousePressed(), mouseReleased(), and keyPressed(), were helpful to me as they allowed me to incorporate a number of interactive elements to my patterns, but also writing my own functions such as provideX() and provideRad() in Pattern 1 allowed me to randomise position and radius attributes of my ellipses, but also “escape” the looping of the draw function and set a single value for the two attributes. I think logic and loops go hand in hand and were especially useful to me in Pattern 3 as I made use of while loops, nested for loops, as well as a number of if and else if statements to validate user input and decide further actions. Logic was also essential in Pattern 2 in order to ensure that the illusion of expansion and contraction functioned appropriately.

Biggest Bug

One of the biggest bugs I fixed in creating these sketches was in the below section in Pattern 3:

This section was quite complicated for me as the first two for loops set up the grid of coloured orbs. But following this, I wanted the orbs to be covered in black ellipses one by one rather than all at once like how the coloured orbs appeared. So I had to figure out a way to de/reconstruct the two for loops into if statements so that I could use the looping of the draw function itself to turn each of the orbs black. It took quite some trial and error as I found the logic a little difficult to understand at first, but using counters proved to be a handy solution as it greatly simplified the process of solving this.

Further Development

If I had to develop this project further, with a little more time on my hands to experiment with p5.js there are a number of changes I would be very excited to make! For one, I would like to add sound to the sketches. Pattern 2 in particular would be greatly enhanced with the use of sound as I had planned to add the sound effect of a heartbeat to better enunciate the change in frame rate, however I was unable to get the library to work properly on my browser so I had to forfeit this aspect of the sketch for the time being. In addition I would also like to experiment with creating sketches for mobile devices as while I was browsing the p5.js reference page I found a number of interactive elements such as shaking a device and rotating a screen that could yield very interesting results in terms of creating patterns. Finally, I would also like to experiment with three-dimensional shapes and transformations in the future.