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

Experiment with window-sized scaling

Browse source
This commit is contained in:
arne 2024-01-27 13:32:20 +01:00
commit 15009d07bc
2 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

21
client/src/main.ts
View file

@ -9,7 +9,7 @@ type Message =
const ctx = canvas.getContext('2d')! const ctx = canvas.getContext('2d')!
const MIN_RADIUS = 20 const MIN_RADIUS = 20
const MAX_RADIUS = 200 const MAX_RADIUS = Math.min(window.innerHeight, window.innerWidth) / 6
const MAX_AGE = 1000 // in milliseconds const MAX_AGE = 1000 // in milliseconds
type Point = [number, number] type Point = [number, number]
@ -50,8 +50,8 @@ canvas.addEventListener('mousedown', (e) => {
// TODO Normalize x and y coords // TODO Normalize x and y coords
const radius = MAX_RADIUS const radius = MAX_RADIUS
makeRipple([ makeRipple([
e.clientX / document.body.offsetWidth, e.clientX / window.innerWidth,
e.clientY / document.body.offsetHeight e.clientY / window.innerHeight
], radius) ], radius)
}) })
@ -69,15 +69,15 @@ function* minDist(dist: number) {
} }
} }
const hasSpace = minDist(70) const hasSpace = minDist(MAX_RADIUS / 6)
canvas.addEventListener('mousemove', (e) => { canvas.addEventListener('mousemove', (e) => {
const shouldSpawn = hasSpace.next().value! const shouldSpawn = hasSpace.next().value!
if (shouldSpawn([e.clientX, e.clientY])) { if (shouldSpawn([e.clientX, e.clientY])) {
const radius = MAX_RADIUS / 3*2 const radius = MAX_RADIUS / 3*2
makeRipple([ makeRipple([
e.clientX / document.body.offsetWidth, e.clientX / window.innerWidth,
e.clientY / document.body.offsetHeight e.clientY / window.innerHeight
], radius) ], radius)
} }
}) })
@ -128,8 +128,8 @@ const render = (state: State, ctx: CanvasRenderingContext2D) => {
const progress = (particle.age / MAX_AGE) const progress = (particle.age / MAX_AGE)
const opacity = Math.min(1, Math.pow(1-progress, 3)) * (particle.maxRadius / MAX_RADIUS) const opacity = Math.min(1, Math.pow(1-progress, 3)) * (particle.maxRadius / MAX_RADIUS)
const [x, y] = particle.position const [x, y] = particle.position
const scaledX = x * document.body.offsetWidth const scaledX = x * window.innerWidth
const scaledY = y * document.body.offsetHeight const scaledY = y * window.innerHeight
const radius = (progress * (particle.maxRadius - MIN_RADIUS)) + MIN_RADIUS const radius = (progress * (particle.maxRadius - MIN_RADIUS)) + MIN_RADIUS
const gradient = ctx.createRadialGradient(scaledX, scaledY, 0, scaledX, scaledY, radius) const gradient = ctx.createRadialGradient(scaledX, scaledY, 0, scaledX, scaledY, radius)
gradient.addColorStop(0, `rgba(120, 120, 240, 0)`) gradient.addColorStop(0, `rgba(120, 120, 240, 0)`)
@ -156,9 +156,10 @@ const loop = () => {
} }
// start everything // start everything
// FIXME: Make sure to resize the canvas on orientationchange
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
canvas.width = canvas.parentElement!.clientWidth ctx.canvas.width = window.innerWidth
canvas.height = canvas.parentElement!.clientHeight ctx.canvas.height = window.innerHeight
ctx.translate(0.5, 0.5) ctx.translate(0.5, 0.5)
loop() loop()
}) })

7
client/src/style.css
View file

@ -1,10 +1,10 @@
html, html,
body { body {
min-width: 100wh;
min-height: 100vh;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
font-family: sans-serif;
background: #efefef
} }
#presence-info { #presence-info {
@ -15,4 +15,7 @@ body {
} }
canvas { canvas {
display: block;
width: 100vw;
height: 100vh;
} }