more URL stuff

greggman · Apr 30, 2024 · 8c0565c · 8c0565c
1 parent cd247df
commit 8c0565c
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -59,7 +59,15 @@
 <script defer type="module" src="src/js/browser.js"></script>
   </head>
   <body>
-    <div id="banner"><div>vertexshaderart.com</div><a href="https://github.com/greggman/vertexshadeart.com">github</a></div>
+    <div id="banner">
+      <div>
+        <div>vertexshaderart.com</div>
+      </div>
+      <div>
+        <a href="src">new</a>
+        <a href="https://github.com/greggman/vertexshadeart.com">github</a>
+      </div>
+    </div>
     <div id="search"><input type="text" placeholder="?"></div>
     <div id="toc"></div>
   </body>

diff --git a/src/js/main.js b/src/js/main.js
@@ -551,9 +551,9 @@ define([
 
       s.sets = {
         default: {
-          num: 10000,
-          mode: "LINES",
-          sound: "",
+          num: 100000,
+          mode: "POINTS",
+          sound: "random",
           lineSize: "NATIVE",
           backgroundColor: [0, 0, 0, 1],
           shader: getShader("vs").trim(),
@@ -1266,21 +1266,7 @@ define([
       settings.shader = e.userData;
       setShaderSuccessStatus(true);
       clearLineErrors();
-      if (s_firstCompile) {
-        s_firstCompile = false;
-        return;
-      }
-      const art = {
-        settings,
-      };
-      const data = JSON.stringify(art);
-      compressor.compress(data, 1, function(bytes) {
-        const hex = base64.encode(bytes);
-        const params = new URLSearchParams({
-          s: hex
-        });
-        parent.history.replaceState({}, '', `/src/#${params.toString()}`);
-      });
+      updateURL();
     });
     s.programManager.on('failure', function(errors) {
       setShaderSuccessStatus(false);
@@ -1407,6 +1393,37 @@ define([
       },
     };
 
+    let s_updatingURL = false;
+    let s_urlNeedsUpdate = false;
+    function updateURL() {
+      if (s_firstCompile) {
+        s_firstCompile = false;
+        return;
+      }
+      if (s_updatingURL) {
+        s_urlNeedsUpdate = true;
+        return;
+      }
+      s_updatingURL = true;
+      const art = {
+        settings,
+      };
+
+      const data = JSON.stringify(art);
+      compressor.compress(data, 1, function(bytes) {
+        const hex = base64.encode(bytes);
+        const params = new URLSearchParams({
+          s: hex
+        });
+        parent.history.replaceState({}, '', `/src/#${params.toString()}`);
+        s_updatingURL = false;
+        if (s_urlNeedsUpdate) {
+          s_urlNeedsUpdate = false;
+          updateURL();
+        }
+      });
+    }
+
     function setUIMode(mode, animate) {
       mode = mode || '#ui-2v';
       uiModes[mode](animate);
@@ -1439,6 +1456,7 @@ define([
 
     function updateBackgroundColor(e) {
       settings.backgroundColor = cssParse.parseCSSColor(e.target.value, true);
+      updateURL();
     }
     var colorElem = $("#background");
     on(colorElem, 'change', updateBackgroundColor);
@@ -1451,6 +1469,7 @@ define([
       var num = clamp(1, g.maxCount, parseInt(e.target.value)) | 0;
       numRangeElem.value = num;
       settings.num = num;
+      updateURL();
     }
     on(numElem, 'change', handleNumEdit);
     on(numElem, 'input', handleNumEdit);
@@ -1459,17 +1478,20 @@ define([
       var num = parseInt(e.target.value);
       numElem.value = num;
       settings.num = num;
+      updateURL();
     });
 
     var modeElem = $("#mode");
     on(modeElem, 'change', function(e) {
       settings.mode = e.target.value.toUpperCase();
       g.mode = validModes[settings.mode];
+      updateURL();
     });
 
     var sizeElem = $("#size");
     on(sizeElem, 'change', function(e) {
       settings.lineSize = e.target.value.toUpperCase();
+      updateURL();
     });
 
     var timeElem = $("#time");

diff --git a/src/js/shaders.js b/src/js/shaders.js
@@ -52,10 +52,7 @@ varying vec4 v_color;
   `,
   // ===========================================================
   "vs": `
-#define PI radians(180.)
-#define NUM_SEGMENTS 21.0
-#define NUM_POINTS (NUM_SEGMENTS * 2.0)
-#define STEP 5.0
+#define PI radians(180.0)
 
 vec3 hsv2rgb(vec3 c) {
   c = vec3(c.x, clamp(c.yz, 0.0, 1.0));
@@ -65,25 +62,25 @@ vec3 hsv2rgb(vec3 c) {
 }
 
 void main() {
-  float point = mod(floor(vertexId / 2.0) + mod(vertexId, 2.0) * STEP, NUM_SEGMENTS);
-  float count = floor(vertexId / NUM_POINTS);
-  float offset = count * 0.02;
-  float angle = point * PI * 2.0 / NUM_SEGMENTS + offset;
-  float radius = 0.2;
-  float c = cos(angle + time) * radius;
-  float s = sin(angle + time) * radius;
-  float orbitAngle = count * 0.01;
-  float oC = cos(orbitAngle + time * count * 0.01) * sin(orbitAngle);
-  float oS = sin(orbitAngle + time * count * 0.01) * sin(orbitAngle);
-
-  vec2 aspect = vec2(1, resolution.x / resolution.y);
-  vec2 xy = vec2(
-      oC + c,
-      oS + s);
-  gl_Position = vec4(xy * aspect + mouse * 0.1, 0, 1);
-
-  float hue = (time * 0.01 + count * 1.001);
-  v_color = vec4(hsv2rgb(vec3(hue, 1, 1)), 1);
+  float across = floor(sqrt(vertexCount));
+  float down = floor(vertexCount / across);
+  
+  float x = mod(vertexId, across);
+  float y = floor(vertexId / across);
+  
+  float u = x / across;
+  float v = y / across;
+  
+  vec2 xy = vec2(u * 2.0 - 1.0, v * 2.0 - 1.0);
+  gl_Position = vec4(xy, 0, 1);
+  gl_PointSize = max(0.1, resolution.x / across);
+  
+  float f = atan(xy.x, xy.y);
+  float h = length(xy);
+  float s = texture2D(sound, vec2(abs(f / PI) * 0.5, h * 0.25)).a;
+
+  float hue = (time * 0.01 + abs(f) * 0.04);
+  v_color = vec4(hsv2rgb(vec3(hue, 1, pow(s, 2.))), 1);
 }
   `,
   // ===========================================================