feat: Implement JavaScript notebook feature

Author: Paul Adams

app.js

@@ -4,6 +4,7 @@ const routes = {
   "/contact": "pages/contact.html",
   "/test": "pages/test.html",
   "/projects": "pages/projects.html",
+  "/notebook": "pages/notebook.html",
 };
 
 const app = document.getElementById("app");
@@ -34,54 +35,24 @@ const router = async () => {
       const response = await fetch(route);
       if (!response.ok) throw new Error(`Page not found: ${route}`);
       const html = await response.text();
-
-      app.innerHTML = ""; // Clear previous content
-
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(html, "text/html");
-
-      Array.from(doc.body.childNodes).forEach((node) => {
-        if (node.nodeName === "SCRIPT") {
-          const script = document.createElement("script");
-          script.setAttribute("data-dynamic-script", "true"); // Mark as dynamic
-
-          if (node.src) {
-            // Re-create the src to ensure it's correctly resolved
-            const scriptURL = new URL(
-              node.getAttribute("src"),
-              window.location.href
-            );
-            script.src = scriptURL.href;
-            // Start animation after script loads
-            script.onload = () => {
-              if (
-                window.pageAnimations &&
-                window.pageAnimations[currentPage] &&
-                typeof window.pageAnimations[currentPage].start === "function"
-              ) {
-                window.pageAnimations[currentPage].start();
-              }
-            };
-          } else {
-            script.textContent = node.textContent;
-          }
-          // Append to body to ensure execution
-          document.body.appendChild(script);
-
-          // For inline scripts, start animation immediately after append
-          if (!node.src) {
-            if (
-              window.pageAnimations &&
-              window.pageAnimations[currentPage] &&
-              typeof window.pageAnimations[currentPage].start === "function"
-            ) {
-              window.pageAnimations[currentPage].start();
-            }
-          }
-        } else {
-          app.appendChild(node.cloneNode(true));
+      app.innerHTML = html;
+
+      // Automatically load the corresponding script
+      const scriptPath = route.replace(".html", ".js");
+      const script = document.createElement("script");
+      script.src = scriptPath;
+      script.setAttribute("data-dynamic-script", "true");
+      document.body.appendChild(script);
+
+      script.onload = () => {
+        if (
+          window.pageAnimations &&
+          window.pageAnimations[currentPage] &&
+          typeof window.pageAnimations[currentPage].start === "function"
+        ) {
+          window.pageAnimations[currentPage].start();
         }
-      });
+      };
     } catch (error) {
       console.error("Routing error:", error);
       app.innerHTML = "<h1>404 - Not Found</h1>";
@@ -132,7 +103,7 @@ document.addEventListener("DOMContentLoaded", () => {
     if (matrixTimer > matrixInterval) {
       const matrix = window.matrix;
       if (matrix && typeof matrix.draw === "function") {
-        matrix.draw();
+        matrix.draw(deltaTime);
       }
       matrixTimer = 0;
     }
@@ -177,44 +148,193 @@ const matrixEffect = (canvasId, containerSelector) => {
   const canvas = document.getElementById(canvasId);
   if (!canvas) return null;
   const ctx = canvas.getContext("2d");
+  //const ctx = canvas.getContext("2d", {
+  //  willReadFrequently: true,
+  //});
   const container = document.querySelector(containerSelector);
 
   canvas.width = container.offsetWidth;
   canvas.height = container.offsetHeight;
 
   const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
   const font_size = 10;
+
+  const circle_buffer_width = canvas.width / font_size;
+  const circle_buffer_height = canvas.height / font_size;
   const columns = canvas.width / font_size;
   const drops = [];
+  const particles = [];
+  const circle_buffer = new Int8Array(
+    circle_buffer_width * circle_buffer_height
+  );
+
+  const maxParticles = 6;
 
-  let beginMatrixEffect = true;
   for (let x = 0; x < columns; x++) {
     drops[x] = 1;
   }
   for (let i = 0; i < drops.length; i++) {
     drops[i] = canvas.height / font_size;
   }
+  for (let i = 0; i < maxParticles; i++) {
+    particles.push({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      radius: Math.random() * 50 + 75,
+      speed: Math.random() * 4,
+      dir: vec2(Math.random() - 0.5, Math.random() - 0.5),
+    });
+  }
+
+  function plotPixel(x, y, v) {
+    const sx = Math.floor(x) | 0;
+    const sy = Math.floor(y) | 0;
+    const index = (sy * circle_buffer_width + sx) | 0;
+    if (
+      sx >= 0 &&
+      sx < circle_buffer_width &&
+      sy >= 0 &&
+      sy < circle_buffer_height
+    ) {
+      circle_buffer[index] = v;
+    }
+  }
 
-  let frame = 0;
-  let hideIniitalEffect = true;
+  function plotOctants(x, y, centerX, centerY) {
+    plotPixel(centerX + x, centerY + y, 1);
+    plotPixel(centerX - x, centerY + y, 1);
+    plotPixel(centerX + x, centerY - y, 1);
+    plotPixel(centerX - x, centerY - y, 1);
+    plotPixel(centerX + y, centerY + x, 1);
+    plotPixel(centerX - y, centerY + x, 1);
+    plotPixel(centerX + y, centerY - x, 1);
+    plotPixel(centerX - y, centerY - x, 1);
+  }
 
-  function draw() {
+  function bresenhamCircle(centerX, centerY, radius) {
+    centerX /= font_size;
+    centerY /= font_size;
+    radius /= font_size;
+    centerX = Math.floor(centerX) | 0;
+    centerY = Math.floor(centerY) | 0;
+    radius = Math.floor(radius) | 0;
+    let x = 0 | 0;
+    let y = radius | 0;
+    let d = (3 - 2 * radius) | 0;
+    while (y > x) {
+      x++;
+      if (d > 0) {
+        y--;
+        d = (d + 4 * (x - y)) | 0;
+      } else {
+        d = (d + 4 * x) | 0;
+      }
+      plotOctants(x, y, centerX, centerY);
+    }
+  }
+  const epsilon = 0.01;
+
+  function line(x0, y0, x1, y1) {
+    x0 /= font_size;
+    y0 /= font_size;
+    x1 /= font_size;
+    y1 /= font_size;
+    x0 = Math.floor(x0) | 0;
+    y0 = Math.floor(y0) | 0;
+    x1 = Math.floor(x1) | 0;
+    y1 = Math.floor(y1) | 0;
+    const dx = Math.abs(x1 - x0);
+    const dy = Math.abs(y1 - y0);
+    const sx = Math.sign(x1 - x0);
+    const sy = Math.sign(y1 - y0);
+    let err = dx - dy;
+
+    while (true) {
+      plotPixel(x0, y0, 2);
+
+      if (Math.abs(x0 - x1) + Math.abs(y0 - y1) < epsilon) break;
+
+      const e2 = 2 * err;
+      if (e2 > -dy) {
+        err -= dy;
+        x0 += sx;
+      }
+      if (e2 < dx) {
+        err += dx;
+        y0 += sy;
+      }
+    }
+  }
+
+  function drawCicleBuffer() {
+    ctx.fillStyle = "rgba(3, 94, 3, 1)";
+    for (let y = 0; y < circle_buffer_height; y++) {
+      for (let x = 0; x < circle_buffer_width; x++) {
+        const index = (y * circle_buffer_width + x) | 0;
+        const xx = (x * font_size) | 0;
+        const yy = (y * font_size) | 0;
+        if (circle_buffer[index] > 0) {
+          ctx.fillStyle = "rgba(0, 0, 0, 1)";
+          ctx.fillRect(xx, yy, font_size, font_size);
+          ctx.fillStyle = "rgba(5, 130, 5, 1)";
+          const text = matrix[Math.floor(Math.random() * matrix.length)];
+          ctx.fillText(text, xx, yy + font_size);
+        }
+      }
+    }
+  }
+
+  function draw(deltaTime) {
     ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    if (hideIniitalEffect) frame++;
+    // Set the fill color to green
+    ctx.fillStyle = "green";
+
+    circle_buffer.fill(0);
+
+    for (let i = 0; i < maxParticles; i++) {
+      const p = particles[i];
+      p.x += p.dir.x * p.speed;
+      p.y += p.dir.y * p.speed;
+      if (p.x < 0 || p.x > canvas.width) p.dir.x *= -1;
+      if (p.y < 0 || p.y > canvas.height) p.dir.y *= -1;
+      bresenhamCircle(p.x, p.y, p.radius);
+      if (Math.random() < 0.01) {
+        p.dir = vec2(Math.random() - 0.5, Math.random() - 0.5);
+      }
+      // if (i > 0) {
+      //   line(
+      //     particles[i - 1].x,
+      //     particles[i - 1].y,
+      //     particles[i].x,
+      //     particles[i].y
+      //   );
+      // }
+    }
 
-    //if (frame > drops.length) {
-    //  hideIniitalEffect = false;
     ctx.fillStyle = "rgba(3, 94, 3, 1)";
-    //} else {
-    //  ctx.fillStyle = "rgba(210, 15, 15, 1)";
-    //}
     ctx.font = font_size + "px arial";
 
+    drawCicleBuffer();
     for (let i = 0; i < drops.length; i++) {
       const text = matrix[Math.floor(Math.random() * matrix.length)];
-      ctx.fillText(text, i * font_size, drops[i] * font_size);
+
+      const tx = i * font_size;
+      const ty = drops[i] * font_size;
+
+      ctx.fillText(text, tx, ty);
+
+      const cx = tx / font_size;
+      const cy = ty / font_size;
+      const index = (cy * circle_buffer_width + cx) | 0;
+      if (circle_buffer[index] === 1) {
+        ctx.fillStyle = "rgba(18, 215, 202, 1)";
+        ctx.fillText("code", tx, ty);
+        ctx.fillText("base", tx + font_size, ty + font_size);
+        ctx.fillText("hack", tx - font_size, ty + font_size);
+      }
+      ctx.fillStyle = "rgba(3, 94, 3, 1)";
 
       if (drops[i] * font_size > canvas.height && Math.random() > 0.975) {
         drops[i] = 0;

dummy.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Popup Slider Near Cursor</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 20px;
+      }
+      #popup {
+        display: none;
+        position: absolute;
+        border: 1px solid #ccc;
+        background-color: white;
+        padding: 10px;
+        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+      }
+      .popup-button {
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Click to Show Popup</h1>
+
+    <div id="popup">
+      <label for="slider">Adjust Value:</label>
+      <input type="range" id="slider" min="0" max="100" />
+      <div class="popup-button">
+        <button id="okBtn">OK</button>
+        <button id="closeBtn">Close</button>
+      </div>
+    </div>
+
+    <script>
+      const popup = document.getElementById("popup");
+      const okBtn = document.getElementById("okBtn");
+      const closeBtn = document.getElementById("closeBtn");
+
+      document.addEventListener("click", (event) => {
+        // Show the popup only on left mouse button click
+        if (event.button === 0 && popup.style.display !== "block") {
+          // 0 indicates left mouse button
+          popup.style.display = "block";
+          // Position the popup next to the cursor, with a slight offset
+          popup.style.left = event.pageX + 10 + "px";
+          popup.style.top = event.pageY + 10 + "px";
+        }
+      });
+
+      // Event listener for closing the popup
+      closeBtn.addEventListener("click", () => {
+        popup.style.display = "none"; // Close the popup
+      });
+
+      okBtn.addEventListener("click", () => {
+        const sliderValue = document.getElementById("slider").value;
+        alert("Slider Value: " + sliderValue); // Show alert with slider value
+        popup.style.display = "none"; // Close the popup
+      });
+
+      // Prevent the popup from closing when clicking inside of it
+      popup.addEventListener("click", (event) => {
+        event.stopPropagation();
+      });
+    </script>
+  </body>
+</html>

index.html

@@ -20,6 +20,7 @@
       href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap"
       rel="stylesheet"
     />
+    <script src="/pages/math-lib.js"></script>
   </head>
   <body>
     <canvas id="fullscreen-matrix-canvas"></canvas>
@@ -40,7 +41,6 @@
           <a href="#/" data-route>Home</a>
           <a href="#/about" data-route>About</a>
           <a href="#/contact" data-route>Contact</a>
-          <a href="#/test" data-route>Test</a>
           <a href="#/projects" data-route>Projects</a>
           <a href="pages/live-coding.html">Live Coding</a>
         </nav>