feat: add wrapping in translate calculations

this avoids clustering of snowflakes on the side/top of the screen after
the window loses focus/is minimized for a while.

Author: cahilfoley

lib/Snowfall.js

@@ -77,7 +77,7 @@ export default class Snowfall extends React.Component<Props, State> {
       const ctx = canvas.getContext('2d')
       if (ctx) {
         ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight)
-        this.snowflakes.forEach(snowflake => snowflake.draw(canvas))
+        this.snowflakes.forEach(snowflake => snowflake.draw(canvas, ctx))
       }
     }
   }

lib/Snowflake.d.ts

@@ -70,8 +70,8 @@ class Snowflake {
 
   resized = () => (this.params.isResized = true)
 
-  draw = (canvas: HTMLCanvasElement) => {
-    const ctx = canvas.getContext('2d')
+  draw = (canvas: HTMLCanvasElement, inputCtx?: CanvasRenderingContext2D) => {
+    const ctx = inputCtx || canvas.getContext('2d')
     if (ctx) {
       ctx.beginPath()
       ctx.arc(this.params.x, this.params.y, this.params.radius, 0, 2 * Math.PI)
@@ -81,12 +81,16 @@ class Snowflake {
     }
   }
 
-  translate = (framesPassed: number = 1) => {
-    this.params.y += this.params.speed * framesPassed
-    this.params.x += this.params.wind * framesPassed
+  translate = (canvas: HTMLCanvasElement, framesPassed: number = 1) => {
+    const { x, y, wind, speed, nextWind, nextSpeed } = this.params
 
-    this.params.speed = lerp(this.params.speed, this.params.nextSpeed, 0.01)
-    this.params.wind = lerp(this.params.wind, this.params.nextWind, 0.01)
+    // Update current location, wrapping around if going off the canvas
+    this.params.x = (x + wind * framesPassed) % canvas.offsetWidth
+    this.params.y = (y + speed * framesPassed) % canvas.offsetHeight
+
+    // Update the wind and speed towards the desired values
+    this.params.speed = lerp(speed, nextSpeed, 0.01)
+    this.params.wind = lerp(wind, nextWind, 0.01)
 
     if (this.framesSinceLastUpdate++ > this.config.changeFrequency) {
       this.updateTargetParams()
@@ -99,19 +103,8 @@ class Snowflake {
     this.params.nextWind = random(...this.config.wind)
   }
 
-  handleOffScreen = (canvas: HTMLCanvasElement) => {
-    if (this.params.x > canvas.offsetWidth) {
-      this.params.x = 0
-    }
-
-    if (this.params.y > canvas.offsetHeight) {
-      this.params.y = 0
-    }
-  }
-
   update = (canvas: HTMLCanvasElement, framesPassed?: number) => {
-    this.translate(framesPassed)
-    this.handleOffScreen(canvas)
+    this.translate(canvas, framesPassed)
   }
 }
 

lib/Snowflake.js

@@ -1,3 +1,9 @@
+/**
+ * Enhanced random function, selects a random value between a minimum and maximum. If the values provided are both
+ * integers then the number returned will be an integer, otherwise the return number will be a decimal.
+ * @param min The minimum value
+ * @param max The maximum value
+ */
 export function random(min: number, max: number): number {
   const randomNumber = Math.random() * (max - min + 1) + min
 
@@ -8,6 +14,12 @@ export function random(min: number, max: number): number {
   }
 }
 
+/**
+ * Linear interpolation function to gradually step towards a target value
+ * @param start The current value
+ * @param end The target value
+ * @param normal The rate of change between 0 and 1 (0 = no change, 1 = instant)
+ */
 export function lerp(start: number, end: number, normal: number) {
   return (1 - normal) * start + normal * end
 }