Merge pull request #12 from Absulit/dev

general optimizations

Author: Absulit

src/main.js

@@ -42,18 +42,19 @@ folderOptions.add(selectedScheme, 'Color Scheme', colorSchemes).onChange(v => {
 });
 
 function clickSong() {
-    points.setUniform('showMessage', 0);
     playSong(this);
 }
 
 function playSong(song) {
     const { file } = song;
+    points.setUniform('showMessage', 0);
     const audioUrl = URL.createObjectURL(file);
     const name = song?.name || file.name;
+    const title = song?.title || name;
 
     audio && audio.pause() && (audio = null);
     audio = points.setAudio('audio', audioUrl, options.volume, false, false);
-    points.setStorageMap('chars', strToCodes(name));
+    points.setStorageMap('chars', strToCodes(title));
     let artworkLoaded = 0;
     song?.artworkColors && points.setStorageMap('artworkColors', song?.artworkColors.flat());
     song?.artworkColors && (artworkLoaded = 1);
@@ -143,19 +144,21 @@ async function onCompleteTags(result) {
     }
 
     song.name = name || file.name;
+    song.title = title || name;
 
 
     if (!song.default) {
         await db.songs.add({
             file,
             artworkImageUrl,
             artworkColors,
-            name: song.name
+            name: song.name,
+            title: song.title
         });
     }
 
     folderSongs.add(song, 'fn').name(song.name);
-    points.setStorageMap('chars', strToCodes(name));
+    points.setStorageMap('chars', strToCodes(title));
 }
 
 async function onErrorTags(response) {
@@ -278,6 +281,7 @@ songsFromDB.forEach(item => {
         artworkColors: item.artworkColors,
         artworkImageUrl: item.artworkImageUrl,
         name: item.name,
+        title: item.title,
         src: audioUrl,
         fn: clickSong
     }

src/renderpasses/renderpass0/frag.js

@@ -1,7 +1,7 @@
 import { fnusin, fusin } from 'animation';
 import { GREEN, layer, RED, WHITE } from 'color';
 import { sprite, texturePosition } from 'image';
-import { PI, rotateVector } from 'math';
+import { PHI, PI, rotateVector } from 'math';
 import { sdfCircle, sdfLine2, sdfSquare, sdfSegment } from 'sdf';
 import { structs } from './structs.js';
 
@@ -16,7 +16,7 @@ ${sdfCircle}
 ${sdfSquare}
 ${rotateVector}
 ${sprite}
-
+${PHI}
 ${PI}
 ${layer}
 ${fusin}
@@ -120,10 +120,16 @@ fn sdRectangle2(position0:vec2f, position1:vec2f, uv:vec2f) -> f32 {
     return length(max(d, vec2f())) + min(max(d.x, d.y), 0.0);
 }
 
+const MATRIX0 = vec3f(.129,.145,.039);
+const MATRIX1 = vec3f(.231,.274,.117);
+const MATRIX2 = vec3f(.2,.282,.152);
+const MATRIX3 = vec3f(.309,.4,.290) ;
+const MATRIX4 = vec4f(.572,.717,.549, 1);
+
 
 const TAU = PI * 2; // TODO: fix on main library
 const TAUQUARTER = TAU * .25;
-const NUMCHARS = 128;
+const NUMCHARS = 30;
 const MAXBITS = 256;
 const CHLEN = 0.125;
 const DINTENSITY = .0041;//0.0151;
@@ -133,6 +139,7 @@ const TRIROTATION = .00001;
 const PIXELATEDSIZE = 100;
 const PIMILLI = PI * .001;
 const FEEDBACKFADE = .98;
+const FEEDBACKFADEN = 1-FEEDBACKFADE;
 const charSize = vec2(8u,22u);
 const charOffset = 32u; // A is 33
 const maxCircleRadius = .9;
@@ -169,7 +176,7 @@ fn main(
 
     let s = sdfCircle(center, maxCircleRadius * c4, .1 * audioX, uvr);
     let t = sdfCircle(center, audio1, audio1, uvr);
-    let sq = sdfSquare(center, maxCircleRadius * c4, .1 * c4, TAU * audio1, uvr);
+    let sq = sdfSquare(center, maxCircleRadius * c4, .1 * c4, PHI * audio1, uvr);
 
     let rectMask = sdRectangle1( center, vec2f(.7) + vec2f(.2) * c0, .004 + .020 * c3 /*.0014*/ /*.1 * c1*/, uvr) * step(.001, c0);
 
@@ -215,12 +222,14 @@ fn main(
 
     let feedbackUV = ((uvrRotate + center) / fadeRotate) - center;
     var feedbackColor = texturePosition(feedbackTexture, imageSampler, vec2(), feedbackUV, false);
-    feedbackColor = mix(feedbackColor, vec4f(), 1-FEEDBACKFADE);
+    feedbackColor = mix(feedbackColor, vec4f(), FEEDBACKFADEN);
     feedbackColor = feedbackColor * step(.01, feedbackColor.a);
 
     let height = 0.;
-    let lineMask = sdfLine2(vec2(0, height + audioX) * ratio, vec2(1, height + audioX) * ratio, .005, uvr);
-    let lineMask2 = sdfLine2(vec2(0, height + audioX2) * ratio, vec2(1, height + audioX2) * ratio, .005, uvr);
+    let heightM1 = height + audioX;
+    let heightM2 = height + audioX2;
+    let lineMask = sdfLine2(vec2(0, heightM1) * ratio, vec2(1, heightM1) * ratio, .005, uvr);
+    let lineMask2 = sdfLine2(vec2(0, heightM2) * ratio, vec2(1, heightM2) * ratio, .005, uvr);
 
     let fontPosition = vec2(.003, 0.) * ratio;
     let charSizeF32 = vec2(f32(charSize.x) / params.screen.x, f32(charSize.y) / params.screen.y);
@@ -232,20 +241,26 @@ fn main(
     let textUVR = uvr / textScale;
     let spaceRatio = .0017 * ratio.x;
     for (var index = 0; index < NUMCHARS; index++) {
+        let indexF32 = f32(index);
         let charIndex = u32(chars[index]);
-        let charPosition = charSizeF32 * 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;
+        let charPosition = charSizeF32 * vec2(indexF32, 0);
+        let space = spaceRatio * vec2(indexF32, 0);
+        let sfPcP = space + fontPosition + charPosition;
+        let cIcO = charIndex - charOffset;
+        stringMask += sprite(font, textImageSampler, sfPcP, textUVR, cIcO, charSize).x;
+        stringMask2 += sprite(font, textImageSampler, sfPcP, textUVR + .0005, cIcO, charSize).x;
     }
 
     var messageStringMask = 0.;
-    let messagePosition = vec2(.15, .19) * ratio;
-    for (var index = 0; index < 21; index++) {
-        let charIndex = u32(message[index]);
-        let charPosition = charSizeF32 * vec2(f32(index), sin(params.time + f32(index) * .1));
-        let space = spaceRatio * vec2(f32(index), 0);
-        messageStringMask += sprite(font, textImageSampler, space + messagePosition + charPosition, textUVR, charIndex - charOffset, charSize).x;
+    if(params.showMessage == 1.){
+        let messagePosition = vec2(.15, .19) * ratio;
+        for (var index = 0; index < 21; index++) {
+            let indexF32 = f32(index);
+            let charIndex = u32(message[index]);
+            let charPosition = charSizeF32 * vec2(indexF32, sin(params.time + indexF32 * .1));
+            let space = spaceRatio * vec2(indexF32, 0);
+            messageStringMask += sprite(font, textImageSampler, space + messagePosition + charPosition, textUVR, charIndex - charOffset, charSize).x;
+        }
     }
 
 
@@ -257,7 +272,7 @@ fn main(
     variables.triRotation -= .000001 * step(0., variables.triRotation) * c2Visible;
     variables.triRotation = variables.triRotation % TAU; // cap rotation to avoid it getting stuck
     equiTriUV = rotateVector(equiTriUV, variables.triRotation + TAUQUARTER);
-    let poliMask = sdfngon(vec2f(), numSides, .5 + (c7 * .5), .01, equiTriUV) * c2Visible;
+    let poliMask = sdfngon(vec2f(), numSides, .5 + (c2 * .25), .01, equiTriUV) * c2Visible;
 
     let progressBarMask = sdfLine2(vec2(), vec2(params.progress,0) * ratio, .005, uvr);
 
@@ -287,11 +302,11 @@ fn main(
             stringColor2 = stringMask2 * mix( vec4( 1-vec3(fusin(.132) , fusin(.586), 0), 1), vec4(1-vec3(1,.5, fusin(.7589633)), 1), c0);
         }
         case 1 { // matrix
-            audioWave = vec4f( vec3f(.129,.145,.039) * lineMask, 1);
-            audioWave2 = vec4f( vec3f(.231,.274,.117) * lineMask2, 1);
-            progressBar = vec4f( vec3f(.2,.282,.152) * progressBarMask, 1);
-            poligon = vec4f( vec3f(.309,.4,.290) * poliMask, 1);
-            stringColor = vec4f( .572,.717,.549, 1) * stringMask;
+            audioWave = vec4f(MATRIX0 * lineMask, 1);
+            audioWave2 = vec4f(MATRIX1 * lineMask2, 1);
+            progressBar = vec4f(MATRIX2 * progressBarMask, 1);
+            poligon = vec4f(MATRIX3 * poliMask, 1);
+            stringColor = MATRIX4 * stringMask;
             stringColor2 = stringMask2 * GREEN;
         }
         case 2 { // artwork