For this week's project I wanted to look at sound in a 3D context. I wanted to create a sort of music room that would play through different audio.

I started it off by looking into WebGL and creating a box. The goal was to create a box that would feature a music video as a texture. I began by drawing the textures on the front, left and right faces of the box. When I did this all the audio started playing and was a little overwhelming!!

This made sense though as I was starting 3 audio files all at the same time. The goal now was to try and look into the 3D panner node that p5 provides by using the Web Audio functionality. After a few hours of playing with it to no avail I decided to go down a much simpler route and focus on 2 videos instead of 3.

With that in mind, I worked through using a Stereopanner and then mapped out the values for the left and right speaker. By facing the videos, the volume increases to its max while the volume of the video behind is set to 0. As then as you rotated around the Y axis the panning would match the position of the video.

This project presented a bunch of challenges.

  1. The Stereopanner math was tough to figure out and connect to the and so I resorted to doing a bunch of if statements that would check out the angle and then map it to the right stereo side.
  2. Putting the text on the brick walls was an interesting WEBGL challenge to try and orient it the way I wanted to. That is right on the walls of the room...and flipping it the correct way

Screen Shot 2021-11-16 at 9.37.18 PM.png

But finally after a bunch of work and some candy. I managed to get the system to work the way I wanted it to. It was a lot to try and figure out how to deal with the audioContext situation with regards to p5.

The link to my code can be found here