A more intuitive scheme for config.js vars

static/js/config.js.example

@@ -1,4 +1,4 @@
 const MAX_DIST = 3500;
 const MIN_DIST = 1000;
-const VID_BLUR_FACTOR = MAX_DIST/23.0; // float
-const TICKER_BLUR_FACTOR = MAX_DIST/5.0; // float
+const VID_BLUR_WHEN_CLOSE = 23.0; // float
+const TICKER_BLUR_WHEN_FAR = 5.0; // float

templates/index.html

@@ -55,14 +55,15 @@
   };
   async function updateDistance() {
     var dist = await getDistance();
-    var vidblur = 0, tickerblur = 8;
+    var vidblur = 0, tickerblur = TICKER_BLUR_WHEN_FAR;
     if (dist>MIN_DIST && dist<MAX_DIST) {
-      vidblur = parseInt((MAX_DIST-dist)/VID_BLUR_FACTOR);
-      tickerblur = parseInt(dist/TICKER_BLUR_FACTOR);
+      vidblur = parseInt(VID_BLUR_WHEN_CLOSE*(MAX_DIST-dist)/(MAX_DIST-MIN_DIST));
+      tickerblur = parseInt(TICKER_BLUR_WHEN_FAR*dist/(MAX_DIST-MIN_DIST));
     }
     if (dist<2*MIN_DIST) {
       tickerblur = 0;
     }
+    // console.log(vidblur,tickerblur);
     // console.log(`${vidblur}, ${tickerblur}`);
     document.getElementById("the-video").style.filter=`blur(${vidblur}px)`;
     document.getElementById("the-ticker").style.filter=`blur(${tickerblur}px)`;