diff --git a/src/components/canvas/MorphableShape.tsx b/src/components/canvas/MorphableShape.tsx index b8d22ba..e891d33 100644 --- a/src/components/canvas/MorphableShape.tsx +++ b/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) => { 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 (