Add a weighted filament source

Attach electric filaments to typed source sites and add one on click.

APIs demonstrated

tendrils from @pibbl/core/textures
TendrilsOptions from @pibbl/core/textures
TendrilsMessage from @pibbl/core/textures
ElectricSource from @pibbl/core/textures
ElectricSourceMessage from @pibbl/core/textures

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

/** @jsxImportSource @pibbl/core */
import { pibbl, Rectangle } from "@pibbl/core";
import {
  tendrils,
  useTexture,
  type ElectricSource,
  type ElectricSourceMessage,
  type TendrilsMessage,
  type TendrilsOptions,
} from "@pibbl/core/textures";

const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 240;
document.body.append(canvas);

function Filaments() {
  const source: ElectricSource = {
    id: "electrode-a",
    point: { x: 0.25, y: 0.75 },
    weight: 10,
  };
  const options: TendrilsOptions = {
    seed: 4,
    center: { x: 0.5, y: 0.5 },
    sources: [source],
    count: 12,
    glow: 1.2,
  };
  const texture = useTexture(tendrils(options));
  const nextSource: ElectricSourceMessage = {
    type: "upsert-source",
    source: { id: "electrode-b", point: { x: 0.75, y: 0.7 }, weight: 15 },
  };
  const message: TendrilsMessage = nextSource;
  return (
    <>
      <Rectangle style={{ width: 320, height: 240, fill: "#11151c" }} />
      <Rectangle
        style={{ width: 320, height: 240, fill: texture }}
        onClick={() => texture.send(message)}
      />
    </>
  );
}

const controller = pibbl(canvas, <Filaments />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

Usage notes

Source coordinates are normalized to the complete texture, including its padding.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.