Clean up and comment out functions to help explain

vocoder/static/vocoder.js

@@ -5,59 +5,71 @@
 // https://developer.mozilla.org/en-US/docs/web/javascript/reference
 //
 
-// TODO: Read this from the environment so it can run propoerly
-// depending on whether it is in development or production mode
-var serverUrl = "http://localhost:5000";
+var serverUrl = "http://localhost:5000"; // TODO: read from environment
 var archiveUrl = serverUrl + "/add-to-archive/";
-
-var mic, recorder, soundFile;
+var microphone;
+var recorder;
+var recording;
 var recordingTimeout = 30000; // 30 seconds (in milliseconds)
-var shouldGenerateNewShape = false;
+var newSoundJustRecorded = false;
+var shapes = [];
+
+function doRecording() {
+  /**
+   * Starting recording.
+   **/
+  if (microphone.enabled) {
+    setTimeout(recorder.record(recording), recordingTimeout);
+  }
+}
+
+function doStopping() {
+  /**
+   * Stop recording a new recording.
+   **/
+  if (recorder.recording) {
+    recorder.stop();
+    newSoundJustRecorded = true;
+  }
+}
+
+function doPlaying() {
+  /**
+   * Play the recording.
+   **/
+  if (recording.isLoaded()) {
+    recording.play();
+  }
+}
+
+function doArchiving() {
+  /**
+   * Send the recording to the back-end.
+   **/
+  var soundBlob = recording.getBlob();
+
+  var httpRequestOptions = {
+    method: "POST",
+    body: new FormData().append("soundBlob", soundBlob),
+    headers: new Headers({ enctype: "multipart/form-data" })
+  };
+
+  httpDo(archiveUrl, httpRequestOptions); // TODO: add error handling and fix
+}
 
 function setupRecording() {
-  mic = new p5.AudioIn();
-  mic.start();
+  /**
+   * Setup logic for recording.
+   **/
+  microphone = new p5.AudioIn();
+  microphone.start();
 
   recorder = new p5.SoundRecorder();
-  recorder.setInput(mic);
+  recorder.setInput(microphone);
 
-  soundFile = new p5.SoundFile();
+  recording = new p5.SoundFile();
 
-  function doRecording() {
-    if (mic.enabled) {
-      setTimeout(recorder.record(soundFile), recordingTimeout);
-    }
-  }
-
-  function doStopping() {
-    if (recorder.recording) {
-      recorder.stop();
-      shouldGenerateNewShape = true;
-    }
-  }
-
-  function doPlaying() {
-    if (soundFile.isLoaded()) {
-      soundFile.play();
-    }
-  }
-
-  function doArchiving() {
-    var soundBlob = soundFile.getBlob();
-
-    var httpRequestOptions = {
-      method: "POST",
-      body: new FormData().append("soundBlob", soundBlob),
-      headers: new Headers({ enctype: "multipart/form-data" })
-    };
-
-    // TODO: do error handling when things fail
-    // TODO: this doesn't actually work right now
-    httpDo(archiveUrl, httpRequestOptions);
-  }
-
-  // TODO: we'll probably want something more glam than
-  // some default buttons but that's fine for experimenting
+  // TODO: buttons are just for experimenting ...
   recordButton = createButton("record");
   recordButton.position(10, 90);
   recordButton.mousePressed(doRecording);
@@ -75,36 +87,41 @@ function setupRecording() {
   playButton.mousePressed(doArchiving);
 }
 
-function collectSoundParamters() {
-  // TODO: collect all the sound parameters
-  // [x] amplitude
-  // [x] length of sound
-  // [ ] pitch
-  // [ ] nuance
-  //     btw, there is no "nuance" function for p5js. My current guess is to
-  //     perhaps measure it from the "getPeaks". For all wave peaks measured,
-  //     ??? (need to think this through, not really sure ...)
-  amplitude = soundFile.getPeaks();
-  duration = soundFile.duration();
+function getSoundInfo() {
+  /**
+   * Retrieve sound information like pitch, amplitude, duration, etc.
+   **/
+  amplitude = recording.getPeaks();
+  duration = recording.duration();
+  // pitch?
+  // nuance?
 }
 
-function generateShape() {
-  // TODO: take in sound parameters and generate a shape
-  ellipse(100, 100, 25, 25);
+function generateNewShape() {
+  /**
+   * Create a new p5.js shape.
+   **/
+  ellipse(100, 100, 25, 25); // TODO: experimenting for now ...
 }
 
 function setup() {
-  // TODO: Replace this with the leaflet/mappa setup just
-  // using this for now to draw something to experiment on
-  createCanvas(600, 600);
-
+  /**
+   * The p5.js initial setup function.
+   **/
+  createCanvas(600, 600); // TODO: experimenting for now ...
   setupRecording();
 }
 
 function draw() {
-  if (shouldGenerateNewShape) {
-    collectSoundParamters();
-    generateShape();
-    shouldGenerateNewShape = false;
+  /**
+   * The p5.js draw loop.
+   **/
+  if (newSoundJustRecorded === true) {
+    shapes.push(generateNewShape());
+    newSoundJustRecorded = false;
+  }
+
+  for (var shape of shapes) {
+    shape.display();
   }
 }