morph points (useWobbleAnimation implementation)

src/components/canvas/MorphableShape.tsx

@@ -1,5 +1,7 @@
+import { useWobbleAnimation } from "@/hooks/useWobbleAnimation";
 import { morphPoints } from "@/lib/shapes/morph";
 import { generateCirclePoints, generateSquarePoints, generateTrianglePoints } from "@/lib/shapes/points";
+import { applyWobble } from "@/lib/shapes/wobble";
 import type { ShapeState } from "@/types/shape";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useMemo } from "react";
@@ -15,6 +17,8 @@ export default function MorphableShape({
     state: ShapeState;
     onStateChange: (state: ShapeState) => void;
 }) {
+    const time = useWobbleAnimation(state.wobbleSpeed);
+
     const handleDrag = (e: KonvaEventObject<DragEvent>) => {
         onStateChange({
             ...state,
@@ -23,7 +27,7 @@ export default function MorphableShape({
         });
     };
 
-    const flatPoints = useMemo(() => {
+    const morphedPoints = useMemo(() => {
         const presetPoints = (() => {
             switch (state.preset) {
                 case "triangle":
@@ -37,12 +41,15 @@ export default function MorphableShape({
 
         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]);
+        return morphPoints(presetPoints, circlePoints, t);
     }, [state.preset, state.roundness]);
 
+    const flatPoints = useMemo(() => {
+        const wobbleAmount = state.wobble * 0.3; // scale wobble to reasonable range
+        const wobbled = applyWobble(morphedPoints, time, wobbleAmount);
+        return wobbled.flatMap((p) => [p.x, p.y]);
+    }, [morphedPoints, time, state.wobble]);
+
     return (
         <Group x={state.x} y={state.y} draggable onDragMove={handleDrag}>
             <Line points={flatPoints} closed fill={state.color} />