@paper-design/shaders 0.0.39 → 0.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +3 -24
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +12 -0
  4. package/dist/index.js.map +2 -2
  5. package/dist/shader-mount.d.ts +2 -2
  6. package/dist/shader-mount.js +25 -10
  7. package/dist/shader-mount.js.map +2 -2
  8. package/dist/shader-utils.d.ts +1 -0
  9. package/dist/shader-utils.js +38 -0
  10. package/dist/shader-utils.js.map +2 -2
  11. package/dist/shaders/color-panels.d.ts +3 -0
  12. package/dist/shaders/color-panels.js +29 -16
  13. package/dist/shaders/color-panels.js.map +2 -2
  14. package/dist/shaders/dot-grid.js +3 -2
  15. package/dist/shaders/dot-grid.js.map +2 -2
  16. package/dist/shaders/dot-orbit.js +1 -2
  17. package/dist/shaders/dot-orbit.js.map +2 -2
  18. package/dist/shaders/grain-gradient.js +5 -5
  19. package/dist/shaders/grain-gradient.js.map +1 -1
  20. package/dist/shaders/liquid-metal.js +11 -11
  21. package/dist/shaders/liquid-metal.js.map +1 -1
  22. package/dist/shaders/mesh-gradient.js +1 -6
  23. package/dist/shaders/mesh-gradient.js.map +2 -2
  24. package/dist/shaders/neuro-noise.js +1 -2
  25. package/dist/shaders/neuro-noise.js.map +2 -2
  26. package/dist/shaders/perlin-noise.js +2 -2
  27. package/dist/shaders/perlin-noise.js.map +1 -1
  28. package/dist/shaders/pulsing-border.d.ts +8 -7
  29. package/dist/shaders/pulsing-border.js +119 -103
  30. package/dist/shaders/pulsing-border.js.map +2 -2
  31. package/dist/shaders/simplex-noise.js +13 -17
  32. package/dist/shaders/simplex-noise.js.map +2 -2
  33. package/dist/shaders/spiral.d.ts +3 -3
  34. package/dist/shaders/spiral.js +27 -30
  35. package/dist/shaders/spiral.js.map +2 -2
  36. package/dist/shaders/static-mesh-gradient.d.ts +43 -0
  37. package/dist/shaders/static-mesh-gradient.js +114 -0
  38. package/dist/shaders/static-mesh-gradient.js.map +7 -0
  39. package/dist/shaders/static-radial-gradient.d.ts +51 -0
  40. package/dist/shaders/static-radial-gradient.js +155 -0
  41. package/dist/shaders/static-radial-gradient.js.map +7 -0
  42. package/dist/shaders/swirl.d.ts +3 -3
  43. package/dist/shaders/swirl.js +18 -17
  44. package/dist/shaders/swirl.js.map +2 -2
  45. package/dist/shaders/voronoi.js +2 -2
  46. package/dist/shaders/voronoi.js.map +1 -1
  47. package/dist/shaders/warp.js +16 -11
  48. package/dist/shaders/warp.js.map +2 -2
  49. package/dist/shaders/waves.js +6 -10
  50. package/dist/shaders/waves.js.map +2 -2
  51. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/warp.ts"],
4
- "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, declareValueNoise, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n * Iterative layered + swirl-based distortion applied over different layouts (shapes)\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_shape (float used as integer):\n * ---- 0: checks\n * ---- 1: stripes\n * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of layouts (underlying shapes)\n * - u_distortion: value noise distortion over the UV coordinate\n * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\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${declareValueNoise}\n\n\nvoid main() {\n vec2 uv = v_patternUV;\n uv *= .005;\n\n float t = 0.0625 * u_time;\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"],
5
- "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,mBAAmB,eAAe,uBAAuB;AAErF,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAoBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,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,EACb,iBAAiB;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,wBAyCK,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;",
4
+ "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, declareValueNoise, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n maxColorCount: 10,\n} as const;\n\n/**\n * Iterative layered + swirl-based distortion applied over different layouts (shapes)\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_shape (float used as integer):\n * ---- 0: checks\n * ---- 1: stripes\n * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of layouts (underlying shapes)\n * - u_distortion: value noise distortion over the UV coordinate\n * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\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${declareValueNoise}\n\n\nvoid main() {\n vec2 uv = v_patternUV;\n uv *= .5;\n\n float t = 0.0625 * u_time;\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 swirl = u_swirl;\n for (int i = 1; i <= 20; i++) {\n if (i >= int(u_swirlIterations)) break;\n float iFloat = float(i);\n// swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));\n uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\n uv.y += swirl / iFloat * cos(t + iFloat * 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 float aa = fwidth(shape);\n for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n float m = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n float localMixerStart = floor(m);\n float softness = .5 * u_softness + fwidth(m);\n float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\n float stepped = localMixerStart + smoothed;\n\n m = mix(stepped, m, u_softness);\n\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, m);\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"],
5
+ "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,mBAAmB,eAAe,uBAAuB;AAErF,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAoBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,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,EACb,iBAAiB;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,wBA6CK,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA8BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
6
6
  "names": []
