@kinetographdev/p5-brush 0.0.0-stage → 0.2.0

package/LICENSE.md

@@ -0,0 +1,67 @@
+Required Notice: Copyright 2026 Sanat Gupta (https://github.com/0xS4N4TG)
+
+# PolyForm Small Business License 1.0.0
+
+<https://polyformproject.org/licenses/small-business/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the software to do everything you might do with the software that would otherwise infringe the licensor's copyright in it for any permitted purpose.  However, you may only distribute the software according to [Distribution License](#distribution-license) and make changes or new works based on the software according to [Changes and New Works License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license to distribute copies of the software.  Your license to distribute covers distributing the software with changes and new works permitted by [Changes and New Works License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software.  For example:
+
+> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to make changes and new works based on the software for any permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms do not limit them.
+
+## Small Business
+
+Use of the software for the benefit of your company is use for a permitted purpose if your company has fewer than 100 total individuals working as employees and independent contractors, and less than 1,000,000 USD (2019) total revenue in the prior tax year.  Adjust this revenue threshold for inflation according to the United States Bureau of Labor Statistics' consumer price index for all urban consumers, U.S. city average, for all items, not seasonally adjusted, with 1982–1984=100 reference base.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else.  These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 32 days of receiving notice.  Otherwise, all your licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization.  **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software under these terms.
+
+**Use** means anything you do with the software requiring one of your licenses.

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# @kinetographdev/p5-brush
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A canvas that [p5.brush](https://github.com/acamposuribe/p5.brush) draws into, reseeded and redrawn from the frame number, so a frame is the same alone and in sequence.
+
+Part of [Kinetograph](https://github.com/0xS4N4TG/kinetograph), a programmatic video engine. `p5.brush` is a peer dependency, used through `p5.brush/standalone`, and is used as it is.
+
+```sh
+npm install @kinetographdev/p5-brush p5.brush
+```
+
+```tsx
+import { BrushCanvas } from '@kinetographdev/p5-brush';
+
+<BrushCanvas seed={7} background="#f4efe6" origin="top-left" draw={(brush, frame, { width }) => {
+  brush.set('HB', '#2f2a26', 1.4);
+  brush.line(120, 140, 120 + frame * 10, 260);
+}} />
+```
+
+- Each frame: `brush.load(canvas)`, `clear`, `seed(seed)`, `noiseSeed(seed)`, `draw`, `render`, inside `push`/`pop` so fill, hatch and brush settings do not carry to the next frame.
+- The canvas is the composition's size unless `width` and `height` are given.
+- p5.brush's origin is the centre of the canvas, y down. `origin="top-left"` translates so that (0, 0) is the top left corner.
+- A render waits (`delayRender`) until the first frame is drawn.
+- Needs the WebGL support of Kinetograph (a `webgl2` canvas context that the engine draws).
+
+Licensed under the PolyForm Small Business License 1.0.0, see `LICENSE.md`.

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties } from 'react';
+/** The p5.brush standalone API (`brush.set`, `brush.line`, `brush.fill`, ...). p5.brush ships no types. */
+export type Brush = Record<string, any>;
+export interface BrushCanvasProps {
+    /** Seeds p5.brush's random and noise generators at the start of every frame. */
+    seed: number | string;
+    /**
+     * Draws the frame. `size` is the canvas size in pixels. Coordinates are p5.brush's own: the origin is the centre
+     * of the canvas, y points down (as in p5's WEBGL mode), unless `origin="top-left"`.
+     */
+    draw: (brush: Brush, frame: number, size: {
+        width: number;
+        height: number;
+    }) => void;
+    /** Canvas width in pixels. Default: the composition's width. */
+    width?: number;
+    /** Canvas height in pixels. Default: the composition's height. */
+    height?: number;
+    /** Where (0, 0) is. `'center'` is p5.brush's own; `'top-left'` translates so that (0, 0) is the top left corner. */
+    origin?: 'center' | 'top-left';
+    /** Paper colour for `brush.clear()`. Default: transparent. */
+    background?: string;
+    style?: CSSProperties;
+}
+/**
+ * A canvas that p5.brush draws into: `brush.load(canvas)` (never `createCanvas`), then each frame `clear`, `seed`,
+ * `noiseSeed`, `draw`, `render`.
+ *
+ * ```tsx
+ * <BrushCanvas seed={7} background="#f4efe6" origin="top-left" draw={(b, frame) => {
+ *   b.set('HB', '#2f2a26', 1.4);
+ *   b.line(120, 140, 120 + frame * 10, 260);
+ * }} />
+ * ```
+ */
+export declare function BrushCanvas({ seed, draw, width, height, origin, background, style }: BrushCanvasProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// p5.brush for a frame-driven render. p5.brush draws on a canvas with its own WebGL, and keeps state between calls
+// (the seed, the active brush, fill and hatch settings, the transform). A frame that draws from that state is not a
+// function of the frame number. So each frame this component reseeds, clears, draws inside push/pop (the state a
+// frame sets is dropped when it ends) and flushes, which makes a frame the same alone and in sequence.
+//
+// `p5.brush` is a peer dependency, used through its standalone build, and is never patched.
+import { useLayoutEffect, useRef, useState } from 'react';
+import { continueRender, delayRender, useCurrentFrame, useVideoConfig } from 'remotion';
+import * as brushModule from 'p5.brush/standalone';
+const brush = brushModule;
+/**
+ * A canvas that p5.brush draws into: `brush.load(canvas)` (never `createCanvas`), then each frame `clear`, `seed`,
+ * `noiseSeed`, `draw`, `render`.
+ *
+ * ```tsx
+ * <BrushCanvas seed={7} background="#f4efe6" origin="top-left" draw={(b, frame) => {
+ *   b.set('HB', '#2f2a26', 1.4);
+ *   b.line(120, 140, 120 + frame * 10, 260);
+ * }} />
+ * ```
+ */
+export function BrushCanvas({ seed, draw, width, height, origin = 'center', background, style }) {
+    const frame = useCurrentFrame();
+    const config = useVideoConfig();
+    const w = width ?? config.width;
+    const h = height ?? config.height;
+    const ref = useRef(null);
+    // Held until the first frame is drawn, so a render never reads the canvas before p5.brush has put anything on it.
+    const [handle] = useState(() => delayRender('p5.brush: loading'));
+    useLayoutEffect(() => {
+        const canvas = ref.current;
+        if (!canvas)
+            return;
+        brush.load(canvas);
+        if (background === undefined)
+            brush.clear();
+        else
+            brush.clear(background);
+        brush.seed(seed);
+        brush.noiseSeed(seed);
+        brush.push();
+        try {
+            if (origin === 'top-left')
+                brush.translate(-w / 2, -h / 2);
+            draw(brush, frame, { width: w, height: h });
+            brush.render();
+        }
+        finally {
+            brush.pop();
+        }
+        continueRender(handle);
+    });
+    return _jsx("canvas", { ref: ref, width: w, height: h, style: { width: w, height: h, display: 'block', ...style } });
+}
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@kinetographdev/p5-brush",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "p5.brush for Kinetograph: a canvas that reseeds the brush and redraws from the frame number",
+  "license": "PolyForm-Small-Business-1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/0xS4N4TG/kinetograph.git",
+    "directory": "packages/plugins/p5-brush"
+  },
+  "homepage": "https://github.com/0xS4N4TG/kinetograph#readme",
+  "bugs": {
+    "url": "https://github.com/0xS4N4TG/kinetograph/issues"
+  },
+  "keywords": [
+    "video",
+    "remotion",
+    "motion-graphics",
+    "p5.brush",
+    "generative-art"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.map"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "tsc -p tsconfig.test.json && vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@kinetographdev/core": "^0.2.0",
+    "p5.brush": "^2.2.0",
+    "react": "^19.3.0"
+  },
+  "devDependencies": {
+    "p5.brush": "2.2.3",
+    "react": "19.3.1"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}