-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from hannahilea/hr/p5
Add `Sketch: Sound ripples` project
- Loading branch information
Showing
5 changed files
with
139 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <title>Sketch: Sound ripples</title> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script> | ||
| <link rel="stylesheet" type="text/css" href="../../css/main.css" /> | ||
| <style> | ||
| canvas { | ||
| display: block; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 10; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <nav class="navbar" role="navigation"></nav> | ||
| <div class="underline"> | ||
| <h4><a href="../../index.html">@hannahilea</a> > <a href="../../projects.html">projects</a> > Sketch: Sound ripples | ||
| </h4> | ||
| </div> | ||
| </nav> | ||
| <details> | ||
| <summary>Details</summary> | ||
| <p><i>Provenance:</i> A creative coding excercise (prompt: <i>Particles, lots of them</i>), co-created with <a | ||
| href="https://hendersonreed.github.io/">Henderson Reed Hummel</a> | ||
| while at the <a href="www.recurse.com">Recurse Center</a></p> | ||
| <p><i>Usage:</i> When prompted, grant microphone access, then move your mouse around the screen while talking or | ||
| making noise.</p> | ||
| </details> | ||
| <script src="./sketch.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| // Co-created by hannahilea (https://hannahilea.github.io/) | ||
| // and hendersonreed (https://hendersonreed.github.io/) | ||
| // as a creative coding project while at the | ||
| // Recurse Center (www.recurse.com/) | ||
| // Original p5 sketch: https://editor.p5js.org/hannahilea/sketches/Vx6KrBw6- | ||
|
|
||
| let mic; | ||
| let livingParticles = []; | ||
|
|
||
| function setup() { | ||
| createCanvas(windowWidth, windowHeight) | ||
| colorMode(HSL, 1.0); | ||
|
|
||
| // Create an Audio input | ||
| mic = new p5.AudioIn(); | ||
|
|
||
| // start the Audio Input. | ||
| // By default, it does not .connect() (to the computer speakers) | ||
| mic.start(); | ||
| } | ||
|
|
||
| function windowResized() { | ||
| resizeCanvas(windowWidth, windowHeight); | ||
| } | ||
|
|
||
| function spawnParticles(volume) { | ||
| let numParticles = volume * 100; | ||
| for (let i = 0; i < numParticles; i++) { | ||
|
|
||
| // Different particle modes: | ||
| // Square: | ||
| // let particle = {x: mouseX, y: mouseY, energy: volume, dX: random(-1.0,1.0), dY: random(-1.0,1.0), life: 1.0}; | ||
|
|
||
| // Funky 1d diagonal lines | ||
| // let d = random(-1.0,1.0); | ||
| // let particle = {x: mouseX, y: mouseY, energy: volume, dX: d, dY: d, life: 1.0}; | ||
|
|
||
| // Funky x's | ||
| // let d = random(-1.0,1.0); | ||
| // let particle = {x: mouseX, y: mouseY, energy: volume, dX: random([-1,1]) * d, dY: random([-1,1]) * d, life: 1.0}; | ||
|
|
||
| // Circular rings! Like water drops | ||
| let d = random(0, 2 * PI); | ||
| let particle = { x: mouseX, y: mouseY, energy: volume, dX: random([-1, 1]) * cos(d), dY: random([-1, 1]) * sin(d), life: volume * 8 }; | ||
|
|
||
| // let d = random(0, 2*PI); | ||
| // let particle = {x: mouseX, y: mouseY, energy: volume, dX: random(0,1) * cos(d), dY: random(0,1) * sin(d), life: volume * 8}; | ||
|
|
||
| livingParticles.push(particle); | ||
| } | ||
| } | ||
|
|
||
| function draw() { | ||
| background("darkblue"); | ||
|
|
||
| // https://stackoverflow.com/questions/55026293/google-chrome-javascript-issue-in-getting-user-audio-the-audiocontext-was-not | ||
| getAudioContext().resume(); | ||
|
|
||
| // Get the overall volume (between 0 and 1.0) | ||
| let vol = mic.getLevel() * 4.0; | ||
| if (vol > 0.04) { | ||
| spawnParticles(vol); | ||
| } | ||
|
|
||
| if (true) { | ||
| livingParticles = livingParticles.filter((particle) => { | ||
| return particle.life > 0; | ||
| }); | ||
| } | ||
|
|
||
| livingParticles.forEach((particle) => { | ||
| fill(particle.energy, 0.75, 0.5); | ||
| noStroke(); | ||
| ellipse(particle.x + particle.dX, particle.y + particle.dY, particle.life * 5, particle.life * 5); | ||
| particle.x += particle.dX; | ||
| particle.y += particle.dY; | ||
| particle.life -= .005; | ||
| }); | ||
| } |