visualizer

4 years ago · 49c7923528
parent 904c562d8b
commit 49c7923528
2 changed files with 26 additions and 0 deletions
--- a/12/index_test.html
+++ b/12/index_test.html
@ -9,6 +9,10 @@
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto Mono">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
+  <script src="sketch.js" type="text/javascript"></script>
    </head>
    <body>
      <div class="back"><a href="https://issue.xpub.nl/"> ↰ Main Page </a></div>
--- a/12/sketch.js
+++ b/12/sketch.js
@ -0,0 +1,22 @@
+let mic, fft;
+
+function setup() {
+  createCanvas(710, 400);
+  noFill();
+
+  mic = new p5.AudioIn();
+  mic.start();
+  fft = new p5.FFT();
+  fft.setInput(mic);
+}
+
+function draw() {
+  background(200);
+
+  let spectrum = fft.analyze();
+  beginShape();
+  for (i = 0; i < spectrum.length; i++) {
+    vertex(i, map(spectrum[i], 0, 255, height, 0));
+  }
+  endShape();
+}