starting rendering, adding web sockets

www/background.js

@@ -0,0 +1,138 @@
+const canvas = document.getElementById("waveCanvas");
+const ctx = canvas.getContext("2d");
+
+const pCanvas = document.getElementById("particleCanvas");
+const pctx = pCanvas.getContext("2d");
+
+let t = 0;
+
+// Draw the left anchored Waves
+function drawLeftWaves(){
+
+  // angle controls diagonal direction
+  const angle = -Math.PI * t / 10 + Math.PI * 2/5; // oscilation
+
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+
+  for (let i = 0; i < 3; i++) {
+    ctx.beginPath();
+
+    let offset = i * canvas.height * (5/12); // spacing
+
+    for (let x = 0; x < canvas.width; x += 10) {
+      // rotate coordinate system
+      let rx = x * cos;
+      let ry = x * sin;
+
+      let wave =
+        Math.sin((rx + ry) * 0.01 + t + i) * 40 +
+        Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;
+
+      let y = ry + wave + offset;
+
+      ctx.lineTo(x, y);
+    }
+
+    ctx.stroke();
+  }
+}
+
+// Draw the right anchored waves
+function drawRightWaves() {
+  
+  // angle controls diagonal direction
+  const angle = Math.PI * t / 8; // oscilation
+
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+
+  for (let i = 0; i < 3; i++) {
+    ctx.beginPath();
+
+    let offset = i * canvas.height * (5/12); // spacing
+
+    for (let x = 0; x < canvas.width; x += 10) {
+      // rotate coordinate system
+      let rx = x * cos;
+      let ry = x * sin;
+
+      let wave =
+        -Math.sin((rx + ry) * 0.01 + t + i) * 40 -
+        Math.sin((rx + ry) * 0.005 + t * 0.5) * 25;
+
+      let y = ry + wave + offset;
+
+      ctx.lineTo(canvas.width - x, y);
+    }
+
+    ctx.stroke();
+  }
+}
+
+// Draw the waves
+function drawWaves() {
+  
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+	
+  // Horizontal Waves
+  ctx.globalAlpha = 0.15;
+  ctx.strokeStyle = "#ffffff";
+  ctx.lineWidth = 2;
+  drawLeftWaves();
+
+  // Vertical Waves
+  ctx.globalAlpha = 0.12;
+  ctx.strokeStyle = "#ffffff";
+  ctx.lineWidth = 2;
+  drawRightWaves()
+
+  t += 0.01;
+  requestAnimationFrame(drawWaves);
+}
+
+// Draw the particles
+function drawParticles() {
+  pctx.clearRect(0, 0, pCanvas.width, pCanvas.height);
+
+  pctx.fillStyle = "rgba(255,255,255,0.4)";
+
+  for (let p of particles) {
+    p.x += p.dx;
+    p.y += p.dy;
+
+    if (p.x < 0) p.x = pCanvas.width;
+    if (p.x > pCanvas.width) p.x = 0;
+    if (p.y < 0) p.y = pCanvas.height;
+    if (p.y > pCanvas.height) p.y = 0;
+
+    pctx.beginPath();
+    pctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+    pctx.fill();
+  }
+
+  requestAnimationFrame(drawParticles);
+}
+
+// resize function
+function resize() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  pCanvas.width = window.innerWidth;
+  pCanvas.height = window.innerHeight;
+}
+
+
+resize();
+// Define the particles
+const particles = Array.from({ length: 80 }, () => ({
+  x: Math.random() * window.innerWidth,
+  y: Math.random() * window.innerHeight,
+  r: Math.random() * 2 + 1,
+  dx: (Math.random() - 0.5) * 0.3,
+  dy: (Math.random() - 0.5) * 0.3
+}));
+drawParticles();
+drawWaves();
+
+window.addEventListener("resize", resize);