Draw simple lines

src/main/js/Main.ts

@@ -5,25 +5,66 @@ const {$, doAfterLoad} = window.fwdekker;
 doAfterLoad(() => {
     $("main").classList.remove("hidden");
 
+    // State
+    const startTime = Math.floor(Date.now() / 100);
+    let lastDrawTime = 0;
+    const linePartAngles: number[] = [];
+
+    // Draw
     const canvas = $("#art");
     const ctx = canvas.getContext("2d");
-
     const draw = () => {
         ctx.fillStyle = "#000000";
         ctx.fillRect(0, 0, canvas.width, canvas.height);
 
+        const center = [canvas.width / 2, canvas.height / 2];
+
+        // Center dot
         ctx.beginPath();
         ctx.fillStyle = "#ffffff";
-        ctx.arc(canvas.width / 2 - 20, canvas.height / 2 - 20, 20, 0, 2 * Math.PI);
+        ctx.arc(center[0] - 5, center[1] - 5, 10, 0, 2 * Math.PI);
         ctx.fill();
+
+        // Lines
+        ctx.beginPath();
+        ctx.strokeStyle = "#ffffff";
+        ctx.moveTo(center[0], center[1]);
+        let lastPos = [center[0], center[1]];
+        let totalAngle = 0;
+        for (const linePartAngle of linePartAngles) {
+            totalAngle += linePartAngle;
+            lastPos = [lastPos[0] + Math.cos(totalAngle) * 25, lastPos[1] + Math.sin(totalAngle) * 25];
+            ctx.lineTo(lastPos[0], lastPos[1]);
+        }
+        ctx.stroke();
+
+        const secondsSinceStart = Math.floor(Date.now() / 100) - startTime;
+        if (secondsSinceStart > lastDrawTime) {
+            lastDrawTime = secondsSinceStart;
+            linePartAngles.push((random_normal() - 0.5) * Math.PI * 2);
+        }
+
+        window.requestAnimationFrame(draw);
     };
+    window.requestAnimationFrame(draw);
+
+    // Listen to resize
     const resize = () => {
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
-
-        draw();
     };
-
     window.addEventListener("resize", resize, false);
     resize();
 });
+
+// Taken from https://stackoverflow.com/a/49434653/
+function random_normal(): number {
+    let u = 0;
+    while (u === 0) u = Math.random();
+    let v = 0;
+    while (v === 0) v = Math.random();
+
+    const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v) / 10.0 + 0.5;
+    if (num >= 0 && num < 1) return num;
+    return random_normal();
+}