PolygonMask.txl

<script>
import { Color, Slider, Props } from "txl";

export let inner = 0.5;
export let outer = 0.75;
export let vertices = 10;

function enter ({ context, width, height }) {
  const cx = width / 2;
  const cy = height / 2;

  context.save();
  context.beginPath();

  const sides = vertices * 2;
  for (let i = 0; i < sides; i++) {
    const pct = (i + 0.5) / sides;
    const theta = Math.PI * 2 * pct;
    const r = (!(i % 2) ? inner : outer) / 2 * Math.min(width, height);
    const x = cx + r * Math.cos(theta);
    const y = cy + r * Math.sin(theta);
    context.lineTo(x, y);
  }
  
  context.clip();
}

function exit ({ context }) {
  context.restore();
}
</script>

<Props>
  <Slider label='Sides' bind:value={vertices} min={5} max={20} step={1} />
  <Slider label='Inner Radius' bind:value={inner} min={0} max={2} step={0.01} />
  <Slider label='Outer Radius' bind:value={outer} min={0} max={2} step={0.01} />
</Props>