smoothly move points after a resize

components/Background.vue

@@ -13,20 +13,21 @@ function dumbShit(e: MouseEvent) {
   }
 }
 
+const handleResizeDebounced = useDebounce(handleResize, 500)
+
 onMounted(() => {
   if (!canvas.value)
     return
-
   initCanvas(canvas.value)
-  initPoints()
 
   intervalId.value = setInterval(renderFrame, 16)
-  addEventListener('resize', useDebounce(handleResize, 250))
+  addEventListener('resize', handleResizeDebounced)
   addEventListener('mousemove', dumbShit)
 })
 onBeforeUnmount(() => {
   if (intervalId.value)
     clearInterval(intervalId.value)
+  removeEventListener('resize', handleResizeDebounced)
   removeEventListener('mousemove', dumbShit)
 })
 </script>

pages/index.vue

@@ -42,7 +42,7 @@
   <div>
     <h2>TODO:</h2>
     <ul>
-      <li>background: move render to worker thread, smoothly move points after a resize</li>
+      <li>background: move render to worker thread</li>
       <li>markdown articles for blogs and experience, filterable, sortable</li>
       <li>header for non-homepage pages</li>
       <li>duplicate site, but with real name and picture</li>

utils/point.ts

@@ -49,6 +49,12 @@ export class Point {
     })
   }
 
+  // ran after a resize to keep points relative to where they were before
+  scalePosition(widthScalar: number, heightScalar: number) {
+    this.x *= widthScalar
+    this.y *= heightScalar
+  }
+
   static all: Point[] = []
   static maxX: number
   static maxY: number

utils/pointCloud.ts

@@ -3,12 +3,27 @@ let canvas: HTMLCanvasElement
 let ctx: CanvasRenderingContext2D
 
 export function handleResize() {
+  const oldWidth = width
+  const oldHeight = height
+
+  // update canvas dimensions
   width = window.innerWidth
   height = window.innerHeight
   canvas.width = width
   canvas.height = height
-  initPoints()
+
+  // update max point positions
+  Point.maxX = width
+  Point.maxY = height
+  // scale point dimensions according to change
+  const widthScalar = width / oldWidth
+  const heightScalar = height / oldHeight
+  Point.all.forEach((point) => {
+    point.scalePosition(widthScalar, heightScalar)
+  })
+
   updateDrawVars()
+  renderFrame()
 }
 
 export function initCanvas(_canvas: HTMLCanvasElement) {
@@ -19,10 +34,11 @@ export function initCanvas(_canvas: HTMLCanvasElement) {
   canvas.width = width
   canvas.height = height
   ctx = canvas.getContext('2d')!
+  initPoints()
   initDrawVars(ctx)
 }
 
-export function initPoints(numPoints: number = 50, maxSpeed: number = 0.5) {
+function initPoints(numPoints: number = 50, maxSpeed: number = 0.5) {
   Point.all = []
   Point.maxX = width
   Point.maxY = height