THE DREAM GALLERYđź’
P5.js Coding, Javascript, Photoshop, Animation (2022)
Horror 2d game created based on my actual dreams. It’s about escaping the gallery by unraveling the clues.
INTRO
The dream gallery is a short horror side scroller game made with p5.js coding language, created based on my actual dreams. The main stage of this game is a house, a “dream gallery”. This gallery is filled with mysterious rooms decorated with scenes I dreamed of in the past. You or the users become this white character trying to escape the gallery by unraveling the clues.
IDEAS
“Every one of us has a story, a narrative that we either tell to ourselves or others, about who we are. This story can reveal a lot about our interests, values, and history.”
For the Autobiographical Game Project, I designed and coded a game that tells an aspect of my own story, mainly about my dreams.
Dreams are magical and mysterious. I always get amazed by the superb storytelling I dreamt of in the middle of the night. Sometimes, it’s about the other side of the universe I never thought about, or a life nothing different from my real life.
How can I dream about something I don’t know and acknowledge? Am I’m creating something with my creativity in my dream?
Not only how amazing stories were created in my dream, it affects me in real life (sometimes believe I should be a writer and release some of my dreams in novels haha). According to my roommates, I do a lot of sleep-talking and sleep-walking around 3 am to 4 am regarding what I dream of it. Since I went through these unforgettable experiences, I started to write a Dream Log every morning to remember the scenes, stories, colors, smells, characters, and emotions.
Therefore, I designed a gallery house filled with mysterious rooms decorated with scenes I dreamed of in the past and the entire process of this game is to escape this dream gallery that represents an effort to escape from a nightmare.
HOW I BUILT IT
The overall process took me two main steps
: Programming and Visuals
1. CODE
I mainly used P5.js, a JavaScript library for creative coding, to code this game. To break the scene by scene, each scene was numbered in functions by using the JavaScript Switch Statement.
coding video
I first started by creating a gray box version to rehearse how everything works and then, imported real visual images.
Graybox Versions
![]()
With actual scene
ART
The ideas began by reviving my memories of dreams and sketching briefly what they looked like. I mainly used photoshop to design all the scenes, characters, and items to look like pixel art which is excellent to present an old video game vibe.
Scenes
Gifs
Items
Character
