pts-template

codeswing.json

{
  "scripts": [],
  "scriptType": "module",
  "styles": [],
  "template": "true"
}

index.html

<div id="app"></div>

script.mjs

import chroma from "https://cdn.skypack.dev/chroma-js";
import {CanvasSpace, Rectangle, Circle, Create, Const, Bound} from "https://cdn.skypack.dev/pts";

const colorsBrew = chroma.scale('OrRd').colors(5);

(() => {
    const space = new CanvasSpace("#app").setup({ bgcolor: "#e0def4", retina: false, resize: false });
    const form = space.getForm();

    let stripesGrid;
    let mask;
    let pts;
    const MASK_SIZE = 200;
    const STRIPES_COUNT = 5;

    space.add({
        start: () => {
            mask = Rectangle.fromCenter(space.center, MASK_SIZE);
            stripesGrid = Create.gridCells(Bound.fromGroup(mask), STRIPES_COUNT, 1);
            pts = Create.distributeRandom(space.innerBound, 20);
        },

        animate: (time, ftime, space) => {
            // draw mask like a circle
            form.fillOnly(false).circle(Circle.fromRect(mask));

            // clip start
            form.ctx.clip();

            // stripes
            const stripesRect = stripesGrid.map((p, idx) => {
                const stripe = Rectangle.fromCenter(
                    Rectangle.center(p),
                    Bound.fromGroup(p).width,
                    Bound.fromGroup(p).height
                );
                let poly = Rectangle.corners(stripe);
                poly.rotate2D(Const.quarter_pi, Rectangle.center(mask));
                form.fillOnly(colorsBrew[idx % STRIPES_COUNT]).polygon(poly);
            });

            // clip end
            form.ctx.restore();
        },
    });

    space.bindMouse().play();
})();

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}