From 421146dd188570c628ab8c4e7446fbbba10f3f61 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <ob248@proton.me>
Date: Sun, 25 Jan 2026 09:16:12 +0000
Subject: [PATCH] extended morphable shape to use generated points

---
 src/components/canvas/MorphableShape.tsx | 34 +++++++++++++++++++++---
 src/hooks/useShapeState.ts               |  4 +--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/canvas/MorphableShape.tsx b/src/components/canvas/MorphableShape.tsx
index 6599a2e..b8d22ba 100644
--- a/src/components/canvas/MorphableShape.tsx
+++ b/src/components/canvas/MorphableShape.tsx
@@ -1,6 +1,12 @@
-import { Circle } from "react-konva";
-import type { KonvaEventObject } from "konva/lib/Node";
+import { morphPoints } from "@/lib/shapes/morph";
+import { generateCirclePoints, generateSquarePoints, generateTrianglePoints } from "@/lib/shapes/points";
 import type { ShapeState } from "@/types/shape";
+import type { KonvaEventObject } from "konva/lib/Node";
+import { useMemo } from "react";
+import { Group, Line } from "react-konva";
+
+const SHAPE_RADIUS = 100;
+const NUM_POINTS = 64;
 
 export default function MorphableShape({
     state,
@@ -17,7 +23,29 @@ export default function MorphableShape({
         });
     };
 
+    const flatPoints = useMemo(() => {
+        const presetPoints = (() => {
+            switch (state.preset) {
+                case "triangle":
+                    return generateTrianglePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+                case "square":
+                    return generateSquarePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+                case "circle":
+                    return generateCirclePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+            }
+        })();
+
+        const circlePoints = generateCirclePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+        const t = state.roundness / 100;
+        const morphed = morphPoints(presetPoints, circlePoints, t);
+
+        // flatten to [x1, y1, x2, y2, ...]
+        return morphed.flatMap((p) => [p.x, p.y]);
+    }, [state.preset, state.roundness]);
+
     return (
-        <Circle x={state.x} y={state.y} radius={100} fill={state.color} draggable onDragMove={handleDrag} />
+        <Group x={state.x} y={state.y} draggable onDragMove={handleDrag}>
+            <Line points={flatPoints} closed fill={state.color} />
+        </Group>
     );
 }
diff --git a/src/hooks/useShapeState.ts b/src/hooks/useShapeState.ts
index bf62df4..b7a9897 100644
--- a/src/hooks/useShapeState.ts
+++ b/src/hooks/useShapeState.ts
@@ -4,8 +4,8 @@ import type { ShapeState } from "@/types/shape";
 const DEFAULT_STATE: ShapeState = {
     x: 0,
     y: 0,
-    preset: "circle",
-    roundness: 100, // full circle
+    preset: "square",
+    roundness: 15, // full circle
     size: 50, // medium
     wobble: 20, // subtle
     wobbleSpeed: 50, // medium