From f74c88b54ebadbe7117d30e488ede69151e1ae41 Mon Sep 17 00:00:00 2001
From: arne <noreply@null.arnes.space>
Date: Sat, 27 Jan 2024 13:21:35 +0100
Subject: [PATCH] Use nicer gradient fill for ripples

---
 client/src/main.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/main.ts b/client/src/main.ts
index c365a61..80a83ea 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -127,13 +127,21 @@ const render = (state: State, ctx: CanvasRenderingContext2D) => {
   for (const particle of state.particles) {
     const progress = (particle.age / MAX_AGE)
     const opacity = Math.min(1, Math.pow(1-progress, 3)) * (particle.maxRadius / MAX_RADIUS)
+    const [x, y] = particle.position
+    const scaledX = x * document.body.offsetWidth
+    const scaledY = y * document.body.offsetHeight
+    const radius = (progress * (particle.maxRadius - MIN_RADIUS)) + MIN_RADIUS
+    const gradient = ctx.createRadialGradient(scaledX, scaledY, 0, scaledX, scaledY, radius)
+    gradient.addColorStop(0, `rgba(120, 120, 240, 0)`)
+    gradient.addColorStop(0.33, `rgba(120, 120, 240, 0)`)
+    gradient.addColorStop(1, `rgba(120, 120, 240, ${opacity/5})`)
 
     ctx.beginPath()
-    ctx.strokeStyle = `rgba(40, 40, 40, ${opacity})`
-    const [x, y] = particle.position
-    const radius = (progress * (particle.maxRadius - MIN_RADIUS)) + MIN_RADIUS
-    ctx.ellipse(x * document.body.offsetWidth, y * document.body.offsetHeight, radius, radius, 0, 0, Math.PI * 2)
+    ctx.fillStyle = gradient
+    ctx.strokeStyle = `rgba(255,255,255,0)`
+    ctx.ellipse(scaledX, scaledY, radius, radius, 0, 0, Math.PI * 2)
     ctx.stroke()
+    ctx.fill()
   }
 }