0.4 release checkpoint - Input adjustments for high g and c right han…

…d machine
sjcobb · Dec 16, 2019 · e2a7fec · e2a7fec
1 parent 6a45986
commit e2a7fec
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 25 deletions.
diff --git a/css/bounce.css b/css/bounce.css
@@ -197,16 +197,27 @@ button#btn-drums-1 {
 }
 
 /*** MACHINE DATA ***/
-#machineData {
+#machine-data {
     margin: 10px 0 8px;
     color: #ED4A82;
-    font-family: sans-serif;
+    font-family: Verdana, sans-serif;
+}
+
+#machine-state {
+    position: relative;
+    top: -1px;
+    color: #fff;
+    font-family: Verdana, sans-serif;
+    font-size: 10px;
+    font-style: italic;
 }
 
 #logo-container {
     position: fixed;
-    top: 15px;
-    right: 10vw;
+    /* top: 15px; */
+    top: 213px;
+    /* right: 350px; */
+    left: 55px;
 }
 #logo-container .logo {
     display: inline-block;
@@ -220,11 +231,20 @@ button#btn-drums-1 {
     opacity: 0;
     animation: fade-in 2.0s 1;
     animation-fill-mode: forwards;
-    animation-delay: 3s;
+    animation-delay: 6s;
     /* animation-delay: 1s; */
 } 
 
 @keyframes fade-in {
     from {opacity: 0;}
     to {opacity: 1;}
 }
+
+
+.nsc-content-camera-container {
+    margin: 0 0 0 200px;
+}
+
+.nsc-content-camera {
+    background: transparent;
+}
diff --git a/index.html b/index.html
@@ -44,11 +44,11 @@
         <div class="legend">
             <ul>
                 <li><span class="symbol" style="background-color: #64b5f6"></span><p>HUMAN</p></li>
-                <li><span class="symbol" style="background-color: #ED4A82"></span><p>AI</p></li>
+                <li><span class="symbol" style="background-color: #ED4A82"></span><p>AI <span id="machine-state"></span></p></li>
             </ul>
         </div>
 
-        <div id="machineData"></div>
+        <div id="machine-data"></div>
     </div>
 
     <div id="logo-container" class="animate-in">

