@paper-design/shaders 0.0.31 → 0.0.32

package/dist/shaders/warp.js

@@ -1,128 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
-import { declarePI, declareRandom, declareRotate, colorBandingFix } from "../shader-utils.js";
-const warpMeta = {
-  maxColorCount: 10
-};
-const warpFragmentShader = `#version 300 es
-precision mediump float;
-
-uniform float u_time;
-uniform float u_scale;
-uniform vec2 u_resolution;
-
-uniform vec4 u_colors[${warpMeta.maxColorCount}];
-uniform float u_colorsCount;
-uniform float u_proportion;
-uniform float u_softness;
-uniform float u_shape;
-uniform float u_shapeScale;
-uniform float u_distortion;
-uniform float u_swirl;
-uniform float u_swirlIterations;
-
-${sizingVariablesDeclaration}
-
-out vec4 fragColor;
-
-${declarePI}
-${declareRandom}
-${declareRotate}
-
-float valueNoise(vec2 st) {
-  vec2 i = floor(st);
-  vec2 f = fract(st);
-  float a = random(i);
-  float b = random(i + vec2(1.0, 0.0));
-  float c = random(i + vec2(0.0, 1.0));
-  float d = random(i + vec2(1.0, 1.0));
-
-  // Smoothstep for interpolation
-  vec2 u = f * f * (3.0 - 2.0 * f);
-
-  // Do the interpolation as two nested mix operations
-  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries
-  float x1 = mix(a, b, u.x);
-  float x2 = mix(c, d, u.x);
-  return mix(x1, x2, u.y);
-
-}
-
-void main() {
-  vec2 uv = v_patternUV;
-  uv *= .005;
-
-  float t = .01 * u_time;
-
-  float noise_scale = .0005 + .006 * u_scale;
-
-  float n1 = valueNoise(uv * 1. + t);
-  float n2 = valueNoise(uv * 2. - t);
-  float angle = n1 * TWO_PI;
-  uv.x += 4. * u_distortion * n2 * cos(angle);
-  uv.y += 4. * u_distortion * n2 * sin(angle);
-
-  float iterationsNumber = ceil(clamp(u_swirlIterations, 1., 30.));
-  for (float i = 1.; i <= iterationsNumber; i++) {
-    uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);
-    uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);
-  }
-
-  float proportion = clamp(u_proportion, 0., 1.);
-
-  float shape = 0.;
-  if (u_shape < .5) {
-    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);
-    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);
-    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
-  } else if (u_shape < 1.5) {
-    vec2 stripesShape_uv = uv * (2. * u_shapeScale);
-    float f = fract(stripesShape_uv.y);
-    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);
-    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
-  } else {
-    float shapeScaling = 5. * (1. - u_shapeScale);
-    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));
-  }
-
-  float mixer = shape * (u_colorsCount - 1.);
-  vec4 gradient = u_colors[0];
-  gradient.rgb *= gradient.a;
-  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {
-    if (i >= int(u_colorsCount)) break;
-    float localMixer = clamp(mixer - float(i - 1), 0.0, 1.0);
-
-    float localMixerStart = floor(localMixer);
-    float smoothed = smoothstep(.5 - u_softness * .5, .5 + u_softness * .5, localMixer - localMixerStart);
-    float localTStepped = localMixerStart + smoothed;
-
-    localMixer = mix(localTStepped, localMixer, u_softness);
-
-    vec4 c = u_colors[i];
-    c.rgb *= c.a;
-    gradient = mix(gradient, c, localMixer);
-  }
-
-  vec3 color = gradient.rgb;
-  float opacity = gradient.a;
-
-  ${colorBandingFix}
-
-  fragColor = vec4(color, opacity);
-}
-`;
-const WarpPatterns = {
-  checks: 0,
-  stripes: 1,
-  edge: 2
-};
-export {
-  WarpPatterns,
-  warpFragmentShader,
-  warpMeta
-};
-//# sourceMappingURL=warp.js.map

