Turned the background into a rain simulation

themes/warwick_portfolio/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 YOUR_NAME_HERE
+Copyright (c) 2023 Warwick New
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

themes/warwick_portfolio/assets/js/background.js

@@ -2,12 +2,12 @@
 let canvas = document.createElement("canvas");
 document.body.appendChild(canvas);
 canvas.style.cssText = `
-    background: var(--background);
-    position:fixed;
-    left:0;
-    top:0;
-    z-index:-99999;
-    `
+background: var(--background);
+position:fixed;
+left:0;
+top:0;
+z-index:-99999;
+`
 // set it's size
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
@@ -17,70 +17,84 @@ let context = canvas.getContext('2d');
 // this will be populated and used later
 drawableObjectList = [];
 
+class Splash {
+  constructor(distance, x, y) {
+    this.distance = distance;
+    this.x = x;
+    this.y = y;
+    this.time = 0;
+  }
+  draw() {
+    context.fillStyle = "#2a232300";
+    context.strokeStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`;
+
+    let splashSize = this.distance * (this.time/100);
+
+    context.beginPath();
+    context.ellipse(this.x, this.y, 100 * splashSize , 50 * splashSize, 0, 0, Math.PI * 2);
+    context.fill();
+    context.stroke();
+
+    if (this.time > 100) {
+     drawableObjectList = drawableObjectList.filter((item) => {return item !== this});
+    }
+
+    this.time += 1;
+  }
+}
 // this is the object that'll look cool
-class Point {
-    constructor() {
-        this.x = Math.random() * window.innerWidth;
-        this.y = Math.random() * window.innerHeight;
+class Drop {
+  constructor() {
+    this.x = Math.random() * window.innerWidth;
+    this.y = Math.random() * window.innerHeight;
 
-        this.dx = (Math.random()) - 0.5;
-        this.dy = (Math.random()) - 0.5;
-    }
-    draw() {
-        context.fillStyle = "#2a2323"
-        context.strokeStyle = "#2a2323"
-        // find and draw links
-        drawableObjectList.forEach((point) => {
-            if (point.x > this.x - 100 && point.x < this.x + 100 &&
-                point.y > this.y - 100 && point.y < this.y + 100) {
-                context.beginPath()
-                context.moveTo(this.x, this.y)
-                context.lineTo(point.x, point.y)
-                context.stroke();
-            }
-        });
-
-        // draw point
-        context.beginPath();
-        context.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
-        context.fill();
-        context.stroke();
-
-        // move point
-        this.x += this.dx;
-        this.y += this.dy;
-
-        // keep point in bounds
-        if (this.x > window.innerWidth || this.x < 0) {
-            this.dx *= -1
-        }
-        if (this.y > window.innerHeight || this.y < 0) {
-            this.dy *= -1
-        }
+    this.distance = Math.random();
+  }
+  draw() {
+    context.fillStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`;
+    context.strokeStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`;
+
+    // draw point
+    context.beginPath();
+    context.moveTo(this.x,this.y);
+    context.lineTo(this.x,this.y-this.distance*100);
+    context.stroke();
+    // move point
+    this.y += (this.distance + 0.3) * 4;
+
+    // keep point in bounds
+    if (this.y > window.innerHeight - (1 - this.distance) * 300) {
+      // Add splash
+      drawableObjectList.push(new Splash(this.distance, this.x, this.y))
+
+      this.y = 0
+      this.x = Math.random() * window.innerWidth;
+      this.distance = Math.random();
     }
+  }
 }
 
 // populate element array
 for (let i = 0; i < 100; i++) {
-    drawableObjectList.push(new Point());
+  drawableObjectList.push(new Drop());
 }
 
 function loop() {
-    // Loop and clear frame
-    requestAnimationFrame(loop);
-    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  // Loop and clear frame
+  requestAnimationFrame(loop);
+  context.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
-    // Draw objects.
+  // Draw objects.
     drawableObjectList.forEach((point) => {
-        point.draw();
+      point.draw();
     });
 
-    // Handle page size change
-    if (canvas.width != window.innerWidth) {
-        canvas.width = window.innerWidth;
-    }
-    if (canvas.height != window.innerHeight) {
-        canvas.height = window.innerHeight;
-    }
+  // Handle page size change
+  if (canvas.width != window.innerWidth) {
+    canvas.width = window.innerWidth;
+  }
+  if (canvas.height != window.innerHeight) {
+    canvas.height = window.innerHeight;
+  }
 }
 loop();