Trapped
The following graphics based on creative coding using p5.js, visually show the concept of lucid dreaming. The feeling of being trapped in a dream and unable to wake up has been shown through various click-through graphics, that turned out to be a mini-game. It represents the frustration of being unable to get up, or in this case, get out of the screen, unless and until a cue(in this case, a door on the bottom left)
is available. Missing the cue will make you go all over again until you find the door again.
Software and Languages Used—Visual Studio Code, p5.js, openprocessing.org and Procreate Categories—Motion Graphics, Creative Coding, Coding Graphics, Website Design, Mini-Game Design, Poster Design, and Maze/Model DesignTypeface Used—Sligoil Micro from Velvetyne TypeProject Completion—July 2022
Clickable/Playable Link:
The project and its code can also be found on: openprocessing.org
Concept:
Based on the concept of Lucid Dreaming, my idea developed from a dream that I once had. “In this dream, I was in my room, but the ceiling was different. When I opened the door of my room, I found myself in a different place. I tried going back to sleep but was awakened in the dream now in another place. It went on for a few times till I realized I was in a dream and that I was trapped. To gain a sense of reality, I tried moving and making sound in real life. I also tried calling my husband, but nothing worked. No words came out of my mouth. The only sense of reality that I had was that I could hear the NBA news that my husband was watching in real life, in my dream. Then I woke up in reality only when my husband opened the door in real life, and as soon as I woke up I checked the ceiling to make sure I was actually back in reality.” Finding this intriguing and scary at the same time, I thought of using this as my base idea for creative coding using p5.js for the very first time.
This experimental project was completed with the help of Open Source codes used as a reference from the website: openprocessing.org. In the beginning, I roughly sketched out my idea and created a gif to visualize my concept visually. Later, I researched similar visuals for reference to start coding my gif. After finding a few good references, I started coding, my design. With the help of my husband-Ejaz Veljee, and my instructor-Vera van de Seyp, I was finally able to create a game that generates an experience of being trapped in a portal.
This game starts with giving a warning message, “PROCEED WITH CAUTION!!! It’s a trap!!!” It uses mouse clicks and movement to get to the last stage where there will appear various rooms as you use arrows to move sideways or from top to bottom and vice versa. This is what is a trap. In order to get out of this trap, you will need to be conscious and keep looking for a door that might appear at any point in time, in the bottom-left corner of the screen, which is when you can click and the game will end.
Printed Collateral:
After creating the graphics, I thought of creating a maze along with 2 posters that will take you into my work. This maze does not have any specific entry or exit points, making it difficult for people to figure out a way to get in or out of themaze, just as in the case of Lucid Dreaming, where, if one doesn’t know how to do it intentionally, and might still end up in a lucid dream, things that feel so real but are just a dream, they might get scarred and feel trapped just like I was.
Thanks to Ejaz Veljee and Vera van de Seyp for helping me with the code.
Special credits to FelixTse, watabo_shi and Gabe - hurraaay, whose
references were used to develop my work.
Special credits to FelixTse, watabo_shi and Gabe - hurraaay, whose
references were used to develop my work.