From 489bca2ecd8d67f6c60216a13f6f50d1c2472d56 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <ob248@proton.me>
Date: Sat, 31 Jan 2026 16:04:26 +0000
Subject: [PATCH] bind radius to gain

---
 src/Index.tsx                            |  9 +++++++++
 src/components/canvas/MorphableShape.tsx | 16 +++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/Index.tsx b/src/Index.tsx
index 3cb0d54..8d287e8 100644
--- a/src/Index.tsx
+++ b/src/Index.tsx
@@ -234,6 +234,15 @@ function Index() {
                 <span className="text-sm font-medium">Octave</span>
                 <OctaveSelector value={state.octave} onChange={(octave) => setState({ ...state, octave })} />
             </div>
+            <div className="flex flex-col gap-2">
+                <span className="text-sm font-medium">Size</span>
+                <Slider
+                    value={[state.size]}
+                    min={0}
+                    max={100}
+                    onValueChange={([v]) => setState({ ...state, size: v })}
+                />
+            </div>
             <div className="flex flex-col gap-2">
                 <span
                     className={cn(
diff --git a/src/components/canvas/MorphableShape.tsx b/src/components/canvas/MorphableShape.tsx
index 38e097d..b4e757d 100644
--- a/src/components/canvas/MorphableShape.tsx
+++ b/src/components/canvas/MorphableShape.tsx
@@ -7,8 +7,7 @@ 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;
+const NUM_POINTS = 256;
 
 export default function MorphableShape({
     state,
@@ -27,22 +26,25 @@ export default function MorphableShape({
         });
     };
 
+    // Map size (0-100) to radius (20-200)
+    const radius = 20 + (state.size / 100) * 180;
+
     const morphedPoints = useMemo(() => {
         const presetPoints = (() => {
             switch (state.preset) {
                 case "triangle":
-                    return generateTrianglePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+                    return generateTrianglePoints(0, 0, radius, NUM_POINTS);
                 case "square":
-                    return generateSquarePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+                    return generateSquarePoints(0, 0, radius, NUM_POINTS);
                 case "circle":
-                    return generateCirclePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+                    return generateCirclePoints(0, 0, radius, NUM_POINTS);
             }
         })();
 
-        const circlePoints = generateCirclePoints(0, 0, SHAPE_RADIUS, NUM_POINTS);
+        const circlePoints = generateCirclePoints(0, 0, radius, NUM_POINTS);
         const t = state.roundness / 100;
         return morphPoints(presetPoints, circlePoints, t);
-    }, [state.preset, state.roundness]);
+    }, [state.preset, state.roundness, radius]);
 
     const flatPoints = useMemo(() => {
         const wobbleAmount = state.wobble * 0.3; // scale wobble to reasonable range