We are a creative agency
committed to making incredible digital products.
This project explores how environmental sounds shape the feeling of a place through an interactive soundscape. It focuses on beach sounds like waves, wind, birds, boats, and people. Users can press keys to add sounds, and simple visuals appear and fade. This lets different sounds layer together and create a personal experience of the beach.In the early stage, I built a basic static scene using p5.js, including the sky, ocean, and sand. I used shapes to create natural edges, then added movement by using a loop and a variable to control the waves. This made the waves move smoothly over time. I also improved the visuals with gradient colors and transparency, and added microphone interaction so the sound changes with user input. In the final stage, I combined all elements into one system. I added different sounds like people, wind, and birds, and used loops to make the scene feel more natural. I also added keyboard controls, so users can trigger sounds and create their own version of the environment.
Portfolio
This is the sketch of my first concept I set up the canvas size and used the basic drawing functions in p5.js to create the sky, ocean, and sand. To draw the irregular natural edges, such as waves and sand , I used beginShape() and vertex() to connect points and form polygons After creating the static background, I started to add movement to the environment. The draw() function in p5.js runs in a continuous loop. At the top of the code, we created a variable called waveOffset. Then, I started to add user interaction. I created an array called elements to store objects in the scene. I also wrote the first class, Boat, as a blueprint for the object. When the user presses the space key, the code creates a red boat based on this class and adds it to the array. In the final iteration stage, I combined all the design elements. I added new classes for people, wind, and birds. At the same time, I added the basic structure for audio triggers in the code. To make the environment feel more natural, I used loops. For example, when the user presses “1”, the code randomly creates 3 to 4 crowd marks instead of only one. I refined the visuals by using lerpColor() for gradient and transparent layers. I also used noStroke() to create a more polished look. I also added microphone interaction. For the wave animation, the harder the user blows, the louder the wave sound becomes. This is my final design, I pressed all my elements many times to present the overlapping visuals I think this overlapping design version is more clean from my explorations