Concept
In this project, I aimed to create a mesmerizing visual display that responds dynamically to sound input using the p5.js library. The core concept revolves around simulating particles that mimic harmonic motion while being influenced by real-time audio levels detected through the microphone. This interplay of sound and visuals creates an engaging experience, reminiscent of a light show or a digital aurora, where each particle dances in response to the surrounding environment.
Highlights I’m Proud Of
class Particle { constructor(x, y) { this.x = x; this.y = y; this.angle = random(TWO_PI); this.length = random(10, 20); // Length of the trails this.timeOffset = random(TWO_PI); } update(vol) { let harmonicX = cos(this.angle) * 200 * sin(frameCount * 0.02 + this.timeOffset); // Horizontal oscillation let harmonicY = sin(this.angle * 2) * 200 * cos(frameCount * 0.03 + this.timeOffset); // Vertical oscillation // Update positions based on combined harmonic motion this.x += harmonicX * vol * 0.5; this.y += harmonicY * vol * 0.5; this.x += cos(this.angle) * vol * 100; this.y += sin(this.angle) * vol * 100; this.x = constrain(this.x, 0, width); this.y = constrain(this.y, 0, height); this.angle += 0.05; // Smooth rotation }
Embedded sketch
https://editor.p5js.org/mariamalkhoori/full/_9bo6lBl_
Edit Sketch:
https://editor.p5js.org/mariamalkhoori/sketches/_9bo6lBl_
Reflection and Ideas for Future Work
- Expanded Color Palette: Experiment with a broader range of colors or gradients, perhaps responding to different frequencies or sound levels for a richer visual output.
- More Complex Patterns: Investigate additional mathematical functions to define the particle movements, creating even more intricate and visually stunning animations.
Refrences
Simple Harmonic Motion #11 for Light at Blenheim Palace (2014)
Sound from my favourite band :3 — https://music.youtube.com/watch?v=CaMcDzvwL30&si=ZyQE7yoDhOCHxzFR