Use new library

package.json

@@ -45,7 +45,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.3",
     "sass-loader": "^9.0.3",
-    "sdf-2d": "^0.1.0-alpha",
+    "sdf-2d": "^0.1.2-alpha",
     "source-map-loader": "^1.1.0",
     "svg-url-loader": "^6.0.0",
     "terser-webpack-plugin": "^2.3.8",

src/index.html

@@ -28,7 +28,7 @@
       <img src="static/logo-white.svg" alt="logo" />
     </a>
     <code id="overlay"></code>
-    <button id="toggle-text"></button>
+    <button id="toggle-text">Loading…</button>
 
     <canvas id="main"></canvas>
 

src/index.ts

@@ -30,11 +30,17 @@ const overlay = document.querySelector('#overlay') as HTMLDivElement;
 
 let textVisible = false;
 const handleTextToggle = () => {
-  [info, overlay, errors].forEach(
-    (e) => (e.style.visibility = textVisible ? 'hidden' : 'inherit')
-  );
   textVisible = !textVisible;
+
+  [info, overlay, errors].forEach(
+    (e) => (e.style.visibility = textVisible ? 'inherit' : 'hidden')
+  );
   toggleButton.innerHTML = textVisible ? 'Hide text' : 'Show text';
+  if (textVisible) {
+    toggleButton.classList.remove('off');
+  } else {
+    toggleButton.classList.add('off');
+  }
 };
 toggleButton.addEventListener('click', handleTextToggle);
 handleTextToggle();

src/scenes/blob/blob.ts

@@ -5,14 +5,12 @@ export class Blob extends Drawable {
   public static descriptor: DrawableDescriptor = {
     sdf: {
       shader: `
-        uniform struct {
+        uniform vec2 headCenters[BLOB_COUNT];
-          vec2 headCenter;
+        uniform vec2 leftFootCenters[BLOB_COUNT];
-          vec2 leftFootCenter;
+        uniform vec2 rightFootCenters[BLOB_COUNT];
-          vec2 rightFootCenter;
+        uniform float headRadii[BLOB_COUNT];
-          float headRadius;
+        uniform float footRadii[BLOB_COUNT];
-          float footRadius;
+        //uniform float ks[BLOB_COUNT];
-          float k;
-        }[BLOB_COUNT] blobs;
 
         float smoothMin(float a, float b)
         {
@@ -27,9 +25,9 @@ export class Blob extends Drawable {
 
         void blobMinDistance(inout float minDistance, inout float color) {
           for (int i = 0; i < BLOB_COUNT; i++) {
-            float headDistance = circleDistance(blobs[i].headCenter, blobs[i].headRadius);
+            float headDistance = circleDistance(headCenters[i], headRadii[i]);
-            float leftFootDistance = circleDistance(blobs[i].leftFootCenter, blobs[i].footRadius);
+            float leftFootDistance = circleDistance(leftFootCenters[i], footRadii[i]);
-            float rightFootDistance = circleDistance(blobs[i].rightFootCenter, blobs[i].footRadius);
+            float rightFootDistance = circleDistance(rightFootCenters[i], footRadii[i]);
 
             float res = min(
               smoothMin(headDistance, leftFootDistance),
@@ -43,7 +41,13 @@ export class Blob extends Drawable {
       `,
       distanceFunctionName: 'blobMinDistance',
     },
-    uniformName: 'blobs',
+    propertyUniformMapping: {
+      footRadius: 'footRadii',
+      headRadius: 'headRadii',
+      rightFootCenter: 'rightFootCenters',
+      leftFootCenter: 'leftFootCenters',
+      headCenter: 'headCenters',
+    },
     uniformCountMacroName: 'BLOB_COUNT',
     shaderCombinationSteps: [1],
     empty: new Blob(vec2.fromValues(0, 0)),

src/scenes/rain/rain-scene.ts

@@ -37,7 +37,7 @@ export class RainScene implements Scene {
 
     this.renderer.setRuntimeSettings({
       ambientLight: vec3.fromValues(0.2, 0.2, 0.2),
-      tileMultiplier: 10,
+      tileMultiplier: 8,
     });
 
     for (let i = 0; i < (canvas.getBoundingClientRect().width / 1000) * 20; i++) {

src/styles/index.scss

@@ -84,9 +84,15 @@ body {
     cursor: pointer;
     padding: 0.2em 0.5rem;
     background: none;
+    user-select: none;
+
+    &.off:not(:hover) {
+      opacity: 0.5;
+    }
+    transition: opacity 200ms;
 
     @media (max-width: $breakpoint) {
-      width: 80px;
+      width: 90px;
     }
   }