marble

Read as Markdown

import { createElement, Rectangle } from "@pibbl/core";
import { marble, useTexture } from "@pibbl/core/textures";
function Material() {
  const fill = useTexture(marble({ seed: 42, scale: 6, detail: 0.65 }), {
    resolution: { width: 128, height: 64 },
  });
  return createElement(Rectangle, { style: { width: 600, height: 200, fill } });
}

Mount Material with pibbl(canvas, createElement(Material, {})) on a 600 by 200 canvas. The definition is not itself a paint; useTexture supplies the owned texture handle.

MaterialOptions defaults are seed 42, scale 6, and detail 0.65. Seed is an unsigned 32-bit integer, scale is 1 through 32, and detail is 0 through 1. The material is static until its configuration changes. Simulation/raster resolution is independent of display size.

See useTexture ownership, the marble swatch, and the existing material editor.

Documentation version

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