ob/tsos
1
0
Fork 0
mirror of https://github.com/hex248/tsos.git synced 2026-02-07 18:23:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

bind radius to gain

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-31 16:04:26 +00:00
parent f249c1dbe5
commit 489bca2ecd
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Index.tsx
View File

@@ -234,6 +234,15 @@ function Index() {
<span className="text-sm font-medium">Octave</span> <span className="text-sm font-medium">Octave</span>
<OctaveSelector value={state.octave} onChange={(octave) => setState({ ...state, octave })} /> <OctaveSelector value={state.octave} onChange={(octave) => setState({ ...state, octave })} />
</div> </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"> <div className="flex flex-col gap-2">
<span <span
className={cn( className={cn(

16
src/components/canvas/MorphableShape.tsx
View File

@@ -7,8 +7,7 @@ import type { KonvaEventObject } from "konva/lib/Node";
import { useMemo } from "react"; import { useMemo } from "react";
import { Group, Line } from "react-konva"; import { Group, Line } from "react-konva";
const SHAPE_RADIUS = 100; const NUM_POINTS = 256;
const NUM_POINTS = 64;
export default function MorphableShape({ export default function MorphableShape({
state, 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 morphedPoints = useMemo(() => {
const presetPoints = (() => { const presetPoints = (() => {
switch (state.preset) { switch (state.preset) {
case "triangle": case "triangle":
return generateTrianglePoints(0, 0, SHAPE_RADIUS, NUM_POINTS); return generateTrianglePoints(0, 0, radius, NUM_POINTS);
case "square": case "square":
return generateSquarePoints(0, 0, SHAPE_RADIUS, NUM_POINTS); return generateSquarePoints(0, 0, radius, NUM_POINTS);
case "circle": 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; const t = state.roundness / 100;
return morphPoints(presetPoints, circlePoints, t); return morphPoints(presetPoints, circlePoints, t);
}, [state.preset, state.roundness]); }, [state.preset, state.roundness, radius]);
const flatPoints = useMemo(() => { const flatPoints = useMemo(() => {
const wobbleAmount = state.wobble * 0.3; // scale wobble to reasonable range const wobbleAmount = state.wobble * 0.3; // scale wobble to reasonable range