7
7
  }
@@ -4,12 +4,10 @@
4
4
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
5
 
6
6
  import { sizingVariablesDeclaration } from "../shader-sizing.js";
7
- import { declarePI, declareRotate } from "../shader-utils.js";
7
+ import { declarePI } from "../shader-utils.js";
8
8
  const wavesFragmentShader = `#version 300 es
9
9
  precision mediump float;
10
10
 
11
- uniform float u_scale;
12
-
13
11
  uniform vec4 u_colorFront;
14
12
  uniform vec4 u_colorBack;
15
13
  uniform float u_shape;
@@ -24,11 +22,10 @@ ${sizingVariablesDeclaration}
24
22
  out vec4 fragColor;
25
23
 
26
24
  ${declarePI}
27
- ${declareRotate}
28
25
 
29
26
  void main() {
30
27
  vec2 shape_uv = v_patternUV;
31
- shape_uv *= .04;
28
+ shape_uv *= 4.;
32
29
 
33
30
  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);
34
31
  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);
@@ -40,14 +37,13 @@ void main() {
40
37
  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));
41
38
  offset *= 2. * u_amplitude;
42
39
 
43
- float spacing = .02 + .98 * u_spacing;
40
+ float spacing = (.001 + u_spacing);
44
41
  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);
45
42
 
46
- float edge_width = .01 + .1 * abs(min(u_scale, 1.) - 1.);
47
- edge_width += .5 * max(0., u_softness);
43
+ float aa = .0001 + fwidth(shape);
48
44
  float dc = 1. - clamp(u_proportion, 0., 1.);
49
- float res = smoothstep(dc - edge_width, dc + edge_width, shape);
50
-
45
+ float res = smoothstep(dc - u_softness - aa, dc + u_softness + aa, shape);
46
+
51
47
  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
52
48
  float fgOpacity = u_colorFront.a;
53
49
  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/waves.ts"],
4
- "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRotate } from '../shader-utils.js';\n\n/**\n * Waveform pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - u_shape (float, fractional numbers allowed):\n * ---- 0: zigzag\n * ---- 1: sine wave\n * ---- 2: irregular wave\n * ---- 3: irregular wave\n * - u_amplitude, u_frequency, u_spacing: wave settings\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n *\n * */\n\n// language=GLSL\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 *= .04;\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 = .01 + .1 * abs(min(u_scale, 1.) - 1.);\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"],
5
- "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,qBAAqB;AAmBlC,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;",
4
+ "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI } from '../shader-utils.js';\n\n/**\n * Waveform pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - u_shape (float, fractional numbers allowed):\n * ---- 0: zigzag\n * ---- 1: sine wave\n * ---- 2: irregular wave\n * ---- 3: irregular wave\n * - u_amplitude, u_frequency, u_spacing: wave settings\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n *\n * */\n\n// language=GLSL\nexport const wavesFragmentShader: string = `#version 300 es\nprecision mediump float;\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\nvoid main() {\n vec2 shape_uv = v_patternUV;\n shape_uv *= 4.;\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 = (.001 + u_spacing);\n float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);\n\n float aa = .0001 + fwidth(shape);\n float dc = 1. - clamp(u_proportion, 0., 1.);\n float res = smoothstep(dc - u_softness - aa, dc + u_softness + aa, 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"],
5
+ "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,iBAAiB;AAmBnB,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYzC,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;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;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paper-design/shaders",
3
- "version": "0.0.39",
3
+ "version": "0.0.40",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "sideEffects": false,