{"version":3,"file":"Particles-ff90b8b6.js","sources":["../../../resources/js/Pages/Landing/partials/Particles.vue"],"sourcesContent":["<template>\n  <div ref=\"canvasContainerRef\" aria-hidden=\"true\">\n    <canvas ref=\"canvasRef\"></canvas>\n  </div>\n</template>\n\n<script>\nimport { ref, onMounted, onBeforeUnmount, reactive, watch } from 'vue'\nimport useMousePosition from '../utils/MousePosition'\n\nexport default {\n  name: 'Particles',\n  props: {\n    quantity: {\n      type: Number,\n      default: 30,\n    },\n    staticity: {\n      type: Number,\n      default: 50,\n    },\n    ease: {\n      type: Number,\n      default: 50,\n    },\n    refresh: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const canvasRef = ref(null)\n    const canvasContainerRef = ref(null)\n    const context = ref(null)\n    const circles = ref([])\n    const mousePosition = useMousePosition()\n    const mouse = reactive({ x: 0, y: 0 })\n    const canvasSize = reactive({ w: 0, h: 0 })\n    const dpr = window.devicePixelRatio || 1\n\n    onMounted(() => {\n      if (canvasRef.value) {\n        context.value = canvasRef.value.getContext('2d')\n      }\n      initCanvas()\n      animate()\n      window.addEventListener('resize', initCanvas)\n    })\n\n    onBeforeUnmount(() => {\n      window.removeEventListener('resize', initCanvas)\n    })\n\n    watch(\n      () => mousePosition.value,\n      () => {\n        onMouseMove()\n      }\n    )\n\n    watch(\n      () => props.refresh,\n      () => {\n        initCanvas()\n      }\n    )\n\n    const initCanvas = () => {\n      resizeCanvas()\n      drawParticles()\n    }\n\n    const onMouseMove = () => {\n      if (canvasRef.value) {\n        const rect = canvasRef.value.getBoundingClientRect()\n        const { w, h } = canvasSize\n        const x = mousePosition.value.x - rect.left - w / 2\n        const y = mousePosition.value.y - rect.top - h / 2\n        const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2\n        if (inside) {\n          mouse.x = x\n          mouse.y = y\n        }\n      }\n    }\n\n    const resizeCanvas = () => {\n      if (canvasContainerRef.value && canvasRef.value && context.value) {\n        circles.value.length = 0\n        canvasSize.w = canvasContainerRef.value.offsetWidth\n        canvasSize.h = canvasContainerRef.value.offsetHeight\n        canvasRef.value.width = canvasSize.w * dpr\n        canvasRef.value.height = canvasSize.h * dpr\n        canvasRef.value.style.width = canvasSize.w + 'px'\n        canvasRef.value.style.height = canvasSize.h + 'px'\n        context.value.scale(dpr, dpr)\n      }\n    }\n\n    const circleParams = () => {\n      const x = Math.floor(Math.random() * canvasSize.w)\n      const y = Math.floor(Math.random() * canvasSize.h)\n      const translateX = 0\n      const translateY = 0\n      const size = Math.floor(Math.random() * 2) + 1\n      const alpha = 0\n      const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1))\n      const dx = (Math.random() - 0.5) * 0.2\n      const dy = (Math.random() - 0.5) * 0.2\n      const magnetism = 0.1 + Math.random() * 4\n      return { x, y, translateX, translateY, size, alpha, targetAlpha, dx, dy, magnetism }\n    }\n\n    const drawCircle = (circle, update = false) => {\n      if (context.value) {\n        const { x, y, translateX, translateY, size, alpha } = circle\n        context.value.translate(translateX, translateY)\n        context.value.beginPath()\n        context.value.arc(x, y, size, 0, 2 * Math.PI)\n        context.value.fillStyle = `rgba(255, 255, 255, ${alpha})`\n        context.value.fill()\n        context.value.setTransform(dpr, 0, 0, dpr, 0, 0)\n\n        if (!update) {\n          circles.value.push(circle)\n        }\n      }\n    }\n\n    const clearContext = () => {\n      if (context.value) {\n        context.value.clearRect(0, 0, canvasSize.w, canvasSize.h)\n      }\n    }\n\n    const drawParticles = () => {\n      clearContext()\n      const particleCount = props.quantity\n      for (let i = 0; i < particleCount; i++) {\n        const circle = circleParams()\n        drawCircle(circle)\n      }\n    }\n\n    const remapValue = (value, start1, end1, start2, end2) => {\n      const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2\n      return remapped > 0 ? remapped : 0\n    }\n\n    const animate = () => {\n      clearContext()\n      circles.value.forEach((circle, i) => {\n        // Handle the alpha value\n        const edge = [\n          circle.x + circle.translateX - circle.size, // distance from left edge\n          canvasSize.w - circle.x - circle.translateX - circle.size, // distance from right edge\n          circle.y + circle.translateY - circle.size, // distance from top edge\n          canvasSize.h - circle.y - circle.translateY - circle.size, // distance from bottom edge\n        ]\n        const closestEdge = edge.reduce((a, b) => Math.min(a, b))\n        const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2))\n        if (remapClosestEdge > 1) {\n          circle.alpha += 0.02\n          if (circle.alpha > circle.targetAlpha) circle.alpha = circle.targetAlpha\n        } else {\n          circle.alpha = circle.targetAlpha * remapClosestEdge\n        }\n        circle.x += circle.dx\n        circle.y += circle.dy\n        circle.translateX += ((mouse.x / (props.staticity / circle.magnetism)) - circle.translateX) / props.ease\n        circle.translateY += ((mouse.y / (props.staticity / circle.magnetism)) - circle.translateY) / props.ease\n        // circle gets out of the canvas\n        if (\n          circle.x < -circle.size ||\n          circle.x > canvasSize.w + circle.size ||\n          circle.y < -circle.size ||\n          circle.y > canvasSize.h + circle.size\n        ) {\n          // remove the circle from the array\n          circles.value.splice(i, 1)\n          // create a new circle\n          const newCircle = circleParams()\n          drawCircle(newCircle)\n          // update the circle position\n        } else {\n          drawCircle(\n            {\n              ...circle,\n              x: circle.x,\n              y: circle.y,\n              translateX: circle.translateX,\n              translateY: circle.translateY,\n              alpha: circle.alpha,\n            },\n            true\n          )\n        }\n      })\n      window.requestAnimationFrame(animate)\n    }\n\n    return {\n      canvasRef,\n      canvasContainerRef,\n    }\n  },\n}\n</script>\n"],"names":["_sfc_main","props","canvasRef","ref","canvasContainerRef","context","circles","mousePosition","useMousePosition","mouse","reactive","canvasSize","dpr","onMounted","initCanvas","animate","onBeforeUnmount","watch","onMouseMove","resizeCanvas","drawParticles","rect","w","h","x","y","circleParams","translateX","translateY","size","alpha","targetAlpha","dx","dy","magnetism","drawCircle","circle","update","clearContext","particleCount","i","remapValue","value","start1","end1","start2","end2","remapped","closestEdge","a","b","remapClosestEdge","newCircle","_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode"],"mappings":"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"}