@paper-design/shaders 0.0.8 → 0.0.9

package/dist/index.d.ts

@@ -1,5 +1,78 @@
-/** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */
-export { ShaderMount } from './shader-mount';
-/** An example fragment shader that renders a grainy texture over top of blobby animated clouds */
-export { grainCloudsFragmentShader, type GrainCloudsUniforms, } from './shaders/grain-clouds';
-export { getShaderColorFromString } from './shader-mount';
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class ShaderMount {
+	private canvas;
+	private gl;
+	private program;
+	private uniformLocations;
+	/** The fragment shader that we are using */
+	private fragmentShader;
+	/** Stores the RAF for the render loop */
+	private rafId;
+	/** Time of the last rendered frame */
+	private lastFrameTime;
+	/** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
+	private totalAnimationTime;
+	/** Whether we RAF the render or not */
+	private isAnimated;
+	/** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
+	private providedUniforms;
+	/** Just a sanity check to make sure frames don't run after we're disposed */
+	private hasBeenDisposed;
+	/** If the resolution of the canvas has changed since the last render */
+	private resolutionChanged;
+	constructor(canvas: HTMLCanvasElement, fragmentShader: string, uniforms?: Record<string, number | number[]>, webGlContextAttributes?: WebGLContextAttributes, animated?: boolean);
+	private initWebGL;
+	private setupPositionAttribute;
+	private setupUniforms;
+	private resizeObserver;
+	private setupResizeObserver;
+	private handleResize;
+	private render;
+	private requestRender;
+	private updateProvidedUniforms;
+	/** Start the animation loop, can be called during instantiation or later by an outside source */
+	startAnimating: () => void;
+	/** Stop the animation loop */
+	stopAnimating: () => void;
+	/** Update the uniforms that are provided by the outside shader */
+	setUniforms: (newUniforms: Record<string, number | number[]>) => void;
+	/** Dispose of the shader mount, cleaning up all of the WebGL resources */
+	dispose: () => void;
+}
+/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */
+export declare function getShaderColorFromString(colorString: string): [
+	number,
+	number,
+	number
+];
+export type GrainCloudsUniforms = {
+	u_color1: [
+		number,
+		number,
+		number
+	];
+	u_color2: [
+		number,
+		number,
+		number
+	];
+	u_noiseScale: number;
+	u_noiseSpeed: number;
+	u_grainAmount: number;
+};
+/**
+ * Renders a grainy texture over top of blobby animated clouds
+ * This is an example shader that we're using to bootstrap the project
+ * Generated by Claude 3.5 Sonnet
+ *
+ * Uniforms include:
+ * u_color1: The first color of the clouds
+ * u_color2: The second color of the clouds
+ * u_noiseScale: The scale of the noise
+ * u_noiseSpeed: The speed of the noise
+ * u_grainAmount: The amount of grain on the texture
+ */
+export declare const grainCloudsFragmentShader = "\n  precision highp float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n  uniform vec3 u_color1;\n  uniform vec3 u_color2;\n  uniform float u_noiseScale;\n  uniform float u_noiseSpeed;\n  uniform float u_grainAmount;\n\n  // Simplex 2D noise\n  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n\n  float snoise(vec2 v) {\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n                        -0.577350269189626, 0.024390243902439);\n    vec2 i  = floor(v + dot(v, C.yy));\n    vec2 x0 = v -   i + dot(i, C.xx);\n    vec2 i1;\n    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n    vec4 x12 = x0.xyxy + C.xxzz;\n    x12.xy -= i1;\n    i = mod(i, 289.0);\n    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),\n      dot(x12.zw,x12.zw)), 0.0);\n    m = m*m ;\n    m = m*m ;\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n    vec3 g;\n    g.x = a0.x * x0.x + h.x * x0.y;\n    g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n    return 130.0 * dot(m, g);\n  }\n\n  void main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    // Calculate the aspect ratio of the shader\n    float shaderAspect = u_resolution.x / u_resolution.y;\n\n    // Define the aspect ratio of your content (e.g., 1.0 for square)\n    float contentAspect = 1.0;\n\n    // Adjust st to maintain content aspect ratio\n    if (shaderAspect > contentAspect) {\n      float scale = shaderAspect / contentAspect;\n      st.x = (st.x - 0.5) * scale + 0.5;\n    } else {\n      float scale = contentAspect / shaderAspect;\n      st.y = (st.y - 0.5) * scale + 0.5;\n    }\n\n    // Create blobby texture\n    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);\n    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);\n    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);\n    n = n * 0.5 + 0.5;\n\n    // Color interpolation\n    vec3 color = mix(u_color1, u_color2, n);\n\n    // Add grain\n    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * u_grainAmount;\n\n    gl_FragColor = vec4(color, 1.0);\n  }\n";
+
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "license": "MIT",
   "type": "module",
   "publishConfig": {

package/dist/shader-mount.d.ts

@@ -1,42 +0,0 @@
-export declare class ShaderMount {
-    private canvas;
-    private gl;
-    private program;
-    private uniformLocations;
-    /** The fragment shader that we are using */
-    private fragmentShader;
-    /** Stores the RAF for the render loop */
-    private rafId;
-    /** Time of the last rendered frame */
-    private lastFrameTime;
-    /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
-    private totalAnimationTime;
-    /** Whether we RAF the render or not */
-    private isAnimated;
-    /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
-    private providedUniforms;
-    /** Just a sanity check to make sure frames don't run after we're disposed */
-    private hasBeenDisposed;
-    /** If the resolution of the canvas has changed since the last render */
-    private resolutionChanged;
-    constructor(canvas: HTMLCanvasElement, fragmentShader: string, uniforms?: Record<string, number | number[]>, webGlContextAttributes?: WebGLContextAttributes, animated?: boolean);
-    private initWebGL;
-    private setupPositionAttribute;
-    private setupUniforms;
-    private resizeObserver;
-    private setupResizeObserver;
-    private handleResize;
-    private render;
-    private requestRender;
-    private updateProvidedUniforms;
-    /** Start the animation loop, can be called during instantiation or later by an outside source */
-    startAnimating: () => void;
-    /** Stop the animation loop */
-    stopAnimating: () => void;
-    /** Update the uniforms that are provided by the outside shader */
-    setUniforms: (newUniforms: Record<string, number | number[]>) => void;
-    /** Dispose of the shader mount, cleaning up all of the WebGL resources */
-    dispose: () => void;
-}
-/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */
-export declare function getShaderColorFromString(colorString: string): [number, number, number];

package/dist/shaders/grain-clouds.d.ts

@@ -1,20 +0,0 @@
-export type GrainCloudsUniforms = {
-    u_color1: [number, number, number];
-    u_color2: [number, number, number];
-    u_noiseScale: number;
-    u_noiseSpeed: number;
-    u_grainAmount: number;
-};
-/**
- * Renders a grainy texture over top of blobby animated clouds
- * This is an example shader that we're using to bootstrap the project
- * Generated by Claude 3.5 Sonnet
- *
- * Uniforms include:
- * u_color1: The first color of the clouds
- * u_color2: The second color of the clouds
- * u_noiseScale: The scale of the noise
- * u_noiseSpeed: The speed of the noise
- * u_grainAmount: The amount of grain on the texture
- */
-export declare const grainCloudsFragmentShader = "\n  precision highp float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n  uniform vec3 u_color1;\n  uniform vec3 u_color2;\n  uniform float u_noiseScale;\n  uniform float u_noiseSpeed;\n  uniform float u_grainAmount;\n\n  // Simplex 2D noise\n  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n\n  float snoise(vec2 v) {\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n                        -0.577350269189626, 0.024390243902439);\n    vec2 i  = floor(v + dot(v, C.yy));\n    vec2 x0 = v -   i + dot(i, C.xx);\n    vec2 i1;\n    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n    vec4 x12 = x0.xyxy + C.xxzz;\n    x12.xy -= i1;\n    i = mod(i, 289.0);\n    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),\n      dot(x12.zw,x12.zw)), 0.0);\n    m = m*m ;\n    m = m*m ;\n    vec3 x = 2.0 * fract(p * C.www) - 1.0;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n    vec3 g;\n    g.x = a0.x * x0.x + h.x * x0.y;\n    g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n    return 130.0 * dot(m, g);\n  }\n\n  void main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    // Calculate the aspect ratio of the shader\n    float shaderAspect = u_resolution.x / u_resolution.y;\n\n    // Define the aspect ratio of your content (e.g., 1.0 for square)\n    float contentAspect = 1.0;\n\n    // Adjust st to maintain content aspect ratio\n    if (shaderAspect > contentAspect) {\n      float scale = shaderAspect / contentAspect;\n      st.x = (st.x - 0.5) * scale + 0.5;\n    } else {\n      float scale = contentAspect / shaderAspect;\n      st.y = (st.y - 0.5) * scale + 0.5;\n    }\n\n    // Create blobby texture\n    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);\n    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);\n    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);\n    n = n * 0.5 + 0.5;\n\n    // Color interpolation\n    vec3 color = mix(u_color1, u_color2, n);\n\n    // Add grain\n    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * u_grainAmount;\n\n    gl_FragColor = vec4(color, 1.0);\n  }\n";