b2io · zachcd · Aug 26, 2020 · Aug 26, 2020 · Aug 26, 2020 · Aug 26, 2020
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width" />
     <title>BaseTwo EasterEgg</title>
     <script src="node_modules/p5/lib/p5.js" type="text/javascript"></script>
+    <script
+      src="node_modules/p5/lib/addons/p5.sound.js"
+      type="text/javascript"
+    ></script>
     <style>
       body {
         background: #232323;
@@ -28,6 +32,7 @@
   <body>
     <main id="main"></main>
     <script src="src/Circle.js" type="module"></script>
+    <script src="src/Sound.js" type="module"></script>
     <script src="sketch.js" type="module"></script>
   </body>
 </html>
diff --git a/sketch.js b/sketch.js
@@ -1,15 +1,49 @@
-import Circle from './src/Circle.js'
+import Circle from "./src/Circle.js";
+import B2Sound from "./src/Sound.js";
+
+function isInBounds(mouse, circle) {
+  const { position, size } = circle;
+  const { mouseX, mouseY } = mouse;
+
+  return dist(mouseX, mouseY, position.x, position.y) < size;
+}
 
 let sphereA;
+let sound;
+let canvas;
+
+let mouseHeldInterval = 500; // ms
+let mouseHeldCount = 0;
+let millisLastPlayed = null;
+
+function resetMouseTimer() {
+  millisLastPlayed = null;
+  mouseHeldCount = 0;
+}
 
 function setup() {
-  createCanvas(900, 600);
-  sphereA = new Circle(createVector(width/2, height/2))
+  canvas = createCanvas(900, 600);
+  sphereA = new Circle(createVector(width / 2, height / 2));
+  sound = new B2Sound();
 }
 window.setup = setup;
 
 function draw() {
   background(0);
   sphereA.run();
+
+  if (mouseIsPressed && isInBounds({ mouseX, mouseY }, sphereA)) {
+    if (!millisLastPlayed || millis() >= millisLastPlayed + mouseHeldInterval) {
+      millisLastPlayed = millis();
+      sound.play(mouseHeldCount);
+      mouseHeldCount += 1;
+    }
+  }
 }
 window.draw = draw;
+
+function mouseReleased() {
+  sound.stop();
+  resetMouseTimer();
+}
+window.mouseReleased = mouseReleased;
diff --git a/src/Circle.js b/src/Circle.js
@@ -1,27 +1,23 @@
 export default class Circle {
-  constructor (position) {
+  constructor(position) {
     this.acceleration = createVector(0, 0.05);
     this.velocity = createVector(random(-1, 1), random(-1, 0));
     this.position = position.copy();
-    this.size = 10;
+    this.size = 30;
     // TODO: Add Properties for Modifying Color
   }
 
-  run () {
+  run() {
     this.update();
     this.display();
   }
 
-  update () {
+  update() {
     // TODO: Animation properties happen here (e.g. sets next state)
   }
 
-  display () {
+  display() {
     // Rendering happens here
-    circle(
-      this.position.x,
-      this.position.y,
-      this.size * 2
-    );
+    circle(this.position.x, this.position.y, this.size * 2);
   }
 }
diff --git a/src/sound.js b/src/sound.js
@@ -0,0 +1,41 @@
+const notesToFreq = {
+  G: 49,
+  A: 55,
+  B: 61.74,
+  D: 36.71,
+  E: 41.2,
+  C: 32.7,
+};
+
+const pitches = ["G", "A", "B", "D", "E", "G", "C"]; // G Maj Pentatonic
+const octaves = [2, 3, 4];
+const velocityIncrement = 0.05;
+
+export default class B2Sound {
+  constructor() {
+    this.sound = new p5.PolySynth(undefined, 12);
+  }
+
+  play(countHeld) {
+    userStartAudio();
+
+    // this.sound.amp(amp);
+    // this.sound.freq(120 + (200 * freq) / 800); //trying to get it to stick around an octave
+    // this.sound.start();
+
+    const pitch = pitches[countHeld % pitches.length];
+    const octave = octaves[countHeld % octaves.length];
+    const note = notesToFreq[pitch] * octave;
+    const velocity = Math.min(velocityIncrement * (1 + countHeld), 1);
+
+    if (countHeld > 30) {
+      this.sound.noteRelease(); // Fix sounds glitching eventually
+    }
+
+    this.sound.noteAttack(note, velocity);
+  }
+
+  stop() {
+    this.sound.noteRelease();
+  }
+}