We have all developed personal relationships with our rooms during the COVID-19 pandemic. During quarantine periods, we spent most, if not all, of our time in our rooms, thinking, moving and feeling different things in our personal space. Personally, my room became a safe haven for me, because I knew that no matter what happened, whether I was fearful of the pandemic, or experiencing social anxiety, I could always go back to my room and keep myself company. As I spent more time in my room, my mind started to divide it up into parts – holons. Each section of my room evoked different emotions within me. For my final project, I wanted to capture this feeling, as I believe that we can all relate to this, especially because of the pandemic.
What: ‘My room, my haven’ is a project that highlights how each part of my room makes me feel. It combines visuals and sounds together to make one interactive piece. I divided my room into four main sections: bedroom section, kitchen, cosmetics section and workspace. Each section has an accompanying visual and sound that is triggered once I move within the section. The sounds become louder if I start to move more in each section.
How: I used frame differencing, shaders and TidalCycles to implement this project. I browsed on shadertoy and chose four shaders that I thought represented each section of my room nicely, and made appropriate adjustments to the shaders on Atom. After this, I combined the four shaders into one shader file and used ‘if else’ statements to place each shader on an appropriate part of the screen. I also included an extra ‘else’ statement at the end to make sure that the unused parts of the screen would just be the webcam. Next, I used frame differencing in the sketch.js file to detect movement of pixels in specific locations where the shaders were placed. If the movement in a specific section was greater than a threshold chosen by the user, then a boolean will equal true, and this would be sent as a uniform value to the fragment shader file. In this file, if this boolean is true, then the shader will turn on. I also used the function setTimeout() to set a timer of 1 second, so the shader turns on for only one second unless there is more movement in the section. I also used OSC to send values from the sketch.js to the TidalCycles file containing the sound, so that I could control sound based on my movement.
Evaluation: I really enjoyed working on my final project! I learnt a lot by coding and experimenting with different shaders and sounds with TidalCycles. I am very satisfied with my final project because it fulfils my original vision of what I wanted it to be. It was very difficult for me port the first shader from shadertoy, because it required version 300 of glsl. But after fixing all these errors, I got the hang of it. The part I also found difficult was using frame differencing to trigger each section of the screen, but after receiving help from my Professor, I was able to complete this. Overall, I believe my final project was successful, and I look forward to sharing my work with the rest of my class!
Here’s a recording of me ‘performing’ my final project in my room: