https://editor.p5js.org/Siming2024/sketches/IrLdqc2ap

Screen Recording 2024-11-06 at 11.37.39 PM.mov

Idea

This mini project is inspired by Noh theatre. One of the main characters in Noh is the "Crazy Woman" (狂女)—a woman who transforms into a demon due to love and hate. The actor wears a normal woman's mask at the beginning of the story, and in the final scene, they switches to a demon mask. I want to use computational media to reveal the gradual "transition" that the audience might not be able to see in a live Noh performance.

The transition unfolds gradually. Initially, we see a clear image of a young woman. As time progresses, the image blurs and pixelates, slowly blending with pixels from the demon image until the demon's image fully emerges. This transition has a soft, fluid quality. The interactive element invites viewers to influence the transition using their mouse.

Process Breakdown

1. Upload two mask images to serve as the starting and ending points of the transition.
2. Create a water wave effect:

• Variables and Time: Define "progress" and "pixelSize" variables, linking them to "mouseX" and "frameCount" (time) using the map function. Generate pixel points one by one using a loop. As progress and pixelSize change over time, the image gains an animated effect. The sin() function helps create a random, natural effect.

https://www.youtube.com/watch?v=vmhRlDyPHMQ&list=PLwUlLzAS3RYow0T9ZXB0IomwB-DyBRTfm

• Color: Blend colors as progress changes. As progress approaches 1, the color shifts closer to the dark mask.

• Transparency: Overlap the two mask images by adjusting transparency. Set the transparency of each pixel block using "alpha" and bind it with the noise function to create a random, irregular effect.

• Pixel Shape: Modify using the "pixelSize" variable.

1. The transition progresses over time but is also triggered by mouse interaction. Add hint text to invite interaction.

Picture credit