@paper-design/shaders 0.0.14 → 0.0.16

package/README.md

@@ -5,16 +5,25 @@ This is the vanilla JS of Paper Shaders. You can also find framework specific wr
 ## Example usage:
 
 ```
-import { ShaderMount, meshGradientFragmentShader } from '@paper-design/shaders';
+import { ShaderMount, meshGradientFragmentShader, getShaderColorFromString } from "@paper-design/shaders";
 
-const myCanvas = document.createElement('canvas');
+const myCanvas = document.createElement("canvas");
+myCanvas.width = 300;
+myCanvas.height = 300;
+document.body.appendChild(myCanvas);
 
 const shaderParams = {
-  colors: ['#283BFC', color2: '#FF2828'],
-  blur: 0.6,
-  frequency: 0.8,
-  animationSpeed: 1
-}
+  u_color1: getShaderColorFromString("#283BFC"),
+  u_color2: getShaderColorFromString("#FF2828"),
+  u_color3: getShaderColorFromString("#dddddd"),
+  u_color4: getShaderColorFromString("#800080")
+};
 
-const meshGradient = new ShaderMount(myCanvas, meshGradientFragmentShader, shaderParams);
+const meshGradient = new ShaderMount(
+  myCanvas,
+  meshGradientFragmentShader,
+  shaderParams
+);
+
+meshGradient.setUniforms(shaderParams);
 ```

package/dist/get-shader-color-from-string.d.ts

@@ -0,0 +1,3 @@
+/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGBA array */
+export declare function getShaderColorFromString(colorString: string | [number, number, number] | [number, number, number, number] | undefined, fallback?: string | [number, number, number] | [number, number, number, number]): [number, number, number, number];
+export declare const clamp: (n: number, min: number, max: number) => number;

package/dist/get-shader-color-from-string.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,9 +1,24 @@
 /** 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';
 /** A shader that renders a mesh gradient with a rotating noise pattern and several layers of fractal noise */
 export { meshGradientFragmentShader, type MeshGradientUniforms } from './shaders/mesh-gradient';
+/** Fractional Brownian motion (fBm) noise over the polar coordinates, masked with ring shape */
+export { smokeRingFragmentShader, type SmokeRingUniforms } from './shaders/smoke-ring';
 /** A shader rendering a fractal-like structure made of several layers of since-arches */
 export { neuroNoiseFragmentShader, type NeuroNoiseUniforms } from './shaders/neuro-noise';
-export { getShaderColorFromString } from './shader-mount';
+/** A shader rendering an animated dots pattern based on Voronoi diagram */
+export { dotsOrbitFragmentShader, type DotsOrbitUniforms } from './shaders/dots-orbit';
+/** A shader rendering a static dots pattern */
+export { dotsGridFragmentShader, DotsGridShapes, type DotsGridShape, type DotsGridUniforms } from './shaders/dots-grid';
+/** A shader that calculates a combination of 2 simplex noises with result rendered as a stepped gradient */
+export { steppedSimplexNoiseFragmentShader, type SteppedSimplexNoiseUniforms } from './shaders/stepped-simplex-noise';
+/** A number of circlular shapes blened in a gooey way */
+export { metaballsFragmentShader, type MetaballsUniforms } from './shaders/metaballs';
+/** 2d noise with max number of parameters to be exposed to users */
+export { perlinNoiseFragmentShader, type PerlinNoiseUniforms } from './shaders/perlin-noise';
+/** Voronoi diagram: classic + rounded edges */
+export { voronoiFragmentShader, type VoronoiUniforms } from './shaders/voronoi';
+/** Waves pattern */
+export { wavesFragmentShader, type WavesUniforms } from './shaders/waves';
+export { getShaderColorFromString } from './get-shader-color-from-string';