Concept
For this assignment, as stated in the assignment prompt, I was inspired by Memo Akten’s Simple Harmonic Motion series, where he uses pure mathematical oscillation to create hypnotic, organic visuals. His work showed me that layering simple sine waves together can produce patterns of unexpected complexity and beauty. My concept, “Ripple Interference,” simulates what happens when you drop multiple stones into a still pond at the same time — each stone creates circular ripples, and where those ripples meet they either amplify or cancel each other out. This interference is pure Simple Harmonic Motion: every circle on the grid is oscillating up and down in size and color based on the sum of sine waves reaching it from multiple sources. The result is a constantly shifting, living pattern that feels organic despite being entirely mathematical.
SKETCH
Code Highlight
The section I’m most proud of is the wave interference calculation at the heart of the sketch:
let waveSum = 0;
for (let src of waveSources) {
let d = dist(x, y, src.x, src.y);
// Each source creates a radial sine wave
waveSum += sin(d * 0.04 * src.freq - time * src.speed);
}
// Normalize so value stays between -1 and 1
waveSum /= waveSources.length;
This is the core of everything. For each point in the grid, I measure the distance to every wave source, then plug that into a sine function. The distance replaces the linear progress variable from the example we did in class, turning the flat wave into a circular ripple spreading outward. When multiple sources combine, their values add together — this is wave superposition, the same principle that creates interference patterns in real physics. Dividing by the number of sources at the end keeps the value normalized between -1 and 1, which feeds cleanly into the same map(sin(…)) color technique from the class example. What I love about this is that a single line of math creates emergent visual complexity from something simple.
Milestones and Challenges
Milestones
- Extended the example we did in class from a single 1D wave row to a full 35×35 2D grid of oscillating circles
- Successfully implemented radial wave propagation (circular ripples instead of flat waves)
- Combined multiple wave sources using superposition to create interference patterns
- Retained and extended the class example’s sine-based color mapping into 2D
- Added interactive wave source placement with click
Challenge 1: Going from 1D to 2D
The example from class maps i linearly across the x-axis to get the wave position. When I first tried expanding this to a grid, I simply ran two nested loops and used the row number j for a second wave — but this just created a grid of identical horizontal waves stacked on top of each other, which looked flat and uninteresting. The breakthrough was switching from using the grid position directly to using the distance from a source point. Replacing width * progress with dist(x, y, src.x, src.y) inside the sin() function was what made the waves actually radiate outward like real ripples.
Challenge 2: Balancing the Interference Pattern
Once multiple wave sources were working, the interference looked chaotic — the colors and sizes were flickering too rapidly with no visual coherence. The problem was that summing multiple sine waves was pushing the total value well beyond -1 to 1, making the map() calls produce extreme values. Dividing waveSum by the number of sources normalized it back to a usable range. This small fix made a dramatic difference — the patterns became smooth, readable, and beautiful instead of noisy.
Reflection and Future Improvements
This assignment taught me how much complexity can emerge from a single mathematical operation repeated in different configurations. The sine function is doing all the real work here — everything else is just deciding where to sample it and what to do with the result. Memo Akten’s work resonates more deeply now because I understand how restraint in the tools you use forces you to be more creative with how you use them.
Below are some ideas I would implement in the future:
- Moving wave sources – Sources that drift slowly across the canvas, constantly changing the interference pattern
- Mouse-responsive waves – The mouse position acts as a live wave source that follows your cursor
- Frequency controls – Sliders to adjust each source’s frequency in real time
- Different grid shapes – Hexagonal or circular grids instead of square
- Sound integration – Map wave amplitude to audio frequency for a visual synthesizer