package/dist/shaders/warp.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/shaders/warp.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRandom, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * 3d Perlin noise with exposed parameters\n *\n * Uniforms include:\n * - u_colors (vec4[]): Input RGBA colors\n * - u_colorsCount (float): Number of active colors (`u_colors` length)\n * - u_proportion (0 .. 1): the proportion between colors (on 0.5 colors are equally distributed)\n * - u_softness (0 .. 1): the color blur (0 for pronounced edges, 1 for gradient)\n * - u_shape (0 ... 2): the color pattern to be distorted with noise & swirl\n *    - u_shape = 0 is checks\n *    - u_shape = 1 is stripes\n *    - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of color pattern (appies over the global scaling)\n * - u_distortion: the noisy distortion over the UV coordinate (applied before the overlapping swirl)\n * - u_swirl: the power of swirly distortion\n * - u_swirlIterations: the number of swirl iterations (layering curves effect)\n *\n */\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\nuniform vec2 u_resolution;\n\nuniform vec4 u_colors[${warpMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n\n}\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .005;\n\n  float t = .01 * u_time;\n\n  float noise_scale = .0005 + .006 * u_scale;\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(uv * 2. - t);\n  float angle = n1 * TWO_PI;\n  uv.x += 4. * u_distortion * n2 * cos(angle);\n  uv.y += 4. * u_distortion * n2 * sin(angle);\n\n  float iterationsNumber = ceil(clamp(u_swirlIterations, 1., 30.));\n  for (float i = 1.; i <= iterationsNumber; i++) {\n    uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);\n    uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float localMixer = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(localMixer);\n    float smoothed = smoothstep(.5 - u_softness * .5, .5 + u_softness * .5, localMixer - localMixerStart);\n    float localTStepped = localMixerStart + smoothed;\n\n    localMixer = mix(localTStepped, localMixer, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, localMixer);\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  rotation?: number;\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,eAAe,uBAAuB;AAElE,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAoBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOlB,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA6DS,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkB1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA8BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
-  "names": []
-}

package/dist/shaders/waves.js

@@ -1,68 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
-import { declarePI, declareRotate } from "../shader-utils.js";
-const wavesFragmentShader = `#version 300 es
-precision mediump float;
-
-uniform float u_scale;
-
-uniform vec4 u_colorFront;
-uniform vec4 u_colorBack;
-uniform float u_shape;
-uniform float u_frequency;
-uniform float u_amplitude;
-uniform float u_spacing;
-uniform float u_proportion;
-uniform float u_softness;
-
-${sizingVariablesDeclaration}
-
-out vec4 fragColor;
-
-${declarePI}
-${declareRotate}
-
-void main() {
-  vec2 shape_uv = v_patternUV;
-  shape_uv *= .05;
-
-  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);
-  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);
-  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);
-  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));
-
-  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));
-  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));
-  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));
-  offset *= 2. * u_amplitude;
-
-  float spacing = .02 + .98 * u_spacing;
-  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);
-
-  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);
-  edge_width += .5 * max(0., u_softness);
-  float dc = 1. - clamp(u_proportion, 0., 1.);
-  float res = smoothstep(dc - edge_width, dc + edge_width, shape);
-
-  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
-  float fgOpacity = u_colorFront.a;
-  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
-  float bgOpacity = u_colorBack.a;
-
-  vec3 color = fgColor * res;
-  float opacity = fgOpacity * res;
-
-  color += bgColor * (1. - opacity);
-  opacity += bgOpacity * (1. - opacity);
-
-  fragColor = vec4(color, opacity);
-}
-`;
-export {
-  wavesFragmentShader
-};
-//# sourceMappingURL=waves.js.map

package/dist/shaders/waves.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/shaders/waves.ts"],
-  "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRotate } from '../shader-utils.js';\n\n/**\n * Waves static pattern on the transparent background\n *\n * Uniforms include:\n * u_colorFront - the first color\n * u_colorBack - the second color\n * u_shape (0 ... 3) - the line shaping coefficient, non-integer\n   values allowed and produce mixed shapes\n   - u_shape = 0 is zigzag\n   - u_shape = 1 is perfect sine wave\n   - u_shape = 2 is irregular wave #1\n   - u_shape = 3 is irregular wave #2\n * u_frequency - the wave frequency\n * u_amplitude - the wave amplitude\n * u_spacing - the density of pattern lines\n * u_proportion (0 ... 1) - the proportion of stroke width to the pattern step\n * u_softness (0 ... 1) - the blur applied to the lines edges\n */\nexport const wavesFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_scale;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_proportion;\nuniform float u_softness;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .05;\n\n  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);\n  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n\n  float spacing = .02 + .98 * u_spacing;\n  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);\n\n  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);\n  edge_width += .5 * max(0., u_softness);\n  float dc = 1. - clamp(u_proportion, 0., 1.);\n  float res = smoothstep(dc - edge_width, dc + edge_width, shape);\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WavesUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_shape: number;\n  u_frequency: number;\n  u_amplitude: number;\n  u_spacing: number;\n  u_proportion: number;\n  u_softness: number;\n}\n\nexport interface WavesParams extends ShaderSizingParams {\n  colorFront?: string;\n  colorBack?: string;\n  rotation?: number;\n  shape?: number;\n  frequency?: number;\n  amplitude?: number;\n  spacing?: number;\n  proportion?: number;\n  softness?: number;\n}\n"],
-  "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB;AAoBlC,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAczC,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

package/dist/types.js

@@ -1,6 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}