v4

src/components/meshBackground.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="background-canvas-wrapper" class="flex fit column">
+    <canvas id="canvas"/>
+  </div>
+</template>
+
+<script setup> // eslint-disable-line
+
+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())
+    }
+    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)
+  }
+}
+
+
+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()
+    }
+  }
+}
+
+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;
+    }
+    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
+  }
+  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()
+})
+
+</script>
+
+<style>
+#background-canvas-wrapper {
+  position: absolute !important;
+  display: block;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: var(--q-primary);
+  margin: 0;
+  min-height: 100%;
+}
+
+</style>