Intro to Computational Media
Sound
Pixel 1
-redCanvas
- Make a 100x100 canvas completely read (red?) by only using stroke() and point() (No funny business with strokeWeight())
I did this in function setup(), and the alpha value is not 255.
So I tried to put the for loop to function draw(), it worked.
But I don’t know why.
code:
function setup() {
createCanvas(100, 100);
}
function draw(){
for (let x = 0; x < 100; x++){
for (let y = 0; y < 100; y++){
point(x,y);
stroke('red');
}
}
}
[i] = (x + y * width) * 4
%: modulo
When to use %:
• Parity check: n % 2 == 0 (even), n % 2 == 1 (odd)
• Looping/grouping: do something every 5th element → i % 5 == 0
• Periodic patterns: grids, stripes, checkerboards, dot matrices (like rule based pixel sampling)
• Circular indexing/wrapping: when arrays or angles exceed bounds, return to start → index = (index + 1) % length
• Time/beat: trigger every N frames/seconds → frameCount % N == 0
• Color/pattern layering: select different colors or strokes based on coordinate modulo values
&&: logic AND:
- true && true → true
- true && false → false
- false && anything → false
Key Words:
non-linear, touch,
mirror
✦ concept
This project began from an interest in the boundary between image and body.When we see ourselves through a camera, the surface of the screen becomes a kind of mirror—reflective, but untouchable. I wanted to break that distance, to make a visual system that can feel our presence, not just show it.
“Unlinear Touch” explores what happens when vision becomes tactile.
The hand does not move linearly across a surface—it drifts, trembles, leaves traces that slowly fade. The pixels respond, breathing like a second skin.
✦ process
I built this piece in p5.js using ml5’s handPose model.The webcam captures the live video feed. Each frame is reduced into large pixel blocks—an intentionally fragmented surface. The code then tracks the palm center through five hand landmarks (wrist and four MCP points).
Wherever the hand moves, it reveals a higher-resolution region of the image, softly blended with a smoothstep feather function.
At first, the entire background was black, and the revealed area appeared as a clear window. Later, I realized I wanted the rest of the world to remain visible—the touch should not erase, but coexist. Replacing the dark overlay with an erase-based trail gave me the translucent fading I wanted: every movement leaves a brief echo, like breathing against glass.
Then I added support for two hands. Each palm draws its own circular field of clarity; when they overlap, the image pulses more vividly, as if two reflections were touching from opposite sides of a screen.
✦ reflection
What began as a simple hand-tracking test turned into a meditation on contact.The camera sees us, but never touches us—until now.
“Unlinear Touch” transforms the act of looking into an act of touching, a space where body, light, and reflection blur together.
Maybe touch doesn’t have to follow time.
Maybe it’s something that unfolds in loops—an unlinear moment that keeps returning, like a pixel remembering where the hand once was.
Hit the rat
the triplet notes will only play when you hit the rat.
So, hit the rat!
ideation process:
At first, I generated random rhythms. Every time I clicked the mouse, it started a new random rhythm. But it was too vague to tell if it was “new” after I clicked, because there was always a huge difference between two random notes, it felt way too random.
So, I decided to add an audio cue before generating a new rhythm. That led to the question: which sound should I use?
Then I realized the interaction is quite similar to the game Whack-a-Mole. I searched for an image of a mole and a hammer, and I looked for the sound from a popular meme -
after doing this, I wanted to make it more interesting, so I changed the picture to a rat and made it play random triplet notes instead of random rhythms all the time.