Coder Social home page Coder Social logo

sound_project's Introduction

Project Name: Do you hear the birds chirping?

Project Description: What is the project, what is the overall concept and theme, and what kind of experience you were striving to create. From the get-go, our team wanted to tell a horror story through sound. Because the medium for storying telling was limited to sound and several website interactivities, horror seemed like the genre that would bring the most impact to our audiences. The concept of our story is based on the birds at NYU Abu Dhabi’s campus. At the center of the campus is an order of palm trees where the chirping of birds is always heard throughout the day. It is so vibrant that there is a conspiracy on campus that there are speakers in the trees to fake the chirping. We wanted to work off this conspiracy theory. Instead of the chirping of birds, we thought it might be scary to pitch the constant chirping as a sleeping monster underneath the campus. Overall, we wanted the audience to feel a constant sense of eerieness. When the story begins, there is a calming old man introducing the campus. The audience later learns that he is the father of the monsters, and we expect an unsettling atmosphere to arise from that transition.

Process: How did you go about implementing the concept. Our team created a clear division of roles from the start. Nathan first drafted the script, including the possible sounds that will be implemented at each stage of the story. Alex was fully in charge of the sounds recording and production, with Nathan assisting as the voice of the narrator and Avani helping with certain recordings. The design of the website was mainly attributed to Avani and Aruzhan. Soundscape-wise, Alex started by thinking about the ambiance for each section of the story. These sounds might include chirping, water dripping, basement echos, et. Cetera. Then he moved on to adding specific noises for each action or item, such as the meow, music, footsteps, and monsters. Once the final timeline for the story and set, he recorded the dialogue and Nathan sent in his narration. Finally, he recorded some other miscellaneous sounds that could not be found online. In terms of technique, the howl of the monster was created by stacking three or four monster sound effects together. Audio panning was done to sound and dialogue from all directions, and reverb was applied to make it more immersive in certain environments. For the website, Avani and Aruzhan thought it would match the soundscape the best if it matched the creepy atmosphere of the story. They decided to keep the website minimal with texts of the narration that sets the story and added glitch effect to it. Moreover, they added a water drop to coordinate with the water dripping sound. Another important the feature of the website is the flashlight effect. The entire website is clouded with darkness and the user has to look around with their cursor to explore the space where the story is happening. Apart from that, they synced different sections of the website to the audio that starts to play when the user clicks on the bird on the first page. We used dark colors, eerie fonts, and color inverted images to build an atmosphere that aligns with the story. We styled the cursor to emulate a flashlight through CSS & JS in order to build suspense and draw the user in as a participant of the story. For instance, the user is able to look around the basement while the characters in the story do the same. Since the user needs to interact with the website for the audio to play, they can use their cursor to look around the title page and find the “Click on the bird to start” text. Because our piece is a story, we decided to build a simple website to prevent distracting the audience from the sounds. Each section of the audio corresponds to a particular panel (text, animation, or image), which serves to intensify the audio story’s effect. CSS glitch animation was applied to text panels to add a creepy feel to the website. We wanted the user to go through the website at a particular speed that corresponds to the audio file. As such, we needed to have more control of the user’s experience. In Javascript, we used currentTime and scrollIntoView to set up automatic scrolling that is tied to playback time.

Reflection/Evaluation: This should bookend the initial concept and talk about whether your expectations and goals were met in the process of building the final working version. Reflecting on the end product, our team is very happy with how it turned out. The soundscape was very well done, the storytelling fluid but with eerie cadence. The website also complements the story well, with visually stimulating interactive elements that accent the story. An aspect that we found to be somewhat challenging is controlling the user experience/interaction. Since the audio file is central to the website, we needed the user to see/interact with certain elements at specific points in the audio. We thought about dividing the audio into chunks, but later discarded this idea due to possible mismatches/inconsistencies. But then we found an effective way to control the scrolling through Javascript as discussed previously. This was a learning experience for us, as we realized that depending on the website’s nature or goals, sometimes the user needs to get full freedom or, conversely, a predetermined “path”. If we had more time, we could also play more with the story and develop something similar to a “choose your own adventure”, but with sounds.

sound_project's People

Contributors

ava-creates avatar aruzhan-zhakaibekova avatar alexkocodes avatar nathan213 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.