Merge pull request #14 from hannahilea/hr/add-html

Fix clicks over gui
hannahilea · May 10, 2024 · 8f257fa · 8f257fa
2 parents d2ad42e + 29bfc90
commit 8f257fa
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 28 deletions.
diff --git a/projects/flock-chorus/index.html b/projects/flock-chorus/index.html
@@ -7,15 +7,25 @@
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script src="https://unpkg.com/tone"></script>
   <script>
-    var GUI = lil.GUI;
+    const GUI = lil.GUI;
   </script>
   <link rel="stylesheet" type="text/css" href="../../css/main.css" />
   <style>
-    canvas {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 10;
+    #project-header {
+      margin: 1rem;
+    }
+
+    html,
+    body {
+      margin: 0;
+      height: 100%;
+      overflow: hidden
+    }
+
+    #gui_container{
+      position: fixed;
+      top: 0;
+      right: 0;
     }
 
   </style>
@@ -36,22 +46,29 @@
 </head>
 
 <body>
-  <nav class="navbar" role="navigation"></nav>
-  <div class="underline">
-    <h4><a href="../..">@hannahilea</a> > <a href="../../projects">projects</a> > Flock chorus
-    </h4>
+  <div id="project-header">
+    <div id="gui-container"></div>
+    <nav class="navbar" role="navigation"></nav>
+    <div class="underline">
+      <h4><a href="../..">@hannahilea</a> > <a href="../../projects">projects</a> > Flock chorus
+      </h4>
+    </div>
+    </nav>
+    <details>
+      <summary>Details</summary>
+      <p>Built for a web-based musical instrument hackathon while at the <a href="https://www.recurse.com">Recurse
+          Center</a>. Built on top of the <a href="https://p5js.org/examples/simulate-flocking.html">p5 flocking
+          demo</a>.
+      </p>
+      <p><i>Usage:</i> Click screen to spawn [boids](https://en.wikipedia.org/wiki/Boids). Make sure your computer sound
+        is on. (May not yet work on mobile.)</p>
+      <p><i>Warning:</i> If you add a gagillion boids, the page may get laggy or stop playing altogether. I'm pretty
+        sure this is a Tone.js limitation (well, a "my current usage of Tone.js" limitation, specifically!), and if you
+        have an idea of how to work around it, please let me know! In the meantime, simply refresh your screen to start
+        fresh (or un-toggle "wrap world" to let some of your flocks fly away).</p>
+      <button onclick="playNote()">Test sound!</button>
+    </details>
   </div>
-  </nav>
-  <details>
-    <summary>Details</summary>
-    <p>Built for a web-based musical instrument hackathon while at the <a href="https://www.recurse.com">Recurse
-        Center</a>. Built on top of the <a href="https://p5js.org/examples/simulate-flocking.html">p5 flocking demo</a>.
-    </p>
-    <p><i>Usage:</i> Click screen to spawn [boids](https://en.wikipedia.org/wiki/Boids). Make sure your computer sound is on. (May not yet work on mobile.)</p>
-    <p><i>Warning:</i> If you add a gagillion boids, the page may get laggy or stop playing altogether. I'm pretty sure this is a Tone.js limitation (well, a "my current usage of Tone.js" limitation, specifically!), and if you have an idea of how to work around it, please let me know! In the meantime, simply refresh your screen to start fresh (or un-toggle "wrap world" to let some of your flocks fly away).</p>
-    <button onclick="playNote()">Test sound!</button>
-  </details>
-
   <script src="./sketch.js"></script>
 
 </body>

diff --git a/projects/flock-chorus/sketch.js b/projects/flock-chorus/sketch.js
@@ -9,11 +9,13 @@ const params = {
   radius: 3,
   targetFreqHz: 440,
   maxStartOffsetHz: 100,
-  volume: -40,
+  volume: -Infinity, //-40,
   freqIncrement: .9,
 };
 
-const gui = new GUI().title("Parameters");
+const gui = new GUI( { autoPlace: true} ).title("Parameters");
+gui.domElement.id = 'gui';
+document.getElementById("gui-container").appendChild(gui.domElement);
 gui.add(params, 'worldWraps').name("Wrap world");
 const guiFolder = gui.addFolder('New boid spawn settings');
 guiFolder.add(params, 'targetFreqHz', 125, 2350, 5).name("Target pitch (Hz)");
@@ -26,14 +28,25 @@ guiFolder.add(params, 'maxStartOffsetHz', 0, 600, 50).name("Start pitch max offs
 // guiFolder.add(params, 'radius', .1, 10, .3).name("Size");
 // guiFolder.add(params, 'volume', -80, -12, 1).name("Volume");
 
+function calculateCanvasHeight() {
+  elem = document.getElementById("project-header");
+  return windowHeight - parseInt(elem.offsetHeight) - parseInt(elem.offsetTop)
+}
+
+function calculateCanvasYOffset() {
+  elem = document.getElementById("project-header");
+  return parseInt(elem.offsetHeight) + parseInt(elem.offsetTop)
+}
+
 function setup() {
-  createCanvas(windowWidth, windowHeight)
+  let canvas = createCanvas(windowWidth, calculateCanvasHeight())
+  canvas.mouseClicked(mouseClickedOnCanvas)
   Tone.start();
   flock = new Flock(); // Empty flock!
 }
 
 function windowResized() {
-  resizeCanvas(windowWidth, windowHeight);
+  resizeCanvas(windowWidth, calculateCanvasHeight());
 }
 
 function draw() {
@@ -50,12 +63,22 @@ function draw() {
 }
 
 // Add new boids into the System
-function mouseDragged() {
-  flock.addBoid(new Boid(mouseX, mouseY));
+function mouseDragged(event) {
+  let overCanvas = event.clientY > calculateCanvasYOffset();
+  let elem = document.getElementById("gui");
+  let guiY = (parseInt(elem.offsetHeight) + parseInt(elem.offsetTop));
+  let guiX = (parseInt(elem.offsetWidth) + parseInt(elem.offsetLeft));
+
+  // If not over the canvas, ignore
+  // If over the GUI, ignore 
+  if (event.clientY > guiY && event.clientX < guiX && overCanvas){
+    console.log("we did it, joe");
+    flock.addBoid(new Boid(mouseX, mouseY));
+  }  
 }
 
 // Add a new boid into the System
-function mouseClicked() {
+function mouseClickedOnCanvas() {
   flock.addBoid(new Boid(mouseX, mouseY));
 }