diff --git a/src/js/Input.js b/src/js/Input.js
@@ -247,22 +247,23 @@ function updateChord({ add = null, remove = null }) {
 let humanKeyAdds = [],
     humanKeyRemovals = [];
 function humanKeyDown(note, velocity = 0.7) {
-    // console.log('(humanKeyDown) -> note: ', note);
+    console.log('(humanKeyDown) -> note: ', note);
     // console.log('(humanKeyDown) -> velocity: ', velocity);
     if (note < MIN_NOTE || note > MAX_NOTE) return;
 
     updateChord({ add: note });
     // if (note === 60) { // C4
-    if (note === 72) { // C5
+    // if (note === 72) { // C5
+    if (note === 72 || note === 67) { // C5, G5
         globals.machineTrigger = true;
     } else {
         humanKeyAdds.push({ note, velocity });
-        globals.machineTrigger = false;
+        // globals.machineTrigger = false;
     }
 
-    // if (note === 71) {
-    //     globals.machineTrigger = false;
-    // }
+    if (note === 71) { // High B
+        globals.machineTrigger = false;
+    }
 }
 
 function humanKeyUp(note, timestampLength) {
@@ -276,10 +277,14 @@ function humanKeyUp(note, timestampLength) {
     instrMapped.color = '#64b5f6'; // med blue
 
     // instrMapped.length = timestampLength;
+    // console.log({timestampLength});
+    const maxNoteLength = 500;
+    timestampLength = timestampLength > maxNoteLength ? maxNoteLength : timestampLength;
     instrMapped.length = timestampLength / 1000; // IMPORTANT - so length is in milliseconds 
 
     // if (note !== 60) {
-    if (note !== 72) {
+    // if (note !== 72 && note !== 71) {
+    if (note !== 72 && note !== 71 && note !== 67) { // High G, B, C
         physics.addBody(true, globals.dropPosX, instrMapped);
     }
 
@@ -290,7 +295,10 @@ function humanKeyUp(note, timestampLength) {
 function machineKeyDown(note = 60, time = 0) {
     // console.log('(machineKeyDown) -> note: ', note);
     // console.log('(machineKeyDown) -> time: ', time);
-    if (note < MIN_NOTE || note > MAX_NOTE) return;
+
+    // const TEMP_MIN_NOTE = 60; // C4
+    const TEMP_MIN_NOTE = 64; // E4
+    if (note < TEMP_MIN_NOTE || note > MAX_NOTE) return;
 
     let tonalNote = Tonal.Note.fromMidi(note);
     let instrMapped = getInstrByInputNote(tonalNote);
@@ -304,12 +312,13 @@ function machineKeyDown(note = 60, time = 0) {
     }
 
     if (instrMapped === undefined) {
-        instrMapped = getInstrByInputNote('C4');
+        // instrMapped = getInstrByInputNote('C4');
+    } else {
+        // console.log('(machineKeyDown) -> instrMapped: ', instrMapped);
+        instrMapped.color = '#ED4A82'; // pink
+        physics.addBody(true, globals.dropPosX, instrMapped);
     }
 
-    // console.log('(machineKeyDown) -> instrMapped: ', instrMapped);
-    instrMapped.color = '#ED4A82'; // pink
-    physics.addBody(true, globals.dropPosX, instrMapped);
 }
 
 function buildNoteSequence(seed) {
@@ -417,7 +426,7 @@ function startSequenceGenerator(seed) {
     // console.log('(startSequenceGenerator) -> generatedSequence: ', generatedSequence);
 
     let launchWaitTime = getSequenceLaunchWaitTime(seed); // returns 1 or 0.3
-    launchWaitTime = 0;
+    launchWaitTime = 0.1;
     let playIntervalTime = getSequencePlayIntervalTime(seed); // 0.25
     let generationIntervalTime = playIntervalTime / 2;
 
@@ -478,7 +487,7 @@ function updateUI(machineSequence) {
         globals.ui.machine.currentSequence = machineSequence;
     }
 }
-let machineDataId = document.getElementById('machineData');
+let machineDataId = document.getElementById('machine-data');
 setInterval(() => {
     if (globals.ui) {
         if (globals.ui.machine.currentSequence.length > 0) {
@@ -495,10 +504,22 @@ setInterval(() => {
             if (mappedNotes.length > 6) {
                 mappedNotes.length = 6;
             }
-            machineDataId.innerHTML = mappedNotes.join(', ');
+
+            if (globals.machineTrigger === true) {
+                machineDataId.innerHTML = mappedNotes.join(', ');
+            } else {
+                machineDataId.innerHTML = '';
+            }
+        }
+
+        let machineStateId = document.getElementById('machine-state');
+        if (globals.machineTrigger === true) {
+            machineStateId.innerHTML = '- ON';
+        } else {
+            machineStateId.innerHTML = '- OFF';
         }
     }
-}, 1000);
+}, 500);
 
 function generateDummySequence(seed = SEED_DEFAULT) {
     const sequence = rnn.continueSequence(

diff --git a/src/js/Physics.js b/src/js/Physics.js
@@ -44,7 +44,7 @@ export default class Physics {
         // this.addSpinner();
     }
 
-    initGroundContactMaterial(restitutionValue = 0.3, posArr=[0, -6, 0], sizeArr=[1500, 20, 5]) {
+    initGroundContactMaterial(restitutionValue = 0.3, posArr=[0, -6, 0], sizeArr=[2500, 20, 5]) {
         //TODO: add colored ground on contact here
         //http://schteppe.github.io/cannon.js/docs/classes/ContactMaterial.html
         // const groundShape = new CANNON.Plane(); // invisible plane across entire screen

diff --git a/src/js/app.js b/src/js/app.js
@@ -435,7 +435,7 @@ let animate = () => {
             // console.log(globals.camera);
         } else {
             // globals.camera.position.x = (globals.ticks) - 30; // 0.3, 0.2
-            globals.camera.position.x = (globals.ticks) - 20;
+            globals.camera.position.x = (globals.ticks) - 25;
         }
     }