Merge pull request #2 from sjcobb/develop

v4: bolero of fire migration to webpack workflow - cameraLookUp adjustments
sjcobb · Jul 28, 2019 · 658825e · 658825e
2 parents c5b4e2b + 299c729
commit 658825e
Show file tree

Hide file tree

Showing 33 changed files with 1,209 additions and 677 deletions.
diff --git a/.gitignore b/.gitignore
@@ -59,3 +59,5 @@ typings/
 
 # next.js build output
 .next
+
+.DS_Store
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,20 @@
+## TODO
+
+- [ ] Fix Fire class and shader import
+- [ ] Fix audio quality in recordings
+- [ ] Other shapes besides spheres - each shape has different sound / wave type
+- [ ] Contact surfaces light up based on note color
+- [ ] Keep camera in line with ballX position
+- [ ] Dynamically set zPos based on note position in staff (position.z in instrumentMapping getter)
+- [ ] Clean up instrumentMapping template and getters
+- [ ] Drum machine wheel or metronome for repeating snare and kick synths
+- [ ] Different contact surfaces with different restitution
+- [ ] UI for editable 'instrument - shape - note - keyboard' mapping object
+- [ ] Web MIDI API support to connect to keyboard
+- [x] Arrow key controls
+- [x] support PolySynth in getInstrumentMappingTemplate to allow chords
+- [x] variation added for striped balls
+- [x] configurable static row positioning of ball array using globalShowStaticRows
+- [x] dynamic associatation of keyName with keyMapped options for dropped balls
+- [x] set fill styles from instrumentMapping obj instead of THREEx.createPoolBall
+- [x] How to drop balls without stacking?
diff --git a/build.json → archive/build.json b/build.json → archive/build.json
diff --git a/archive/index.html b/archive/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <meta charset="UTF-8">
+    <title>3D Sheet Music Animation Machine</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">
+
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script> -->
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.8.4/Tone.min.js"></script> -->
+
+    <!-- <script src="vendor/three-v102.min.js"></script> -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
+    <!-- <script src="vendor/three-v97.min.js"></script> -->
+
+    <!-- <script src="vendor/Tone_v13-8-4.min.js"></script> --> <!-- PREV -->
+
+    <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/[email protected]/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>
+
+</head>
+
+<body>
+    <div id="controls-container" class="">
+        <div class="toggle-wrapper">
+            <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>
+
+            <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>
+            <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="hidden"> -->
+    <div id="legend-container" class="">
+        <div class="legend">
+            <ul>
+                <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>
+            </ul>
+        </div>
+    </div>
+
+    <!-- <script src="js/threex.js"></script>
+    <script src="js/physics.js"></script>
+    <script src="js/drums.js"></script>
+    <script src="js/map.js"></script>
+    <script src="js/fire.js"></script>
+    <script src="js/scene.js"></script>
+    <script src="js/audio.js"></script>
+    <script src="js/ui.js"></script> -->
+
+    <!-- https://github.com/edwinwebb/three-seed/blob/master/webpack.config.js -->
+    <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>
diff --git a/js/audio.js → archive/js/audio.js b/js/audio.js → archive/js/audio.js
diff --git a/js/drums.js → archive/js/drums.js b/js/drums.js → archive/js/drums.js
diff --git a/js/fire.js → archive/js/fire.js b/js/fire.js → archive/js/fire.js
diff --git a/js/map.js → archive/js/map.js b/js/map.js → archive/js/map.js
diff --git a/js/physics.js → archive/js/physics.js b/js/physics.js → archive/js/physics.js
diff --git a/js/scene.js → archive/js/scene.js b/js/scene.js → archive/js/scene.js
diff --git a/js/threex.js → archive/js/threex.js b/js/threex.js → archive/js/threex.js
diff --git a/js/ui.js → archive/js/ui.js b/js/ui.js → archive/js/ui.js
diff --git a/css/bounce.css b/css/bounce.css
@@ -120,6 +120,11 @@ button#bounce {
     left: 0;
     background: rgba(204, 204, 204, 0.6);
 }
+#legend-container.pos-top-left {
+    margin: 0;
+    bottom: auto;
+}
+
 .legend {
     display: inline-block;
     position: relative;
@@ -156,4 +161,17 @@ button#bounce {
     line-height: 20px;
     font-size: 12px;
     color: #fff;
-}
+}
+
+#legend-container.animate-in {
+    opacity: 0;
+    animation: fade-in 2.0s 1;
+    animation-fill-mode: forwards;
+    /*animation-delay: 25s;*/ /* close */
+    animation-delay: 27s;
+} 
+
+@keyframes fade-in {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
diff --git a/css/bounce.scss b/css/bounce.scss
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
 
 <head>
-
     <meta charset="UTF-8">
     <title>3D Sheet Music Animation Machine</title>
 
@@ -12,21 +11,15 @@
 
     <link rel="stylesheet" type="text/css" href="css/bounce.css">
 
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script> -->
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.8.4/Tone.min.js"></script> -->
-
-    <!-- <script src="vendor/three-v102.min.js"></script> -->
-
+    <!-- TODO: import THREE as module -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
-    <!-- <script src="vendor/three-v97.min.js"></script> -->
-
-    <script src="vendor/Tone_v13-8-4.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/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 -->
@@ -91,7 +84,8 @@
         </section>
     </div>
 
-    <div id="legend-container" class="hidden">
+    <!-- <div id="legend-container" class="hidden"> -->
+    <div id="legend-container" class="pos-top-left animate-in">
         <div class="legend">
             <ul>
                 <li><span id="symbol_1" class="symbol" style="background-color: #0018F9"></span><p>I</p></li>
@@ -105,15 +99,6 @@
         </div>
     </div>
 
-    <!-- <script src="js/threex.js"></script>
-    <script src="js/physics.js"></script>
-    <script src="js/drums.js"></script>
-    <script src="js/map.js"></script>
-    <script src="js/fire.js"></script>
-    <script src="js/scene.js"></script>
-    <script src="js/audio.js"></script>
-    <script src="js/ui.js"></script> -->
-
     <!-- https://github.com/edwinwebb/three-seed/blob/master/webpack.config.js -->
     <script src="dist/bundle.js"></script>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,3 +59,5 @@ typings/

		# next.js build output
		.next

		.DS_Store