Merge pull request #2 from sjcobb/develop

Develop - 0.3 and 0.4 release work (MIDI only)
sjcobb · Dec 25, 2019 · 7959221 · 7959221
2 parents 2711d55 + 21ebd80
commit 7959221
Show file tree

Hide file tree

Showing 13 changed files with 664 additions and 466 deletions.
diff --git a/README.md b/README.md
@@ -27,4 +27,4 @@ first 3D prototype: https://www.youtube.com/watch?v=8QR59RP-Z_8
   - Neural Drum Machine: https://codepen.io/teropa/pen/JLjXGK
   - Neural Melody Autocompletion: https://codepen.io/teropa/pen/gvwwZL
 - Performance RNN: https://magenta.tensorflow.org/performance-rnn
-- Magenta demos: https://magenta.tensorflow.org/demos
+- Magenta demos: https://magenta.tensorflow.org/demos
diff --git a/TODO.md b/TODO.md
@@ -1,16 +1,16 @@
 ## Roadmap
 
 ### 0.4
-- [ ] map note length (triggerRelease) to bounce height, see addBody -> sphereRestitution or initContactMaterial restitutionValue param
-- [ ] update instrumentMappings to use key of B major instead of C
-- [ ] display key signature in UI
+- [x] map note length (triggerRelease) to bounce height, see addBody -> sphereRestitution or initContactMaterial restitutionValue param
 
 ### 0.5
 - [ ] rename state variables to store, separate property for UI related variables
-- [ ] different iframes / canvas for each instrument type, separate routes with different globals can be used
-- [ ] balls drop and hit key of 3D piano
+- [ ] update instrumentMappings to use key of B major instead of C
+- [ ] display key signature in UI
 
 ### 0.6
+- [ ] different iframes / canvas for each instrument type, separate routes with different globals can be used
+- [ ] balls drop and hit key of 3D piano
 - [ ] instrument animations mapped to note sequences, ex: flamePhysics.create triggered on FD - FD -- A3F - A3F added to note sequence (use humanKeyAdds array? or buildNoteSequence function)
 
 ### 0.7

diff --git a/css/bounce.css b/css/bounce.css
@@ -23,20 +23,21 @@ canvas {
 #controls-container {
     /* display: none; */
     position: absolute;
-    top: 30px;
-    right: 0;
-    left: 5px;
+    top: 0;
+    left: 0;
     width: 200px;
     margin: 0;
-    padding: 8px;
-    background-color: rgba(160, 160, 160, 0.55);
+    padding: 0;
     color: #fff;
     text-align: center;
-    z-index: 1;
+    z-index: 10;
 }
 
 #settings-container {
     display: block;
+    padding: 10px 5px 0;
+    /* background: rgba(204, 204, 204, 0.3); */
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 #settings-container.hidden {
@@ -45,10 +46,23 @@ canvas {
     /* display: block; */
 }
 
+.toggle-wrapper {
+    margin: 0 0 0;
+}
 button#settings-toggle-btn {
-    margin: 0 0 20px;
+    margin: 0 0 0;
     padding: 5px 10px;
     font-size: 16px;
+    color: #fff;
+    /* background-color: rgba(0, 0, 0, 0.30); */
+    background-color: rgba(255, 255, 255, 0.2);
+    border: none;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+}
+button#settings-toggle-btn:hover {
+    /* background-color: rgba(0, 0, 0, 0.90); */
+    background-color: rgba(255, 255, 255, 0.3);
 }
 
 button#settings-toggle-btn.hidden-active {
@@ -64,33 +78,37 @@ button {
     cursor: pointer;
 }
 
-button#bounce,
+button#btn-drums-1,
 .play {
     display: inline-block;
-    margin: auto 3px 30px auto;
+    margin: auto 3px 10px auto;
     padding: 6px 8px;
     background: none;
     font: 14px/1 Verdana, Geneva, sans-serif;
     letter-spacing: 1.2px;
-    color: #003366;
-    border: 1px solid #003366;
+    color: #fff;
+    border: 1px solid #fff;
+    /* color: #003366; */
+    /* border: 1px solid #003366; */
     text-transform: uppercase;
     cursor: pointer;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
 }
 
