added stars to most pages for a less empty bg

stars.js

@@ -0,0 +1,144 @@
+const starfallCanvas = document.getElementById("starfallCanvas")
+starfallCanvas.width = window.innerWidth
+starfallCanvas.height = window.innerHeight
+
+let lastUpd = Date.now()
+
+const starfallCtx = starfallCanvas.getContext("2d")
+
+
+class Starfall {
+  constructor() {
+    this.pos = {x: 0, y: 0}
+    this.vel = {x: 0, y: 0}
+  }
+
+  generate() {
+    const dir = randomBool(0.5)
+    this.pos.x = dir ? -50 : pxWidth + 50
+    this.pos.y = randomInt(-starfallCanvas.height / 2, starfallCanvas.height / 2)
+    this.vel.x = dir ? randomFloat(240, 580) : randomFloat(-580, -240)
+    this.vel.y = randomFloat(20, 80)
+  }
+
+  draw() {
+		const LEN_X = this.vel.x / 15
+		const LEN_Y = this.vel.y / 15
+
+    // very expensive but idk how to make it less expensive (thanks canvas)
+    drawPixelLine(
+      this.pos.x,
+      this.pos.y,
+      this.pos.x - LEN_X,
+      this.pos.y - LEN_Y
+    )
+  }
+
+  stepAnimation(dt) {
+    this.pos.x += this.vel.x * dt
+    this.pos.y += this.vel.y * dt
+  }
+}
+
+
+function drawPixelLine(fromX, fromY, toX, toY) {
+  const pxInflate = 0.1
+
+  const dx = Math.abs(toX - fromX)
+  const dy = Math.abs(toY - fromY)
+  const sx = fromX < toX ? 1 : -1
+  const sy = fromY < toY ? 1 : -1
+  let err = dx - dy
+
+  let x = fromX
+  let y = fromY
+
+  starfallCtx.beginPath()
+
+  const steps = Math.max(dx, dy)
+
+  for (let i = 0; i <= steps; i++) {
+    const alpha = i == 0 ? 1 : 0.1 * (1 - i / steps)
+    starfallCtx.fillStyle = `rgba(255, 255, 255, ${alpha})`
+
+    starfallCtx.rect(
+      clampNearest(x * pxDensity, pxDensity) - 0.5,
+      clampNearest(y * pxDensity, pxDensity) - 0.5,
+      pxInflate + pxDensity,
+      pxInflate + pxDensity
+    )
+
+    const e2 = 2 * err
+    if (e2 > -dy) {
+      err -= dy
+      x += sx
+    }
+    if (e2 < dx) {
+      err += dx
+      y += sy
+    }
+
+    starfallCtx.fill()
+  }
+}
+
+
+let allStarfalls = []
+
+function animateStarfalls() {
+	let now = Date.now()
+
+	const MILLISEC = 1000
+	let dt = (now - lastUpd) / MILLISEC
+	lastUpd = now
+
+  if (!isAnimating) { return }
+
+  starfallCtx.clearRect(0, 0, starfallCanvas.width, starfallCanvas.height)
+
+  let shouldGenerate = randomBool(0.01)
+
+  if (shouldGenerate) {
+    let newStarfall = new Starfall()
+    newStarfall.generate()
+    allStarfalls.push(newStarfall)
+  }
+
+  for (let starfall of allStarfalls) {
+    if (starfall.pos.x < -50 || starfall.pos.x > pxWidth + 50) {
+      allStarfalls.splice(allStarfalls.indexOf(starfall), 1)
+      continue
+    }
+
+    starfall.stepAnimation(dt)
+    starfall.draw()
+  }
+}
+
+
+function startStarfall() {
+  animateStarfalls()
+
+  requestAnimationFrame(startStarfall)
+}
+
+
+function addStars() {
+  let starNoise = document.getElementById("starNoise")
+  let randX = randomInt(0, 256)
+  let randY = randomInt(0, 256)
+
+  debugPrint("Star pos", `[x: ${randX}, y: ${randY}]`)
+
+  starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))`
+  starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))`
+}
+
+
+function loadingScreenStars() {
+	setLoadingProgress("Adding stars...")
+  addStars()
+
+  setLoadingProgress("Starting starfall animation...")
+  startStarfall()
+}