Remove Codef

Adds Hydra Vis
Expose Howler

2 files changed, 43 insertions, 26 deletions

diff --git a/index.html b/index.html
index cee4636..eb06fae 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Retrowave Player</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
+    <script src="https://unpkg.com/hydra-synth"></script>
     <link rel="stylesheet" href="hg.css">
     <link rel="icon" href="/favicon.ico">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
@@ -48,9 +49,9 @@
     </div>
     <div id="codef-canvas"></div>
     <input id="file-upload" type="file" accept="application/json" />
-    <script src="libs/codef_core.js"></script>
+    <!-- <script src="libs/codef_core.js"></script>
     <script src="libs/codef_starfield.js"></script>
-    <script src="libs/codef_3d.js"></script>
+    <script src="libs/codef_3d.js"></script> -->
     <script src="player.js"></script>
 </body>
 
diff --git a/player.js b/player.js
index 4659c38..961c8cb 100644
--- a/player.js
+++ b/player.js
@@ -52,9 +52,11 @@
     }
 
     document.getElementById("initButton")?.addEventListener("click", () => {
+        var hydra = new Hydra({ detectAudio: false })
         modalEl.classList.remove("open");
         playMusic();
-        initCodef();
+        initHydra();
+        // initCodef();
     });
 
     document.getElementById("history").addEventListener("click", () => {
@@ -149,6 +151,7 @@
         });
         setVolume();
         isPlaying = true;
+        window.hw = howlerInstance
 
         updateInfo(currentTrack);
 
@@ -158,14 +161,14 @@
 
     function volumeDown() {
         console.log(volume);
-        if(volume>0.1) {
+        if (volume > 0.1) {
             volume -= 0.1;
         }
         setVolume();
     }
 
     function volumeUp() {
-        if(volume<1) {
+        if (volume < 1) {
             volume += 0.1;
         }
         setVolume();
@@ -206,11 +209,11 @@
     function downloadHistory() {
         const historyArray = getHistory();
         let element = document.createElement("a");
-        let playListData  = '#EXTM3U';
+        let playListData = '#EXTM3U';
         historyArray.forEach((musicData) => {
             playListData = `${playListData}
 
-#EXTINF:${Math.ceil(musicData.duration/1000)}, ${musicData.title}
+#EXTINF:${Math.ceil(musicData.duration / 1000)}, ${musicData.title}
 https://retrowave.ru/${musicData.streamUrl}
 `;
         });
@@ -230,24 +233,37 @@ https://retrowave.ru/${musicData.streamUrl}
         document.body.removeChild(element);
     }
 
-    function initCodef() {
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-        effectCanvas = new canvas(width, height, 'codef-canvas');
-        starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0);
-        line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 );
-        line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
-        line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
-        renderCodeFx();
-    }
-
-    function renderCodeFx() {
-        effectCanvas.fill('#000000');
-        line3D.group.rotation.x+=0.01;
-        line3D.group.rotation.y+=0.02;
-        line3D.group.rotation.z+=0.04;
-        starField.draw();
-        line3D.draw();
-        requestAnimationFrame(renderCodeFx);
+    // function initCodef() {
+    //     const width = window.innerWidth;
+    //     const height = window.innerHeight;
+    //     effectCanvas = new canvas(width, height, 'codef-canvas');
+    //     starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0);
+    //     line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 );
+    //     line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
+    //     line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
+    //     renderCodeFx();
+    // }
+
+    // function renderCodeFx() {
+    //     effectCanvas.fill('#000000');
+    //     line3D.group.rotation.x+=0.01;
+    //     line3D.group.rotation.y+=0.02;
+    //     line3D.group.rotation.z+=0.04;
+    //     starField.draw();
+    //     line3D.draw();
+    //     requestAnimationFrame(renderCodeFx);
+    // }
+
+    function initHydra() {
+        // voronoi(350, 0.15)
+        //     .modulateScale(osc(8).rotate(Math.sin(time)), .5)
+        //     .thresh(.8)
+        //     .modulateRotate(osc(7), .4)
+        //     .thresh(.7)
+        //     .diff(src(o0).scale(1.8))
+        //     .modulateScale(osc(2).modulateRotate(o0, .74))
+        //     .diff(src(o0).rotate([-.012, .01, -.002, 0]).scrollY(0, [-1 / 199800, 0].fast(0.7)))
+        //     .brightness([-.02, -.17].smooth().fast(.5)).modulate(o0, () => a.fft[1] * .2)
+        //     .out()
     }
 })();