-.play span.fa {
+span.fa-headphones {
     padding: 0 5px 0 3px;
 }
 
-button#bounce:hover,
+button#btn-drums-1:hover,
 .play:hover {
-    background: #003366;
-    color: #fff;
+    /* background: #003366; */
+    /* color: #fff; */
+    background: #fff;
+    color: #003366;
 }
 
-button#bounce {
+button#btn-drums-1 {
     margin: auto 3px 10px auto;
 }
 
@@ -127,6 +145,7 @@ button#bounce {
     position: absolute;
     left: 0;
     right: 0;
+    z-index: 9;
 }
 #legend-container.pos-top-left {
     margin: 0;
@@ -177,10 +196,28 @@ button#bounce {
     letter-spacing: 1.25px;
 }
 
+/*** MACHINE DATA ***/
+#machine-data {
+    margin: 10px 0 8px;
+    color: #ED4A82;
+    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;
@@ -194,11 +231,20 @@ button#bounce {
     opacity: 0;
     animation: fade-in 2.0s 1;
     animation-fill-mode: forwards;
-    /* animation-delay: 12s; */
-    animation-delay: 1s;
+    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
@@ -3,43 +3,25 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>3D Sheet Music Animation Machine</title>
+    <title>AI Duet 3D</title>
 
     <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Sawarabi+Gothic&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
-    <!-- <link rel="stylesheet" href="vendor/font-awesome.min.css" /> -->
 
     <link rel="stylesheet" type="text/css" href="css/bounce.css">
 
-    <!-- alternate MIDI api - TODO: import correctly -->
-    <!-- <script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0/webmidi.min.js" type="text/javascript"></script> -->
 
     <!-- TODO: import THREE as module -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
 
     <script src="vendor/Cannon/cannon.min.js"></script>
     <script src="vendor/Cannon/CannonDebugRenderer.js"></script>
 
-    <!-- <script src="vendor/FlyControls.js"></script> -->
-    <!-- <script src="vendor/OrbitControls.js"></script> -->
-
-    <!-- <script src="vendor/ObjectLoader.js"></script> -->
-
-    <!-- https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html -->
-    <!-- <script src="vendor/hilbert3D.js"></script>
-    <script src='vendor/Three/lines/LineSegmentsGeometry.js'></script>
-    <script src='vendor/Three/lines/LineGeometry.js'></script>
-    <script src='vendor/Three/lines/WireframeGeometry2.js'></script>
-    <script src='vendor/Three/lines/LineMaterial.js'></script>
-    <script src='vendor/Three/lines/LineSegments2.js'></script>
-    <script src='vendor/Three/lines/Line2.js'></script>
-    <script src='vendor/Three/lines/Wireframe.js'></script> -->
-
     <!-- For Generative Drum Beats: https://gogul09.github.io/software/creating-intelligent-music-applications-in-the-browser -->
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@magenta/music@0.0.8/dist/magentamusic.min.js"></script>
 
-    <script src="https://cdn.rawgit.com/mattatz/THREE.Fire/master/FireShader.js"></script>
-    <script src="https://cdn.rawgit.com/mattatz/THREE.Fire/master/Fire.js"></script>
+    <!-- <script src="https://cdn.rawgit.com/mattatz/THREE.Fire/master/FireShader.js"></script>
+    <script src="https://cdn.rawgit.com/mattatz/THREE.Fire/master/Fire.js"></script> -->
 
 </head>
 
@@ -49,61 +31,24 @@
             <button id="settings-toggle-btn" class="btn hidden-active"><i class="fa fa-cog" aria-hidden="true"></i></button>
         </div>
 
