Project B｜CODE+[]

 

Part 1

Project Description:

Gender, fluid as it should be.

an audio project exploring gender stereotypes & fluidity 

p5js.

visual studio code

 

website:

https://chanel1130.github.io/iframe-example/

p5js codes:

https://editor.p5js.org/sf3972/sketches/Fpw0fPRtS

https://editor.p5js.org/sf3972/sketches/b3uuONxPb

 

Elevator Pitch

Gender stereotypes have been experienced more or less by every one of us from the parenting we received to the public medium. By clicking to reexperience these moments and listening to the appeals from students of NYUSH, you may get a fresh idea of the power of speaking out in the process of promoting the idea of gender fluidity.

 

Abstract

I’ve always cared about gender studies and the promotion of gender fluidity and I long to create an interactive artwork to raise people’s awareness of this topic. In the first half of the project, you may click to get AI-generated voices repeating gender stereotyping words such as “Boys don’t cry”, “Men are leaders”, and “Girls are fragile”. You probably won’t feel very comfortable when seeing the overlapping shaky circles with a combination of the cold AI voices, which is in an attempt to visualize our negative feelings when encountering stereotypes in our real life. As Gloria Steinem, an American feminist and journalist, once said, “We’ve begun to raise daughters more like sons, but few have the courage to raise our sons more like our daughters.” Specifically, I don’t want to make it a pure feminist thing as I do believe that a part of boys’ vulnerability and wish for beauty should also be recognized and understood. When women are liberating themselves, we ought to set men free from the chain defined by the social norms as well.

For the second half of the project, I didn’t complete it by myself, but with a bunch of friends and schoolmates together. I wandered on the campus, interviewing people about their ideas of gender stereotypes and fluidity. They shared their personal struggles to find their place in a society that seems to define gender in a narrow way and expressed their wish from their inner heart. I recorded their voices and inserted them into my project using p5js in the hope of reminding people of the power of conversation in breaking down gender stereotypes. The flowing pixels, the changing colors, and the way they meet and part freely, all represent my expression of the fluidity of gender. With our voices, appeals, and actions, we wouldn’t feel so constrained by our sexuality as we do in today’s society and may express our uniqueness more boldly.

 

 

Part 2 

1) Process: Design and Composition

Since my project contains storytelling, I wish that people will experience from a dark feeling to a rather bright one. Thus, contrast was what I looked for when I was constructing the composition of my project. For the first half of my project, I wanted to create an environment where people may find it tense. That is why I applied rotating rectangles that may change their sizes with the movement of the mouse as the background, used AI-generated sounds, and made the shapes shaky once in a while. They are mostly black and white to create a rather dark and negative feeling. While for the second half, I made it much more pleasant to look at. The music is soothing, and the flowing noise with changing colors gives people a sense of fluidity. The compromise that I made was that originally, I wanted to insert another p5js in between the two canvases, which was a text-based interactive screen. People may select the disorderly words and organize them into their own slogans like “Women should be leaders too” and “Boys can cry”. The reason that I didn’t include this one at the end was that I felt like the connection between this and the other two audio canvases was not that strong and may spread a sense of separation.  

2) Process: Technical 

Describe the technical development process of your project. Describe the technical challenges that you faced, solutions you found as well as compromises you had to make. 

What could have been implemented better and what changes you would make if you had the chance to do it all over again. What discoveries did you make along the way? Be as detailed and specific as you can.

For the first canvas, I uploaded the sounds, used an array for the moving shapes, and used the distance and map functions for the background rectangles. I originally created circles with blurred edges for this canvas, but I wanted to create something more dynamic. Thus, I referred to the Coding Train on YouTube and learned about how to use vertex to create irregular shapes and the principle behind was to create dots that constantly change their position slightly. I mostly learned about how to use Perlin noise to create flow fluids from Barney Codes on YouTube, which was combined with an array of particles and oscillation. In addition to that, I adopted the Boolean function to make the particles reappear on the canvas in a random position after they fade away. For the changing colors, I consulted Marcele, and she suggested that I define a variable first and inserted a random(color(variable)) into the mousePressed function, which changed the color of the noise each time the mouse was clicked.

When building the website, I consulted the LA Sonny about how to insert multiple p5js canvases into one web page and the problem that sometimes the screen disappeared. It turned out that the ways to upload sounds are different in p5js and vs code. After I changed the word sound into audio, the screen was able to appear. And I need to bear in mind that I have to add the folder name before the music name when coding them in HTML.

If I could redo the project, I would put more effort into the layout of my website. I feel like the user experience would be better if there were more interactive functions apart from the play music button.

3) Reflection and Future Development

Though the brainstorming process was rather harsh, this project was very fun, and I learned and reviewed a lot of p5js functions and knowledge about website building. One big suggestion from my peers on the presentation day was that I may build more connections between the audio and visuals. For instance, when the sound “Pink is a color for girls” comes out, the canvas can appear pink so that it matches the audio, which was a very thoughtful piece of advice and I would definitely think about it in my future projects. Apart from that, I enjoyed building storytelling in my project very much and hopefully, I would keep this style as well as add more interactive functions in the future.

 

Special Thanks to:

Marcele

Sonny

The Coding Train

https://www.youtube.com/watch?v=rX5p-QRP6R4

Barney Codes

https://www.youtube.com/watch?v=sZBfLgfsvSk