The Online Choir project is a collaboration with Elisabeth Schifrin for the IMA’s Connections Class.
Concept:
Our idea was to create an endless internet choir that is seen rather than heard, through colorful visualizations. When users enter the site, a vocal melody plays continuously, visualized by a pulsating circle in the center of the webpage. Users are prompted to sing into their computer microphone, and their voice is depicted by a randomized color and brush texture that embarks on a circular path around the pulsating central circle. As users sing along to the melody, their pitch affects the visual qualities of their specific line. Together they create a visual composition that is constantly evolving. Rather than hearing other users’ voices, users see the distinct visualizations of the internet choir as lines circling around the center of the page. The result is a sort of moving mandala visualization.
The reason to not have users’ voices transmitted was partially a technical constraint (to avoid lags and using much more sophisticated coding) and partially a creative one — we wanted each user to feel more comfortable in expressing themselves (since many people are shy about singing).
Technologies Used:
We created a sketch in P5 JS. Using Visual Studio Code 3, we programmed the sketch using Socket.IO to enable multi-user interactions. We benefitted from the existing libraries in P5:
Work Process
We met several times, as well as worked asynchronously. During our initial in-person meeting, we focused on the work each of us was interested in, as well as the concepts we found interesting. Our alternative idea was to create a collaborative art project users simultaneously work on different quadrants/sections of the artwork, before it’s rotated — and they have to work on a new section.
Once we settled on the idea for the Online Choir, we outlined a plan as to divide the work:
- Set up a github/visual studio code 3 project
- Program p5 sketch *Server Side*
- To play a song
- Pulsate to the beat with it with different visuals
- Program P5 sketch *Client side*
- To grab microphone input
- Assign different pitches to different graphics
- Program to send data with sockets for each user
- Display the input (based on a pitch) to image
- Move project to glitch
Our idea was also to include original tracks — but knowing we had limited time, we decided to focus on the proof of concept first.
Unfortunately P5 doesn’t have a tool to identify the beats per minute (BPM) of a particular song. We decided to have the middle circle (the “core” of the sketch) to pulsate to the amplitude of the song playing. For the colors — we wanted to add some order. In Western music, pitches are often organized in a system called the chromatic scale, which includes 12 pitches:
- C (Do)
- C#/Db (Do sharp/Re flat)
- D (Re)
- D#/Eb (Re sharp/Mi flat)
- E (Mi)
- F (Fa)
- F#/Gb (Fa sharp/Sol flat)
- G (Sol)
- G#/Ab (Sol sharp/La flat)
- A (La)
- A#/Bb (La sharp/Ti flat)
- B (Ti)
For the colors assignment, we relied on ChatGPT research on synesthesia and common color associations with pitch —
- C – Red
- C#/Db – Crimson or dark red
- D – Orange
- D#/Eb – Brown or amber
- E – Yellow
- F – Green or light green
- F#/Gb – Dark green or olive
- G – Blue
- G#/Ab – Indigo or deep blue
- A – Violet or purple
- A#/Bb – Pink or magenta
- B – Grey or light purple
But since the individual results vary and we didn’t want to have too much replication, we created a mixture and also added primary colors (red, blue, and yellow), secondary colors (green, orange, and purple) and some tertiary colors.
We realized early on that the images generated in P5 were arresting on their own. The discoveries were sometimes a mixture of hard work and serendipity. As Elisabeth noted:
The decision not to have an alpha value of 1 as the background, meaning that the user paths get progressively grayer and fade into the background, made me feel like a designer who has to let go of a happy accident to fulfill the original vision. I liked the aesthetic of layered levels of vividness/brightness on the colored paths, but stuck to the original vision of a true black background and permanently maintained trails of colored ellipses.
Challenges
Aesthetic
-Getting the central pulsating circle to look explosive (momentum when growing from the center, slowing and fading as it expands, to visually match the feeling of a drum strike followed by resonance). It was solved by layering multiple ellipses on top of each other, with decreasing opacity as they get larger. Also used the random function to create more of an organic, chaotic feeling to the beat visualization
-Getting the pulsating central circle to draw and erase itself on every beat, to maintain transparency on the outer edges of the circle while maintaining the user path ellipses drawings on the canvas. It was solved by creating one black ellipse with varying opacity that keeps drawing over the central (beat visualization) ellipses being drawn to paint over the drawn ellipses with the same color (black) as the background
-Randomly assigning each user a different color palette (mapped to pitch notes), rather than having only one array of colors with which every user paints. It was solved by creating an array of arrays. one array is selected by calling a palette-selecting function called getRandomColor() in the setup function, which occurs when a user opens a page only once:
Technical
Individual Reflections – Elisabeth
– sockets… (debatable XD)
-I feel like I am getting closer to creating art with code that actually excites me aesthetically. I believe this is owed to a question Anastasia asked in our first brainstorming meeting: What kind of art do you like? So simple, but so untethered from my radar during these fast-paced projects using tools with which I don’t feel very adept. I was able to set creative goals in the realm of aesthetics, and Anastasia grounded us in the value of making art that is meaningful to the shared human experience (or however you phrased it), and these were our guiding lights throughout the process. Very grateful we began in this consideration of what actually matters to us, what genuinely speaks to us, and what we aspire towards as developing media artists! Thanks partnerrrr
-One issue about the process to reflect upon is that the parts of Module 2 that were put to the test in this project felt challenging, like we were doing a dance in a stranger’s shoes (I made up this proverb). In other words, we learned a lot of coding protocols, in which one thing needs this line of code and that thing has to talk to this thing in order to work, and this thing only appears if you run this mysterious line of code. These mysterious commands and keywords were explained to us in class, in the homework, and in review sessions, however they still feel foreign and a bit like an act of blind trust in a lot of powers behind an ASCII curtain. I see this as a recurring challenge for my learning style in the field of computer science. I am optimistic, though, that it will feel less shrouded in mystery and blind faith with more practice, as the concepts in Module One now feel. That’s why taking on a project is a helpful, albeit stressful, way to learn. It is also nice to have something we created that we can be proud of and that we can share with others.
-It is also a great feeling to have peers and instructors available and willing to help troubleshoot. This is a lesson to take into my professional life, my future creative endeavors, and pretty much all of life’s challenges—community, tapping into a support network, is not a sign of weakness, but rather a way to create cooler things through combined knowledge and skill.
-Every project builds a little more faith in my abilities and skills as a tech artist.
-Accomplishing the mapping of sound to visuals felt ambitious at the start, and I feel proud we managed to do this.
-CSS styling for cursor changes depending where the mouse is hovering is a cool addition to my CSS knowledge
-Doing a longer project, in that there are literally more lines of code forced me to write functions and create efficiency for legibility’s sake where I might have coded “the long way”, i.e. without functions, otherwise
-Sorting out the differences between server side code and client side code
-Working together: Glitch made it much easier to collaborate remotely, though the need to pass through the Github middleman felt like it created a larger chance for errors to occur in the transfer process. Collaborating also gave the lesson of writing clear code with helpful comments higher stakes, helping cultivate and solidify this coding habit.
-It also felt good to make something for other people that I enjoyed using myself.
Individual Reflections – Anastasia
Overall, I was proud of our team because we were able to very quickly, in our first meeting, to create a sound idea (evolved from our common love of music) that we were able to eventually develop into a minimally viable product. I hope we continue working on the project and actually get it working as it was intended.
The other issue was that our strengths and weaknesses were about the same, meaning that we could both ideate and program in P5, but when there was an issue with debugging the JS code, we both struggled.
Leave a Reply