-        <section id="settings-container" class="">
-            <div class="play-wrapper">
-                <a class="play"><span class="fa fa-headphones" aria-hidden="true"></span>Stop</a>
-            </div>
+        <section id="settings-container" class="hidden">
+            <button type="button" class="btn btn-light" id="btn-drums-1"><span class="fa fa-headphones" aria-hidden="true"></span>Drum Loop</button>
 
-            <div class="form-check form-check-inline">
-                <form id="shape-form">
-                    <input class="form-check-input" type="radio" id="shape-choice" name="shape" value="box" checked>
-                    <label class="form-check-label" for="shape1">Box</label>
-                    <input class="form-check-input" type="radio" id="shape-choice" name="shape" value="sphere">
-                    <label class="form-check-label" for="shape2">Sphere</label>
-                    <input class="form-check-input" type="radio" id="shape-choice" name="shape" value="torus">
-                    <label class="form-check-label" for="shape3">Torus</label>
-                </form>
-            </div>
-            <br/>
-            <div class="form-check form-check-inline">
-                <form id="mesh-form">
-                    <input class="form-check-input" type="radio" id="material-choice" name="material" value="phong" checked>
-                    <label class="form-check-label" for="material1">Phong</label>
-                    <input class="form-check-input" type="radio" id="material-choice" name="material" value="basic">
-                    <label class="form-check-label" for="material2">Basic</label>
-                    <input class="form-check-input" type="radio" id="material-choice" name="material" value="lambert">
-                    <label class="form-check-label" for="shape3">Lambert</label>
-                </form>
+            <div class="play-wrapper">
+                <a class="play"></span>Stop</a>
             </div>
-            <br/>
-            <br/>
-            <button type="button" class="btn btn-light" id="bounce">Drum Loop</button>
-
-            <button type="button" class="btn btn-light" id="call-add-shape">Add Shape</button>
-
-            <button type="button" class="btn btn-light" id="drumMachine">Drum Machine</button>
-
-            <button type="button" class="btn btn-light" id="startSong">Start Song</button>
         </section>
     </div>
 
-
-    <!-- <div id="legend-container" class="pos-top-left animate-in"> -->
     <div id="legend-container" class="animate-in">
         <div class="legend">
             <ul>
-                <li><span id="symbol_2" class="symbol" style="background-color: #64b5f6"></span><p>HUMAN</p></li>
-                <li><span id="symbol_3" class="symbol" style="background-color: #ED4A82"></span><p>AI</p></li>
-                <!-- <li><span id="symbol_3" class="symbol" style="background-color: #e91e63"></span><p>AI</p></li> -->
-                <!-- <li><span id="symbol_1" class="symbol" style="background-color: #0018F9"></span><p>I</p></li>
-                <li><span id="symbol_2" class="symbol" style="background-color: #680896"></span><p>II</p></li>
-                <li><span id="symbol_3" class="symbol" style="background-color: #FF001F"></span><p>III</p></li>
-                <li><span id="symbol_4" class="symbol" style="background-color: #006CFA"></span><p>IV</p></li>
-                <li><span id="symbol_5" class="symbol" style="background-color: #4B0AA1"></span><p>V</p></li>
-                <li><span id="symbol_6" class="symbol" style="background-color: #C6018B"></span><p>VI</p></li>
-                <li><span id="symbol_7" class="symbol" style="background-color: #FF872B"></span><p>VII</p></li> -->
+                <li><span class="symbol" style="background-color: #64b5f6"></span><p>HUMAN</p></li>
+                <li><span class="symbol" style="background-color: #ED4A82"></span><p>AI <span id="machine-state"></span></p></li>
             </ul>
         </div>
+
+        <div id="machine-data"></div>
     </div>
 
     <div id="logo-container" class="animate-in">
@@ -112,7 +57,6 @@
         </div>
     </div>
 
-    <!-- https://github.com/edwinwebb/three-seed/blob/master/webpack.config.js -->
     <script src="dist/bundle.js"></script>
 
 </body>