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);
+background: var(--background);
-    position:fixed;
+position:fixed;
-    left:0;
+left:0;
-    top:0;
+top:0;
-    z-index:-99999;
+z-index:-99999;
-    `
+`
 // set it's size
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
@@ -17,52 +17,66 @@ 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 {
+class Drop {
   constructor() {
     this.x = Math.random() * window.innerWidth;
     this.y = Math.random() * window.innerHeight;
 
-        this.dx = (Math.random()) - 0.5;
+    this.distance = Math.random();
-        this.dy = (Math.random()) - 0.5;
   }
   draw() {
-        context.fillStyle = "#2a2323"
+    context.fillStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`;
-        context.strokeStyle = "#2a2323"
+    context.strokeStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`;
-        // 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.moveTo(this.x,this.y);
-        context.fill();
+    context.lineTo(this.x,this.y-this.distance*100);
     context.stroke();
-
     // move point
-        this.x += this.dx;
+    this.y += (this.distance + 0.3) * 4;
-        this.y += this.dy;
 
     // keep point in bounds
-        if (this.x > window.innerWidth || this.x < 0) {
+    if (this.y > window.innerHeight - (1 - this.distance) * 300) {
-            this.dx *= -1
+      // Add splash
-        }
+      drawableObjectList.push(new Splash(this.distance, this.x, this.y))
-        if (this.y > window.innerHeight || this.y < 0) {
+
-            this.dy *= -1
+      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() {