before_redesign

src/components/meshBackground.vue

@@ -1,138 +1,106 @@
 <template>
-  <div id="background-canvas-wrapper" class="flex fit column bg-base">
-    <canvas id="canvas"/>
+  <div
+    id="background-canvas-wrapper"
+    class="w100 no-scroll overflow-hidden bg-base position-relative"
+    style="height: 100vh;"
+    >
+    <canvas id="canvas" class="absolute-top"/>
   </div>
 </template>
 
-<script setup> // eslint-disable-line
+<script setup lang="ts">
+  import { onMounted, onUnmounted } from 'vue'
 
-import { onMounted } from 'vue'
-
-onMounted(() => {
-  const canvasBody = document.getElementById("canvas")
-  const drawArea = canvasBody.getContext("2d")
-
-  const opts = { 
-    particleColor: "rgb(200,200,200)",
-    lineColor: "rgb(200,200,200)",
-    particleAmount: 30,
-    defaultSpeed: 0.1,
-    variantSpeed: 1,
-    defaultRadius: 2,
-    variantRadius: 2,
-    linkRadius: 200
-  }
-
-  const delay = 200
-  let tid
-  const rgb = opts.lineColor.match(/\d+/g)
-  let w
-  let h
-  const particles = []
-
-  function resizeReset () {
-    w = canvasBody.width = window.innerWidth
-    h = canvasBody.height = window.innerHeight
-  }
-
-  function deBouncer () {
-    clearTimeout(tid)
-    tid = setTimeout(function () { resizeReset() }, delay)
-  }
-
-  function checkDistance (x1, y1, x2, y2) { 
-    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
-  }
-
-  function setup () { 
-    resizeReset()
-    for (let i = 0; i < opts.particleAmount; i++) {
-      particles.push(new Particle())
+  onMounted(() => {
+    const canvas = document.getElementById("canvas") as HTMLCanvasElement
+    const ctx = canvas.getContext("2d")!
+    const opts = {
+      pColor: "rgb(200,200,200)",
+      lRGB: "200,200,200",
+      amt: 20,
+      defS: 0.1,
+      varS: 1,
+      defR: 2,
+      varR: 2,
+      linkR2: 200 ** 2
     }
-    window.requestAnimationFrame(loop)
-  }
 
-  function loop() { 
-    window.requestAnimationFrame(loop)
-    drawArea.clearRect(0, 0, w, h)
-    for (let i = 0; i < particles.length; i++) {
-      particles[i].update()
-      particles[i].draw()
-    }
-    for (let i = 0; i < particles.length; i++) {
-      linkPoints(particles[i], particles)
-    }
-  }
+    let w: number, h: number, aid: number
+    const particles: Particle[] = []
 
-  function linkPoints (point1, hubs) { 
-    for (let i = 0; i < hubs.length; i++) {
-      const distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y)
-      const opacity = 1 - distance / opts.linkRadius
-      if (opacity > 0) { 
-        drawArea.lineWidth = 0.5
-        drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`
-        drawArea.beginPath()
-        drawArea.moveTo(point1.x, point1.y)
-        drawArea.lineTo(hubs[i].x, hubs[i].y)
-        drawArea.closePath()
-        drawArea.stroke()
+    const resize = () => {
+      w = canvas.width = window.innerWidth
+      h = canvas.height = window.innerHeight
+    }
+
+    class Particle {
+      x = Math.random() * w
+      y = Math.random() * h
+      s = opts.defS + Math.random() * opts.varS
+      a = Math.random() * Math.PI * 2
+      vx = Math.cos(this.a) * this.s
+      vy = Math.sin(this.a) * this.s
+      r = opts.defR + Math.random() * opts.varR
+
+      update() {
+        if (this.x + this.vx > w || this.x + this.vx < 0) this.vx *= -1
+        if (this.y + this.vy > h || this.y + this.vy < 0) this.vy *= -1
+        this.x += this.vx
+        this.y += this.vy
+        ctx.beginPath()
+        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
+        ctx.fillStyle = opts.pColor
+        ctx.fill()
       }
     }
-  }
 
-  function Particle () { 
-    this.x = Math.random() * w
-    this.y = Math.random() * h
-    this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed
-    this.directionAngle = Math.floor(Math.random() * 360)
-    this.color = opts.particleColor
-    this.radius = opts.defaultRadius + Math.random() * opts. variantRadius
-    this.vector = {
-      x: Math.cos(this.directionAngle) * this.speed,
-      y: Math.sin(this.directionAngle) * this.speed
-    }
-    this.update = function () { 
-      this.border()
-      this.x += this.vector.x
-      this.y += this.vector.y
-    }
-    this.border = function () { 
-      if (this.x >= w || this.x <= 0) { 
-        this.vector.x *= -1
+    resize()
+    for (let i = 0; i < opts.amt; i++) particles.push(new Particle())
+
+    const loop = () => {
+      ctx.clearRect(0, 0, w, h)
+      particles.forEach(p => p.update())
+
+      for (let i = 0; i < particles.length; i++) {
+        const p1 = particles[i]
+        for (let j = i + 1; j < particles.length; j++) {
+          const p2 = particles[j]
+          if (!p1 || !p2) continue
+          
+          const dx = p1.x - p2.x
+          const dy = p1.y - p2.y
+          const d2 = dx * dx + dy * dy
+          if (d2 < opts.linkR2) {
+            ctx.strokeStyle = `rgba(${opts.lRGB}, ${1 - d2 / opts.linkR2})`
+            ctx.lineWidth = 0.5
+            ctx.beginPath()
+            ctx.moveTo(p1.x, p1.y)
+            ctx.lineTo(p2.x, p2.y)
+            ctx.stroke()
+          }
+        }
       }
-      if (this.y >= h || this.y <= 0) {
-        this.vector.y *= -1
-      }
-      if (this.x > w) this.x = w
-      if (this.y > h) this.y = h
-      if (this.x < 0) this.x = 0
-      if (this.y < 0) this.y = 0
+      aid = requestAnimationFrame(loop)
     }
-    this.draw = function () { 
-      drawArea.beginPath()
-      drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2)
-      drawArea.closePath()
-      drawArea.fillStyle = this.color
-      drawArea.fill()
-    }
-  }
 
-  window.addEventListener("resize", function () { deBouncer() })
-  resizeReset()
-  setup()
-})
+    window.addEventListener("resize", resize)
+    loop()
 
+    onUnmounted(() => {
+      window.removeEventListener("resize", resize)
+      cancelAnimationFrame(aid)
+    })
+  })
 </script>
 
 <style>
-#background-canvas-wrapper {
-  position: absolute !important;
-  display: block;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  margin: 0;
-  min-height: 100%;
-}
-
+  #background-canvas-wrapper {
+    position: absolute !important;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    margin: 0;
+    height: 100vh !important;
+  }
 </style>