presented version

hannahilea · May 9, 2024 · 6d75554 · 6d75554
1 parent 2d3e5b8
commit 6d75554
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/projects/flock-chorus/index.html b/projects/flock-chorus/index.html
@@ -4,9 +4,8 @@
 <head>
   <title>Sketch: Flock chorus</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>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-  <!-- <script type="module" src="http://unpkg.com/tone"></script> -->
+  <script src="https://unpkg.com/tone"></script>
   <script>
     var GUI = lil.GUI;
   </script>
@@ -20,6 +19,19 @@
     }
 
   </style>
+  <script>
+    function playNote() {
+      // create a synth
+      const synth = new Tone.Synth().toDestination();
+      synth.volume.value = -12;
+      // const panner = new Tone.Panner(-1).toDestination();
+      // const osc = new Tone.Oscillator(100).connect(panner).start();
+      // play a note from that synth
+      // synth.triggerAttackRelease("C4", "8n"); //.chain(panner);
+      synth.triggerAttack("C4");
+      synth.setNote(440);
+    }
+  </script>
 </head>
 
 <body>
@@ -31,13 +43,11 @@ <h4><a href="../..">@hannahilea</a> > <a href="../../projects">projects</a> > Sk
   </nav>
   <details>
     <summary>Details</summary>
-    <!-- <p>A creative coding excercise (prompt: <i>TODO</i>), co-created with <a
-        href="https://TODO.github.io/">TODO</a>
-      while at the <a href="www.recurse.com">Recurse Center</a></p> -->
       <p>Built on top of the <a href="https://p5js.org/examples/simulate-flocking.html">p5 flocking demo</a>.</p>
     <p><i>Usage:</i> Drag on screen to loose flocks of birds. Make sure your computer sound is on. May not yet work on mobile.</p>
+
   </details>
-
+  <button onclick="playNote()">Test sound!</button>
   <script src="./sketch.js"></script>
 
 </body>

diff --git a/projects/flock-chorus/sketch.js b/projects/flock-chorus/sketch.js
@@ -1,31 +1,35 @@
 // Built off of p5 flocking demo sketch https://p5js.org/examples/simulate-flocking.html
-
+console.log("Access to tone module?", Tone)
 let flock;
 
 const params = {
   worldWraps: false,
-  maxspeed: 2,
+  maxspeed: .5, //2,
   maxforce: 0.05, // Maximum steering force
   radius: 3,
+  targetFreqHz: 440,
+  maxStartOffsetHz: 100,
 };
 
 const gui = new GUI();
 gui.add(params, 'worldWraps').name("Wrap world");
 const guiFolder = gui.addFolder( 'Settings for spawned boids' );
+guiFolder.add(params, 'targetFreqHz', 27, 2350, 5).name("Target freq (Hz)");
+guiFolder.add(params, 'maxStartOffsetHz', 0, 100, 1);
 guiFolder.add(params, 'maxspeed', 0, 8, .5).name("Max speed");
 guiFolder.add(params, 'maxforce', 0, .1, .01).name("Max steering force");
 guiFolder.add(params, 'radius', .1, 10, .3).name("Size");
 
 function setup() {
   createCanvas(windowWidth, windowHeight)
-  // Tone.start();
+  Tone.start();
 
   flock = new Flock();
   // Add an initial set of boids into the system
-  for (let i = 0; i < 100; i++) {
-    let b = new Boid(width / 2, height / 2);
-    flock.addBoid(b);
-  }
+  // for (let i = 0; i < 100; i++) {
+  //   let b = new Boid(width / 2, height / 2);
+  //   flock.addBoid(b);
+  // }
 }
 
 function windowResized() {
@@ -34,14 +38,14 @@ function windowResized() {
 
 function draw() {
   // https://stackoverflow.com/questions/55026293/google-chrome-javascript-issue-in-getting-user-audio-the-audiocontext-was-not
-  getAudioContext().resume();
+  // getAudioContext().resume();
 
   background(51);
   flock.run();
 }
 
 // Add a new boid into the System
-function mouseDragged() {
+function mouseClicked() {
   flock.addBoid(new Boid(mouseX, mouseY));
 }
 
@@ -87,7 +91,11 @@ function Boid(x, y) {
   this.r = params.radius;
   this.maxspeed = params.maxspeed;    // Maximum speed
   this.maxforce = params.maxforce;    // Maximum steering force
-  // this.synth = new Tone.Synth().toDestination();
+  this.targetFreqHz = params.targetFreqHz; 
+  this.synth = new Tone.PolySynth().toDestination();
+  this.synth.volume.value = -12
+  this.currentFreqHz = this.targetFreqHz + params.maxStartOffsetHz; //TODO: allow negative, randomize idff
+  this.synth.triggerAttack(this.currentFreqHz)
 }
 
 Boid.prototype.run = function (boids) {
@@ -187,6 +195,14 @@ Boid.prototype.separate = function (boids) {
   // Average -- divide by how many
   if (count > 0) {
     steer.div(count);
+    // console.log(count,this.currentFreqHz, this.targetFreqHz)
+    if (this.currentFreqHz > this.targetFreqHz) {
+      this.currentFreqHz = this.currentFreqHz - 1;
+      // this.synth.triggerRelease()
+      this.synth.triggerAttack(this.currentFreqHz, Tone.now())
+      this.synth.releaseAll()
+      console.log("OK")
+    }
   }
 
   // As long as the vector is greater than 0
@@ -199,7 +215,6 @@ Boid.prototype.separate = function (boids) {
 
     // Play collision sound! 
     // console.log(this, "ping", steer.mag())
-    // this.synth.triggerAttackRelease("C4", "8n")
   }
 
   return steer;

diff --git a/projects/index.html b/projects/index.html
@@ -58,11 +58,11 @@ <h2 id="virtual-gallery">Virtual Gallery</h2>
       One-off creative coding projects, often small and interactive.
       <ul>
         <!-- Add new project here -->
-        <li><a href="./flock-chorus">
+        <!-- <li><a href="./flock-chorus">
             Flock chorus
           </a>
           <p>TODO-description</p>
-        </li>
+        </li> -->
         <li><a href="https://github.com/hannahilea/cat-friend-chrome-extension">
             Chrome extension: Cat Friend!
           </a>