p5-paper-shaders

A lightweight adapter library for using Paper Shaders with p5.js.

This library makes it easy to use the beautiful, high-quality shaders from the Paper Design library directly in your p5.js sketches.

Installation

npm install p5-paper-shaders
```

## Basic Usage

Here is a simple example of how to use a paper shader in a p5.js sketch.

```javascript
import p5 from "p5";
import { createPaperShader, setCommonUniforms } from "p5-paper-shaders";

const sketch = (p) => {
  let myShader;

  p.setup = () => {
    // Shaders require WEBGL mode
    p.createCanvas(600, 600, p.WEBGL);

    // Create the shader (e.g., 'meshGradient', 'water', etc.)
    myShader = createPaperShader(p, "meshGradient");
  };

  p.draw = () => {
    p.background(0);

    // Helper to set common uniforms like time, resolution, scale
    // This handles u_time, u_resolution, u_scale, u_aspect...
    setCommonUniforms(myShader, {
      time: 100,
      resolution: [p.width, p.height],
      scale: 1.0,
    });

    // You can also set specific uniforms
    myShader.setUniform(
      "u_distortion",
      0.5 + Math.sin(p.millis() / 2000) * 0.2,
    );

    // Some shaders (like meshGradient) require color uniforms
    myShader.setUniform(
      "u_colors",
      [
        0.95, 0.4, 0.3, 1, 0.3, 0.7, 0.95, 1, 0.2, 0.95, 0.6, 1, 0.95, 0.8, 0.2,
        1, 0.8, 0.3, 0.9, 1,
      ],
    );
    myShader.setUniform("u_colorsCount", 5);

    // Apply the shader
    p.shader(myShader);

    // Draw a quad covering the screen to display the shader
    p.quad(-1, -1, 1, -1, 1, 1, -1, 1);
  };
};

new p5(sketch);

Available Functions

createPaperShader(graphics, shaderId)

Creates a p5.js shader object from the specified Paper Shader ID.

• graphics: Your p5 instance or graphics buffer (must be in WEBGL mode).
• shaderId: The name of the shader (e.g., meshGradient, water, halftoneDots).

setCommonUniforms(shader, options)

Sets standard uniforms that most Paper Shaders expect.

• shader: The p5.shader object.
• options: Object containing values for time, resolution, scale, etc.

Common Uniforms

• time: Time in seconds (u_time).
• resolution: [width, height] (u_resolution).
• scale: Global scale factor (u_scale).
• pixelRatio: Pixel density (u_pixelRatio).