--- a/graphics/index.js	Sat Jan 10 13:35:09 2026 -0800
+++ b/graphics/index.js	Mon Jan 19 18:59:10 2026 -0800
@@ -1,6 +1,6 @@
 const SCREEN_WIDTH = 600;
 const SCREEN_HEIGHT = 600;
-const PIXEL_SIZE = 10;
+const PIXEL_SIZE = 1;
 const FRAME = 60
 
 game.width = SCREEN_WIDTH;
@@ -14,11 +14,11 @@
 }
 
 function drawPixel({x, y}) {
-  ctx.fillStyle = "blue";
+  ctx.fillStyle = "pink";
   ctx.fillRect(x * SCREEN_WIDTH, y * SCREEN_HEIGHT, PIXEL_SIZE, PIXEL_SIZE);
 }
 
-function normazlie({x, y}) {
+function normalize({x, y}) {
   return {
     x: ((x + 1) / 2),
     y: (1 - ((y + 1) / 2)),
@@ -33,7 +33,6 @@
 }
 
 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);
@@ -42,26 +41,99 @@
   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},
+
+// function generateHeartPoints(resolution = 0.008) {
+//   const points = [];
+//   // Nordstrom needs a slightly higher threshold because the 
+//   // gradient of the cubic is steeper in some areas.
+//   const threshold = 0.0001; 
+// 
+//   for (let x = -1.5; x <= 1.5; x += resolution) {
+//     for (let y = -1.5; y <= 1.5; y += resolution) {
+//       for (let z = -1.5; z <= 1.5; z += resolution) {
+//         
+//         const x2 = x * x;
+//         const y2 = y * y;
+//         const z2 = z * z;
+//         const z3 = z2 * z;
+// 
+//         // Nordstrom Equation: (2x² + y² + z² - 1)³ - (1/10)x²z³ - y²z³ = 0
+//         const inner = (2 * x2) + y2 + z2 - 1;
+//         const value = Math.pow(inner, 3) - (0.1 * x2 * z3) - (y2 * z3);
+// 
+//         if (Math.abs(value) < threshold) {
+//           // Keep the jitter for that organic "floating dust" look
+//           points.push({
+//             x: x + (Math.random() - 0.5) * resolution, 
+//             y: y + (Math.random() - 0.5) * resolution,
+//             z: z + (Math.random() - 0.5) * resolution
+//           });
+//         }
+//       }
+//     }
+//   }
+//   return points;
+// }
+
+function generateHeartPoints(resolution = 0.01) {
+  const points = [];
+  const threshold = 0.001;
+
+  for (let x = -1.5; x <= 1.5; x += resolution) {
+    for (let y = -1.5; y <= 1.5; y += resolution) {
+      for (let z = -1.5; z <= 1.5; z += resolution) {
+        
+        const x2 = x * x;
+        const y2 = y * y;
+        const z2 = z * z;
+        const z3 = z2 * z;
 
-  {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],
-]
+        const inner = x2 + (9/4) * y2 + z2 - 1;
+        const value = Math.pow(inner, 3) - x2 * z3 - (9/80) * y2 * z3;
+
+        if (Math.abs(value) < threshold) {
+          points.push({
+           x: x + (Math.random() - 0.5) * 0.01, 
+           y: y + (Math.random() - 0.5) * 0.01,
+           z: z + (Math.random() - 0.5) * 0.01
+          });
+        }
+      }
+    }
+  }
+  return points;
+}
+
+let points = generateHeartPoints();
+const intial_start_z = 2;
+points = points.map(point => ({...point, x: point.x + intial_start_z}));
+// const points = [
+//   {x: -0.25,  y:  0.25,  z: 0.25},
+//   {x: -0.25,  y: -0.25,  z: 0.25},
+//   {x:  0.25,  y: -0.25,  z: 0.25},
+//   {x:  0.25,  y:  0.25,  z: 0.25},
+// 
+//   {x: -0.25,  y:  0.25,  z:  -0.25},
+//   {x: -0.25,  y: -0.25,  z:  -0.25},
+//   {x:  0.25,  y: -0.25,  z:  -0.25},
+//   {x:  0.25,  y:  0.25,  z:  -0.25},
+// ]
+// const vortexs = [
+//   [0, 1, 2, 3],
+//   [4, 5, 6, 7],
+//   [0, 4],
+//   [1, 5],
+//   [2, 6],
+//   [3, 7],
+// ]
+
+function rotate_xy({x, y, z}, angle) {
+  return {
+    x: x * Math.cos(angle) - y * Math.sin(angle),
+    y: x * Math.sin(angle) + y * Math.cos(angle),
+    z: z
+  };
+}
 
 function rotate_xz({x,y,z}, angle) {
   return {
@@ -71,39 +143,71 @@
   }
 }
 
+function rotate_yz({x, y, z}, angle) {
+  return {
+    x: x,
+    y: y * Math.sin(angle) + z * Math.cos(angle),
+    z: y * Math.cos(angle) - z * Math.sin(angle)
+  };
+}
+
 function move_z(point, dz) {
   return {...point, z: point.z + dz}
 }
 
+function move_y(point, dy) {
+  return {...point, y: point.y + dy}
+}
+
 let dz = 0;
 let dt = 1/FRAME;
 let angle = 0;
+const fontPoint = {x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT * 0.3};
 
 function drawAnimation() {
   drawBackground();
-  dz += 1 * dt;
-  // angle += 2*Math.PI*dt;
-  angle = 0;
-  for (var vortex of vortexs)
+  dz -= 1 * dt;
+  angle += 2*Math.PI*dt*0.2;
+
+  // Texts...
+  ctx.font = "60px serif";
+  ctx.textAlign = "center"; // Ensures the point is the middle of the text
+  ctx.textBaseline = "middle";
+  ctx.fillStyle = "pink";
+  ctx.fillText("Heart!", fontPoint.x, fontPoint.y);
+
+  // Hearts...
+  for (var point of points)
   {
-    for (let i = 0; i < vortex.length; i++)
-    {
-      const newPoint = normazlie(
-          threeDtotwoD(
-            move_z(rotate_xz(points[vortex[(i+1)%vortex.length]], angle), dz)
-          )
-        );
+    const newPoint = normalize(
+        threeDtotwoD(
+          move_z(rotate_yz(rotate_xz(rotate_xy(point, angle), angle), angle), dz)
+          // move_z(point, dz)
+        )
+      );
+    drawPixel(newPoint);
+  }
 
-      drawLine(
-        normazlie(
-          threeDtotwoD(
-            move_z(rotate_xz(points[vortex[i]], angle), dz)
-          )
-        ),
-        {x2: newPoint.x, y2: newPoint.y}
-      );
-    }
-  }
+  // for (var vortex of vortexs)
+  // {
+  //   for (let i = 0; i < vortex.length; i++)
+  //   {
+  //     const newPoint = normalize(
+  //         threeDtotwoD(
+  //           move_z(rotate_xz(points[vortex[(i+1)%vortex.length]], angle), dz)
+  //         )
+  //       );
+
+  //     drawLine(
+  //       normalize(
+  //         threeDtotwoD(
+  //           move_z(rotate_xz(points[vortex[i]], angle), dz)
+  //         )
+  //       ),
+  //       {x2: newPoint.x, y2: newPoint.y}
+  //     );
+  //   }
+  // }
   setTimeout(() => drawAnimation(), 1000/60)
 }