<script>
import { point, linePathBySegment } from './path-utils.js';
import { circlePath } from './svg-utils.js';
import { nums } from './math-utils.js';
import Animation from './animation.svelte';
const center = point(250, 250);
export let radius = 200;
export let count = 3;
export let distance = 1.0;
export let amount = 1.0;
export let angle = 10;
export let delta = 0.5;
export let tomato = true;
$: pathes = nums(count);
const animate = () => {
const newAngle = angle + delta;
angle = newAngle > 360 ? angle -360 : newAngle < 0 ? newAngle + 360 : newAngle;
};
</script>
<style>
path { fill: none; stroke-width: 2px; stroke: lightgreen; stroke-linecap: round;}
path.circle { fill: red; stroke: none; stroke-width: 1px; }
input { vertical-align: middle; margin: 0; padding: 2px; }
</style>
segments: <input type="range" min="3" max="30" bind:value={count} /><br>
radius: <input type="range" min="20" max="200" bind:value={radius} /><br>
distance: <input type="range" min="0.5" max="2" step="0.01" bind:value={distance} /><br>
amount: <input type="range" min="-10" max="10" step="0.1" bind:value={amount} /><br>
angle: <input type="range" min="0" max="360" step={delta} bind:value={angle} /><br>
delta: <input type="range" min="0" max="10" step="0.01" bind:value={delta} /><br>
<Animation run={animate} />