# HG changeset patch
# User June Park <parkjune1995@gmail.com>
# Date 1766721831 28800
# Node ID 70ca1d99f3fdedeb26c5625d1ca450cae48ebd3e
# Parent  6626ec933933484d357e3ec8c41e3c413ff5b38e
Mimicing what tsoding did for his video. Kinda cool.

diff -r 6626ec933933 -r 70ca1d99f3fd graphics/index.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/graphics/index.html	Thu Dec 25 20:03:51 2025 -0800
@@ -0,0 +1,2 @@
+<canvas id="game"></canvas>
+<script href="index.js" src="index.js"></script>
diff -r 6626ec933933 -r 70ca1d99f3fd graphics/index.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/graphics/index.js	Thu Dec 25 20:03:51 2025 -0800
@@ -0,0 +1,112 @@
+const SCREEN_WIDTH = 600;
+const SCREEN_HEIGHT = 600;
+const PIXEL_SIZE = 10;
+const FRAME = 60
+
+game.width = SCREEN_WIDTH;
+game.height = SCREEN_HEIGHT;
+
+const ctx = game.getContext("2d");
+
+function drawBackground() {
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+}
+
+function drawPixel({x, y}) {
+  ctx.fillStyle = "blue";
+  ctx.fillRect(x * SCREEN_WIDTH, y * SCREEN_HEIGHT, PIXEL_SIZE, PIXEL_SIZE);
+}
+
+function normazlie({x, y}) {
+  return {
+    x: ((x + 1) / 2),
+    y: (1 - ((y + 1) / 2)),
+  }
+}
+
+function threeDtotwoD({x, y, z}) {
+  return {
+    x: x/z,
+    y: y/z
+  }
+}
+
+function drawLine({x, y}, {x2, y2}) {
+  console.log("Hello", x,y, x2,y2);
+  ctx.beginPath();
+  ctx.moveTo(x * SCREEN_WIDTH, y * SCREEN_HEIGHT);
+  ctx.lineTo(x2 * SCREEN_WIDTH, y2* SCREEN_HEIGHT);
+  ctx.lineWidth = 3;
+  ctx.strokeStyle = "red";
+  ctx.stroke();
+}
+
+const test = 0;
+const points = [
+  {x: -0.25,  y:  0.25,  z: 0.5 + test},
+  {x: -0.25,  y: -0.25,  z: 0.5 + test},
+  {x:  0.25,  y: -0.25,  z: 0.5 + test},
+  {x:  0.25,  y:  0.25,  z: 0.5 + test},
+
+  {x: -0.25,  y:  0.25,  z:  -0.5 + test},
+  {x: -0.25,  y: -0.25,  z:  -0.5 + test},
+  {x:  0.25,  y: -0.25,  z:  -0.5 + test},
+  {x:  0.25,  y:  0.25,  z:  -0.5 + test},
+]
+const vortexs = [
+  [0, 1, 2, 3],
+  [4, 5, 6, 7],
+  [0, 4],
+  [1, 5],
+  [2, 6],
+  [3, 7],
+]
+
+function rotate_xz({x,y,z}, angle) {
+  return {
+    x: x * Math.cos(angle) - z*Math.sin(angle),
+    y: y,
+    z: x * Math.sin(angle) + z*Math.cos(angle),
+  }
+}
+
+function move_z(point, dz) {
+  return {...point, z: point.z + dz}
+}
+
+let dz = 0;
+let dt = 1/FRAME;
+let angle = 0;
+
+function drawAnimation() {
+  drawBackground();
+  dz += 1 * dt;
+  // angle += 2*Math.PI*dt;
+  angle = 0;
+  for (var vortex of vortexs)
+  {
+    for (let i = 0; i < vortex.length; i++)
+    {
+      const newPoint = normazlie(
+          threeDtotwoD(
+            move_z(rotate_xz(points[vortex[(i+1)%vortex.length]], angle), dz)
+          )
+        );
+
+      drawLine(
+        normazlie(
+          threeDtotwoD(
+            move_z(rotate_xz(points[vortex[i]], angle), dz)
+          )
+        ),
+        {x2: newPoint.x, y2: newPoint.y}
+      );
+    }
+  }
+  setTimeout(() => drawAnimation(), 1000/60)
+}
+
+drawAnimation()
+
+