The UX of Yellow (2/2)

Nov. 4 - Nov. 11, 2021

Partners: Anya, Ava, Bala, Effy, Ella

Brief: Design an experience based on the characteristics of the colour yellow.

Research Methods: Creative Toolkit and Artefact Analysis

Based on our feedback from the previous week, we decided to table yellow and frustration for the time being and focus more on the molecular composition of yellow and how we could express this through a tangible experience.

The three keywords that we wanted to link were:

[sound] [wavelength] [yellow]

We then started thinking about how our eyes perceive different colors. We learned that each color has its own wavelength and frequency [1]. From there, we realized that there are many different ways to incorporate waves in design, such as using sound waves and light waves.

Colors and Wavelengths

Source: https://gunnar.com/maximizing-work-performance/visible-light-spectrum-chart/

Colors and Frequencies

Source: https://www.quora.com/What-is-the-frequency-of-white-light

We also considered how water absorbs color differently based on the vibrations of its H2O molecules [2]. From this, our initial idea was to project different shades of yellow and their corresponding frequencies onto water and play music with matching frequencies.

Source: http://www.webexhibits.org/causesofcolor/5B.html

Sound Waves of Yellow

We started thinking about filling a plexiglass with water, renting a projector, and then doing some programming to create corresponding pitches. However, the idea was beginning to feel too cluttered and we decided to pare it down to the area of our research that we wanted to explore most.

Eventually we wanted to explore the sound of yellow more. We thought about having a microphone where volunteers could speak or sing to reach the pitch of yellow. Or perhaps the different pitches would change the color of the projection.

Programming Pitches

To program the different sounds of yellow, we asked Delia from the Creative Technology Lab to help us correspond different hues of yellow to different pitches using p5.js. Using Sonic Pi and the p5 synth library, Delia helped us create a code that would respond based on the yellow image that we held up to the webcam. The program would recognize the hue through the webcam and play a sound based on the hue.

First, we wrote a code that would take the average of the RGB colors captured by the webcam when we clicked on a key. After that, we added in a PolySynth and mapped the range of values of yellow onto the range of synth sounds that we wanted to express. Polysynth works by producing sounds using MIDI numbers which are essentially digital interface sounds. These MIDI numbers can be correlated to actual key notes.

Delia Coming to the Rescue

Testing our Code

Body as Instrument

We later decided that we wanted to make this a full body experience. So, we bought a full body suit and painted it different shades of yellow, which allows the person wearing it to become something like a musical instrument of yellow.

The main ideas were:

1) The volunteer will put on the suit and move around in front of the camera

2) Then we will send the code to our classmates so that they can scan the suit with their phones and have their phones play the different pitches

Body as Instrument Sketches

Scanning the Body Suit with Phones

Presentation and Feedback

Our Intrepid Volunteer Ramya

Technical Difficulties

During the presentation, we experienced technical difficulties with a faulty webcam. It would have been prudent to make a recording of the program working smoothly beforehand in case things went wrong on the day of the presentation.

Staging

We also could have thought more about staging, such as how to better integrate the two sections of 1) the volunteer wearing a body suit and 2) everyone in class scanning their phones. The two could have been more thoughtfully combined.

Unexpected Results

We saw that several people in class started scanning their phones on various yellow objects in the room, not just on the body suit. This was an unexpected but spontaneous (and more exciting!) use of the program that we hadn't considered before.

Some other feedback from our classmates was that they appreciated that the phone was quite interactive. For example, it vibrated when playing the pitches. As the vibration was by chance rather than consciously designed, our group saw that we could expand our project further by thinking in terms of tactile experiences. The class also liked how they had the program on their own devices rather than just watching passively.

Mapping

The keyword from our feedback was mapping. More thought could have gone into mapping the color values to sound and we could have been more intentional with our decisions about sound. Why did we use electronic beats and not, as an example, the rustling of leaves or chirping of birds? This was helpful in terms of expanding our thinking beyond the digital sphere.

Reflections

Overall, I enjoyed The UX of Yellow quite a bit as it felt like our group really jived well. We reached a certain "flow" state once we had landed on our idea of the sound of yellow. With a strong concept as our foundation, everything else fell into place.

Bibliography

[1] Nassau, K. 'The Visible Spectrum', Britannica. Available at: https://www.britannica.com/science/color/The-visible-spectrum (Accessed: 4 November 2021).

[2] Douma, M. (2008) 'Why is Water Blue?', In Cause of Color. Available at: http://www.webexhibits.org/causesofcolor/5B.html (Accessed: 4 November 2021).

Crowley. (2017) 'Why does a yellow object turn white under a yellow light? Shouldn't it turn yellow instead?', Physics Stack Exchange. Available at: https://physics.stackexchange.com/questions/333025/why-does-a-yellow-object-turn-white-under-a-yellow-light-shouldnt-it-turn-yell (Accessed: 4 November 2021).

Ferreira, B. (2015) 'Behold the Ocular Harpsichord, the Laser Light Show of the 18th Century', Vice. Available at: https://www.vice.com/en/article/kb7qzn/behold-the-ocular-harpsichord-the-laser-light-show-of-the-18th-century (Accessed: 7 November 2021).

Previous Post

Next Post