From 1e33614cf9d18206d0d4b7d72fba238a9fbba933 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sat, 20 Jun 2020 11:07:46 -0400
Subject: [PATCH] Improve the smoothness of the gradient

It now approximates an exponential falloff with 21 colorstops.
---
 xray.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/xray.js b/xray.js
index cc0b2a3..3494736 100644
--- a/xray.js
+++ b/xray.js
@@ -384,6 +384,10 @@ function setup() {
     console.log("Done");
 }
 
+function ease(t, k) {
+    return 1 - Math.pow(2, -k * (1 - t));
+}
+
 function updateOverlay(points, clicked) {
 
     const overlay = document.querySelector("#overlay");
@@ -412,8 +416,13 @@ function updateOverlay(points, clicked) {
             overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI);
         
             const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, Math.floor(radius * scale));
-            gradient.addColorStop((100-softness)/100, '#000000FF');
-            gradient.addColorStop(1, '#00000000');
+
+            const maxOpacity = ease(0, 1 / (0.001 + softness / 100));
+            
+            for (let t=0 ; t <= 20; t+= 1) {
+                let eased = ease(t/20.0, 1 / (0.001 + softness / 100)) / maxOpacity;
+                gradient.addColorStop(t/20.0, `rgba(0, 0, 0, ${eased}`);
+            }
             overlayCtx.fillStyle = gradient;
         
             overlayCtx.fill();