Merge pull request #10 from Absulit/dev

Dev

Author: Absulit

index.html

@@ -9,7 +9,7 @@
   <meta name="Description"
     content="Audio Visualizer made with WebGPU and JavaScript">
 
-  <meta property="og:title" content=">Gravity Pull Audio Visualizer by absulit" />
+  <meta property="og:title" content="Gravity Pull Audio Visualizer by absulit" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://absulit.github.io/Gravity-Pull/" />
   <meta property="og:image" content="https://absulit.github.io/Gravity-Pull/docs/example1.webp" />
@@ -18,7 +18,7 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@absulit" />
   <meta name="twitter:creator" content="@absulit" />
-  <meta name="twitter:title" content=">Gravity Pull Audio Visualizer by absulit" />
+  <meta name="twitter:title" content="Gravity Pull Audio Visualizer by absulit" />
   <meta name="twitter:description" content="Audio Visualizer made in WebGPU" />
   <meta name="twitter:image" content="https://absulit.github.io/Gravity-Pull/docs/example1.webp" />
 

src/main.js

@@ -17,6 +17,7 @@ const folderSongs = gui.addFolder('songs');
 
 let audio = null;
 let loop = false;
+let pauseClickTimeout = null;
 
 const options = {
     volume: 0.500,
@@ -35,7 +36,10 @@ const colorSchemes = {
     Artwork: 2,
     Negative: 3
 }
-folderOptions.add(selectedScheme, 'Color Scheme', colorSchemes).onChange(v => points.setUniform('colorScheme', v));
+folderOptions.add(selectedScheme, 'Color Scheme', colorSchemes).onChange(v => {
+    points.setUniform('colorScheme', v)
+    saveOption('scheme', v);
+});
 
 function clickSong() {
     playSong(this)
@@ -231,11 +235,35 @@ songs.forEach(async (song, index) => {
 })
 
 //------------------------------------
+async function saveOption(key, value) {
+    await db.options.put({ key, value });
+}
+
+async function getOption(key) {
+    const option = await db.options.get(key);
+    return option ? option.value : null;
+}
+
+
 
 const db = new Dexie('bhdb');
 db.version(1).stores({
-    songs: '++id, file'
+    songs: '++id, file',
+    options: 'key'
 });
+const volume = await getOption('volume');
+if (volume) {
+    options.volume = volume;
+}
+
+const scheme = await getOption('scheme');
+console.log(scheme);
+
+if (scheme) {
+    selectedScheme['Color Scheme'] = scheme;
+    points.setUniform('colorScheme', scheme)
+    folderOptions.updateDisplay();
+}
 
 const songsFromDB = await db.songs
     .toArray();
@@ -269,7 +297,10 @@ Object.keys(options).forEach(key => {
     }
 })
 
-volumeSlider.onChange(value => audio.volume = value);
+volumeSlider.onChange(value => {
+    audio.volume = value;
+    saveOption('volume', value);
+});
 
 folderOptions.open();
 folderSongs.open();
@@ -303,7 +334,20 @@ await points.init(renderPasses);
 
 points.fitWindow = true;
 
-document.addEventListener('dblclick', _ => points.fullscreen = !points.fullscreen);
+points.canvas.addEventListener('click', _ => {
+    if (pauseClickTimeout) {
+        return;
+    }
+    pauseClickTimeout = setTimeout(() => {
+        audio?.paused ? audio?.play() : audio?.pause();
+        pauseClickTimeout = null;
+    }, 300);
+});
+document.addEventListener('dblclick', _ => {
+    clearTimeout(pauseClickTimeout);
+    pauseClickTimeout = null;
+    points.fullscreen = !points.fullscreen;
+});
 
 setInterval(_ => {
     console.log('---- 10s');

src/renderpasses/renderpass0/frag.js

@@ -217,10 +217,11 @@ fn main(
     var stringMask2 = 0.;
     let textScale = 2.476 * ratio.y + c0;
     let textUVR = uvr / textScale;
+    let spaceRatio = .0017 * ratio.x;
     for (var index = 0; index < NUMCHARS; index++) {
         let charIndex = u32(chars[index]);
         let charPosition = charSizeF32 * vec2(f32(index), 0);
-        let space = .002261 * vec2(f32(index), 0);
+        let space = spaceRatio * vec2(f32(index), 0);
         stringMask += sprite(font, textImageSampler, space + fontPosition + charPosition, textUVR, charIndex - charOffset, charSize).x;
         stringMask2 += sprite(font, textImageSampler, space + fontPosition + charPosition, textUVR + .0005, charIndex - charOffset, charSize).x;
     }

src/utils.js

@@ -23,7 +23,7 @@ export async function countImageColors(src) {
             const side = 16;
             canvas.width = side;
             canvas.height = side;
-            ctx.drawImage(img, 0, 0,side,side);
+            ctx.drawImage(img, 0, 0, side, side);
 
 
 
@@ -59,5 +59,4 @@ export async function countImageColors(src) {
         };
 
     });
-
 }