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