Skip to content
Pibbl

Connect two electric points

Open full page

Read as Markdown

Render a lightning recipe and reset its deterministic seed on click.

APIs demonstrated

Section titled “APIs demonstrated”

Complete example

Section titled “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 {
  lightning,
  useTexture,
  type ElectricControl,
  type ElectricOptions,
  type ElectricPoint,
  type LightningMessage,
  type LightningOptions,
} from "@pibbl/core/textures";


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


function Arc() {
  const positive: ElectricPoint = { x: 0.2, y: 0.5 };
  const negative: ElectricPoint = { x: 0.8, y: 0.5 };
  const appearance: ElectricOptions = { seed: 9, branching: 0.6, glow: 1.2 };
  const options: LightningOptions = {
    ...appearance,
    positive,
    negative,
    frequency: 15,
    contactCore: true,
  };
  const texture = useTexture(lightning(options));
  const reset: ElectricControl = { type: "reset", seed: 9 };
  const message: LightningMessage = reset;
  return (
    <>
      <Rectangle style={{ width: 320, height: 200, fill: "#11151c" }} />
      <Rectangle
        style={{ width: 320, height: 200, fill: texture }}
        onClick={() => texture.send(message)}
      />
    </>
  );
}


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

Usage notes

Section titled “Usage notes”
  • The texture owns its animation through Pibbl; no application frame loop is needed.

Documentation version

Section titled “Documentation version”

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