update blur effect

src/components/MainSection.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { setBlurEffect } from '~/scripts/background-blur'
+import { createBlurEffect } from '~/scripts/background-blur'
 
 onMounted(() => {
-  setBlurEffect('.bg-image')
+  createBlurEffect('.bg-image')
 })
 </script>
 

src/scripts/background-blur.js

@@ -1,12 +1,12 @@
-export function setBlurEffect(selector) {
-  let a
-  let h
+export function createBlurEffect(selector) {
+  let bgCanvas
+  let blurCanvas
   let k
   let g
   let c
   let n = null
   let r = null
-  const f = []
+  const mouseCoordinates = []
   let u = false
   let q = true
   function b() {
@@ -17,78 +17,78 @@ export function setBlurEffect(selector) {
       u = Date.now()
       q || m()
     })
-    e()
+    drawBlurEffect()
   }
 
-  function e() {
-    a = document.createElement('canvas')
-    a.className = 'animated-bg'
-    a.width = window.innerWidth
-    a.height = window.innerHeight
-    document.querySelector(selector).appendChild(a)
-    h = document.createElement('canvas')
-    h.width = window.innerWidth
-    h.height = window.innerHeight
+  function drawBlurEffect() {
+    bgCanvas = document.createElement('canvas')
+    bgCanvas.className = 'animated-bg'
+    bgCanvas.width = window.innerWidth
+    bgCanvas.height = window.innerHeight
+    document.querySelector(selector).appendChild(bgCanvas)
+    blurCanvas = document.createElement('canvas')
+    blurCanvas.width = window.innerWidth
+    blurCanvas.height = window.innerHeight
 
-    if (a.getContext && a.getContext('2d')) {
-      k = a.getContext('2d')
-      g = h.getContext('2d')
+    if (bgCanvas.getContext && bgCanvas.getContext('2d')) {
+      k = bgCanvas.getContext('2d')
+      g = blurCanvas.getContext('2d')
       g.lineCap = 'round'
       g.shadowColor = '#CCC'
-      g.shadowBlur = navigator.userAgent.includes('Firefox') ? 0 : 30
+      g.shadowBlur = navigator.userAgent.includes('Firefox') ? 0 : 20
       c = new Image(selector)
-      let d = getBackgroundImage(selector)
-      if (d) {
+      let backgroundImage = loadBackgroundImage(selector)
+      if (backgroundImage) {
         c.addEventListener('load', m, { once: true })
-        d = d.replace(/url\((.*)\)/, '$1').replace(/["']/gi, '').replace(/\.jpg/, '_color.jpg')
-        c.setAttribute('src', d)
+        backgroundImage = backgroundImage.replace(/url\((.*)\)/, '$1').replace(/["']/gi, '').replace(/\.jpg/, '_color.jpg')
+        c.setAttribute('src', backgroundImage)
       }
     }
   }
 
-  function getBackgroundImage(selector) {
+  function loadBackgroundImage(selector) {
     const el = document.querySelector(selector)
     const style = el.currentStyle || window.getComputedStyle(el, false)
     return style.backgroundImage.slice(4, -1).replace(/"/g, '')
   }
 
   function m() {
     let d
-    let b = Date.now()
-    q = b > u + 1500 ? !1 : !0
-    n && q && f.splice(0, 0, {
-      time: b,
+    let initializeBlurEffect = Date.now()
+    q = !(initializeBlurEffect > (u + 1500))
+    n && q && mouseCoordinates.splice(0, 0, {
+      time: initializeBlurEffect,
       x: n,
-      y: r - 100,
+      y: r,
     })
-    for (d = 0; d < f.length;) b - f[d].time > 1e3 ? f.splice(d, f.length) : d++
-    f.length > 0 && window.l(m)
-    g.clearRect(0, 0, h.width, h.height)
-    for (d = 1; d < f.length; d++) {
-      const e = Math.sqrt((f[d].x - f[d - 1].x) ** 2 + (f[d].y - f[d - 1].y) ** 2)
-      g.strokeStyle = `rgba(0,0,0,${Math.max(1 - (b - f[d].time) / 1e3, 0)})`
-      g.lineWidth = 50 + 75 * Math.max(1 - e / 50, 0)
+    for (d = 0; d < mouseCoordinates.length;) initializeBlurEffect - mouseCoordinates[d].time > 2000 ? mouseCoordinates.splice(d, mouseCoordinates.length) : d++
+    mouseCoordinates.length > 0 && window.l(m)
+    g.clearRect(0, 0, blurCanvas.width, blurCanvas.height)
+    for (d = 1; d < mouseCoordinates.length; d++) {
+      const e = Math.sqrt((mouseCoordinates[d].x - mouseCoordinates[d - 1].x) ** 2 + (mouseCoordinates[d].y - mouseCoordinates[d - 1].y) ** 2)
+      g.strokeStyle = `rgba(0,0,0,${Math.max(1 - (initializeBlurEffect - mouseCoordinates[d].time) / 2000, 0)})`
+      g.lineWidth = 50 + 50 * Math.max(1 - e / 50, 0)
       g.beginPath()
-      g.moveTo(f[d - 1].x, f[d - 1].y)
-      g.lineTo(f[d].x, f[d].y)
+      g.moveTo(mouseCoordinates[d - 1].x, mouseCoordinates[d - 1].y)
+      g.lineTo(mouseCoordinates[d].x, mouseCoordinates[d].y)
       g.stroke()
     }
-    d = a.width
-    b = a.width / c.naturalWidth * c.naturalHeight
-    if (b < a.height) {
-      b = a.height
-      d = a.height / c.naturalHeight * c.naturalWidth
+    d = bgCanvas.width
+    initializeBlurEffect = bgCanvas.width / c.naturalWidth * c.naturalHeight
+    if (initializeBlurEffect < bgCanvas.height) {
+      initializeBlurEffect = bgCanvas.height
+      d = bgCanvas.height / c.naturalHeight * c.naturalWidth
     }
-    k.drawImage(c, 0, 0, d, b)
+    k.drawImage(c, 0, 0, d, initializeBlurEffect)
     k.globalCompositeOperation = 'destination-in'
-    k.drawImage(h, 0, 0)
+    k.drawImage(blurCanvas, 0, 0)
     k.globalCompositeOperation = 'source-over'
   }
 
   'createTouch' in document || b()
   window.l = (function () {
-    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (a) {
-      window.setTimeout(a, 1e3 / 60)
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function () {
+      window.setTimeout(setBlurEffect, 17)
     }
   }())
 }