compost.party/pond
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use nicer gradient fill for ripples

Browse source
This commit is contained in:
arne 2024-01-27 13:21:35 +01:00
commit f74c88b54e
1 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/main.ts
View file

@ -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()
}
}