feat: Added better timbres and fixed timing.

src/core/Constants.jsx

@@ -1,4 +1,4 @@
 export const MOUSE_MODE = true;
 export const HEATMAP_MAX = 999;
 
-export const PARTICIPANT_NUMBER = 7;
+export const PARTICIPANT_NUMBER = 9;

src/core/audio/AudioHandler.jsx

@@ -13,7 +13,7 @@ import D4Flute from "./samples/flute_samples/D4.wav";
 import FSharp2Flute from "./samples/flute_samples/F#2.wav";
 import FSharp3Flute from "./samples/flute_samples/F#3.wav";
 import FSharp4Flute from "./samples/flute_samples/F#4.wav";
-import violaSample from "./samples/viola.wav";
+import violaSample from "./samples/piano.mp3";
 
 import { getMotifByVersion } from "./MotifHandler";
 import { generateChord } from "./ChordHelper";
@@ -23,7 +23,7 @@ const drumSynth = new Tone.Sampler({
 }).toDestination();
 
 const violaSynth = new Tone.Sampler({
-  C5: violaSample,
+  C1: violaSample,
 }).toDestination();
 
 const fluteSynth = new Tone.Sampler({
@@ -60,14 +60,14 @@ const calculateDetailMotifVersion = function (textDensity, linkDensity) {
 
 // C-Major Chord Progression
 const tabChordProgression = [
-  generateChord(60, "major"),
-  generateChord(62, "minor"),
-  generateChord(64, "minor"),
-  generateChord(65, "major"),
-  generateChord(67, "major"),
-  generateChord(69, "minor"),
-  generateChord(71, "diminished"),
-  generateChord(72, "major"),
+  generateChord(84, "major"),
+  generateChord(86, "minor"),
+  generateChord(88, "minor"),
+  generateChord(89, "major"),
+  generateChord(91, "major"),
+  generateChord(93, "minor"),
+  generateChord(95, "diminished"),
+  generateChord(96, "major"),
 ];
 
 var offCooldown = true;
@@ -113,7 +113,7 @@ export function playTabEarconSonification(endReached, tabIndex, tabAmount) {
       tabIndex,
       tabAmount
     );
-    fluteSynth.triggerAttackRelease(
+    violaSynth.triggerAttackRelease(
       tabChordProgression[tabChordIndex],
       "4n",
       now
@@ -164,7 +164,8 @@ export function playTabModelSonification(pannerVal, frequencyVal, endReached) {
 // Menu Sonification Paper. :)
 export function playDetailEarconSonification(textDensity, linkDensity) {
   if (offCooldown) {
-    const synth = violaSynth.toDestination();
+    const synth = fluteSynth.toDestination();
+    console.log(calculateDetailMotifVersion(textDensity, linkDensity));
     getMotifByVersion(
       calculateDetailMotifVersion(textDensity, linkDensity),
       synth

src/core/audio/MotifHandler.jsx

@@ -22,24 +22,24 @@ const motifs = [
 export function getMotif1(synth) {
   const now = Tone.now();
   synth.triggerAttackRelease("A3", "4n", now);
-  synth.triggerAttackRelease("C#4", "4n", now + 0.16);
+  synth.triggerAttackRelease("C#4", "4n", now + 0.24);
 }
 
 export function getMotif2(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("A3", "4n", now);
+  synth.triggerAttackRelease("A3", 0.2, now);
   synth.triggerAttackRelease("E#4", "4n", now + 0.16);
 }
 
 export function getMotif3(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("A3", "4n", now);
+  synth.triggerAttackRelease("A3", 0.2, now);
   synth.triggerAttackRelease("G#4", "4n", now + 0.16);
 }
 
 export function getMotif4(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("A3", "4n", now);
+  synth.triggerAttackRelease("A3", 0.2, now);
   synth.triggerAttackRelease("A4", "4n", now + 0.16);
 }
 
@@ -47,56 +47,56 @@ export function getMotif4(synth) {
 
 export function getMotif5(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("A3", "4n", now);
-  synth.triggerAttackRelease("C#4", "4n", now + 0.08);
-  synth.triggerAttackRelease("E4", "4n", now + 0.24);
+  synth.triggerAttackRelease("A3", 0.2, now);
+  synth.triggerAttackRelease("C#4", 0.2, now + 0.16);
+  synth.triggerAttackRelease("E4", "4n", now + 0.32);
 }
 
 export function getMotif6(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("A3", "4n", now);
-  synth.triggerAttackRelease("C#4", "4n", now + 0.08);
-  synth.triggerAttackRelease("G#4", "4n", now + 0.24);
+  synth.triggerAttackRelease("A3", 0.2, now);
+  synth.triggerAttackRelease("C#4", 0.2, now + 0.16);
+  synth.triggerAttackRelease("G#4", "4n", now + 0.32);
 }
 
 export function getMotif7(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("A3", "4n", now);
-  synth.triggerAttackRelease("E4", "4n", now + 0.16);
+  synth.triggerAttackRelease("A3", 0.2, now);
+  synth.triggerAttackRelease("E4", 0.2, now + 0.16);
   synth.triggerAttackRelease("A4", "4n", now + 0.32);
 }
 
 export function getMotif8(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("A3", "4n", now);
-  synth.triggerAttackRelease("G#4", "4n", now + 0.08);
-  synth.triggerAttackRelease("C#5", "4n", now + 0.24);
+  synth.triggerAttackRelease("A3", 0.2, now);
+  synth.triggerAttackRelease("G#4", 0.2, now + 0.16);
+  synth.triggerAttackRelease("C#5", "4n", now + 0.32);
 }
 
 // Large Motifs
 
 export function getMotif9(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("C#3", "4n", now);
-  synth.triggerAttackRelease("C#4", "4n", now + 0.16);
-  synth.triggerAttackRelease("G#3", "4n", now + 0.32);
-  synth.triggerAttackRelease("G#4", "4n", now + 0.48);
+  synth.triggerAttackRelease("C#3", 0.15, now);
+  synth.triggerAttackRelease("C#4", 0.15, now + 0.12);
+  synth.triggerAttackRelease("G#3", 0.15, now + 0.24);
+  synth.triggerAttackRelease("G#4", "4n", now + 0.36);
 }
 
 export function getMotif10(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("E3", "4n", now);
-  synth.triggerAttackRelease("E4", "4n", now + 0.16);
-  synth.triggerAttackRelease("G#3", "4n", now + 0.32);
-  synth.triggerAttackRelease("C#4", "4n", now + 0.48);
+  synth.triggerAttackRelease("E3", 0.15, now);
+  synth.triggerAttackRelease("E4", 0.15, now + 0.12);
+  synth.triggerAttackRelease("G#3", 0.15, now + 0.24);
+  synth.triggerAttackRelease("C#4", "4n", now + 0.36);
 }
 
 export function getMotif11(synth) {
   const now = Tone.now();
-  synth.triggerAttackRelease("E3", "4n", now);
-  synth.triggerAttackRelease("E4", "4n", now + 0.16);
-  synth.triggerAttackRelease("A3", "4n", now + 0.32);
-  synth.triggerAttackRelease("C#4", "4n", now + 0.48);
+  synth.triggerAttackRelease("E3", 0.15, now);
+  synth.triggerAttackRelease("E4", 0.15, now + 0.12);
+  synth.triggerAttackRelease("A3", 0.15, now + 0.24);
+  synth.triggerAttackRelease("C#4", "4n", now + 0.36);
 }
 
 export function getMotif12(synth) {

src/index.css

@@ -9,6 +9,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body > iframe {
+  /*display: none;*/
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
@@ -52,4 +56,9 @@ canvas {
 
 #propertyLocationMap {
   height: 30vh !important;
+}
+
+.leaflet-control-container {
+  z-index: 600 !important;
+  position: relative;
 }