@paper-design/shaders 0.0.29 → 0.0.31

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 (68) hide show
  1. package/README.md +7 -4
  2. package/dist/index.d.ts +25 -23
  3. package/dist/index.js +44 -23
  4. package/dist/index.js.map +2 -2
  5. package/dist/shader-mount.d.ts +5 -1
  6. package/dist/shader-mount.js +15 -2
  7. package/dist/shader-mount.js.map +2 -2
  8. package/dist/shader-sizing.d.ts +1 -1
  9. package/dist/shader-sizing.js +2 -5
  10. package/dist/shader-sizing.js.map +2 -2
  11. package/dist/shaders/color-panels.d.ts +48 -0
  12. package/dist/shaders/color-panels.js +213 -0
  13. package/dist/shaders/color-panels.js.map +7 -0
  14. package/dist/shaders/dithering.d.ts +29 -15
  15. package/dist/shaders/dithering.js +85 -61
  16. package/dist/shaders/dithering.js.map +2 -2
  17. package/dist/shaders/dot-grid.d.ts +1 -1
  18. package/dist/shaders/dot-grid.js +20 -13
  19. package/dist/shaders/dot-grid.js.map +2 -2
  20. package/dist/shaders/dot-orbit.d.ts +6 -3
  21. package/dist/shaders/dot-orbit.js +15 -11
  22. package/dist/shaders/dot-orbit.js.map +2 -2
  23. package/dist/shaders/god-rays.d.ts +9 -6
  24. package/dist/shaders/god-rays.js +15 -16
  25. package/dist/shaders/god-rays.js.map +2 -2
  26. package/dist/shaders/grain-gradient.d.ts +17 -5
  27. package/dist/shaders/grain-gradient.js +61 -37
  28. package/dist/shaders/grain-gradient.js.map +2 -2
  29. package/dist/shaders/liquid-metal.d.ts +27 -12
  30. package/dist/shaders/liquid-metal.js +64 -67
  31. package/dist/shaders/liquid-metal.js.map +2 -2
  32. package/dist/shaders/mesh-gradient.d.ts +3 -3
  33. package/dist/shaders/mesh-gradient.js +7 -7
  34. package/dist/shaders/mesh-gradient.js.map +1 -1
  35. package/dist/shaders/metaballs.d.ts +6 -3
  36. package/dist/shaders/metaballs.js +12 -11
  37. package/dist/shaders/metaballs.js.map +2 -2
  38. package/dist/shaders/neuro-noise.d.ts +12 -6
  39. package/dist/shaders/neuro-noise.js +27 -12
  40. package/dist/shaders/neuro-noise.js.map +2 -2
  41. package/dist/shaders/perlin-noise.d.ts +10 -10
  42. package/dist/shaders/perlin-noise.js +30 -22
  43. package/dist/shaders/perlin-noise.js.map +2 -2
  44. package/dist/shaders/pulsing-border.d.ts +3 -3
  45. package/dist/shaders/pulsing-border.js +25 -25
  46. package/dist/shaders/pulsing-border.js.map +1 -1
  47. package/dist/shaders/simplex-noise.d.ts +3 -3
  48. package/dist/shaders/simplex-noise.js +13 -13
  49. package/dist/shaders/simplex-noise.js.map +1 -1
  50. package/dist/shaders/smoke-ring.d.ts +3 -3
  51. package/dist/shaders/smoke-ring.js +7 -7
  52. package/dist/shaders/smoke-ring.js.map +1 -1
  53. package/dist/shaders/spiral.d.ts +8 -8
  54. package/dist/shaders/spiral.js +16 -8
  55. package/dist/shaders/spiral.js.map +2 -2
  56. package/dist/shaders/swirl.d.ts +5 -3
  57. package/dist/shaders/swirl.js +30 -19
  58. package/dist/shaders/swirl.js.map +2 -2
  59. package/dist/shaders/voronoi.d.ts +8 -8
  60. package/dist/shaders/voronoi.js +12 -12
  61. package/dist/shaders/voronoi.js.map +1 -1
  62. package/dist/shaders/warp.d.ts +3 -3
  63. package/dist/shaders/warp.js +32 -28
  64. package/dist/shaders/warp.js.map +2 -2
  65. package/dist/shaders/waves.d.ts +7 -7
  66. package/dist/shaders/waves.js +17 -9
  67. package/dist/shaders/waves.js.map +2 -2
  68. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/voronoi.ts"],
4
- "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI } from '../shader-utils';\n\nexport const voronoiMeta = {\n maxColorCount: 5,\n} as const;\n\n/**\n * Voronoi pattern by Ksenia Kondrashova\n * The variation of Voronoi pattern with cell edges. Big thanks to Inigo Quilez\n * https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms include:\n *\n * - `u_colors` (`vec4[]`): Array of RGBA colors used for cell filling\n * - `u_colorsCount` (`float`): Number of active colors in `u_colors`\n * - `u_colorBack` (`vec4`): RGBA color for the gaps between cells\n * - `u_colorGlow` (`vec4`): RGBA color for the radial shape on the cell edges\n * - `u_distortion` (`float`, 0 \u2013 0.5): Controls how far cell centers can be displaced from the regular grid\n * - `u_gap` (`float`): Width of the gaps between cells (gaps can't be removed completely due to artifacts of Voronoi cells)\n * - `u_innerGlow` (`float`): Controls the size of the radial glow inside each cell\n * - `u_stepsPerColor` (`float`): Discretization of the color transition\n * - `u_noiseTexture` (`sampler2D`): Replacement of standard hash function, added for better performance\n */\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorBack;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_innerGlow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n vec2 uv = floor(p) / 100. + .5;\n return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n vec2 ip = floor(x);\n vec2 fp = fract(x);\n\n vec2 mg, mr;\n float md = 8.;\n float rand = 0.;\n\n for (int j = -1; j <= 1; j++) {\n for (int i = -1; i <= 1; i++) {\n vec2 g = vec2(float(i), float(j));\n vec2 raw_hash = hash(ip + g);\n vec2 o = hash(ip + g);\n o = .5 + u_distortion * sin(t + TWO_PI * o);\n vec2 r = g + o - fp;\n float d = dot(r, r);\n\n if (d < md) {\n md = d;\n mr = r;\n mg = g;\n rand = raw_hash.x;\n }\n }\n }\n\n md = 8.;\n for (int j = -2; j <= 2; j++) {\n for (int i = -2; i <= 2; i++) {\n vec2 g = mg + vec2(float(i), float(j));\n vec2 o = hash(ip + g);\n o = .5 + u_distortion * sin(t + TWO_PI * o);\n vec2 r = g + o - fp;\n if (dot(mr - r, mr - r) > .00001) {\n md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n }\n }\n }\n\n return vec4(md, mr, rand);\n}\n\nvoid main() {\n vec2 shape_uv = v_patternUV;\n shape_uv *= .0125;\n\n float t = u_time;\n\n vec4 voronoiRes = voronoi(shape_uv, t);\n\n float shape = clamp(voronoiRes.w, 0., 1.);\n float mixer = shape * (u_colorsCount - 1.);\n mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n float steps = max(1., u_stepsPerColor);\n\n vec4 gradient = u_colors[0];\n gradient.rgb *= gradient.a;\n for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n localT = round(localT * steps) / steps;\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\n }\n\n if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n float localT = mixer + 1.;\n if (mixer > (u_colorsCount - 1.)) {\n localT = mixer - (u_colorsCount - 1.);\n }\n localT = round(localT * steps) / steps;\n vec4 cFst = u_colors[0];\n cFst.rgb *= cFst.a;\n vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n cLast.rgb *= cLast.a;\n gradient = mix(cLast, cFst, localT);\n }\n\n vec3 cellColor = gradient.rgb;\n float cellOpacity = gradient.a;\n\n float innerGlows = length(voronoiRes.yz * u_innerGlow + .1);\n innerGlows = pow(innerGlows, 1.5);\n\n vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * innerGlows);\n float opacity = cellOpacity + u_colorGlow.a * innerGlows;\n\n float edge = voronoiRes.x;\n float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n color = mix(u_colorBack.rgb * u_colorBack.a, color, edge);\n opacity = mix(u_colorBack.a, opacity, edge);\n\n fragColor = vec4(color, opacity); \n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_stepsPerColor: number;\n u_colorBack: [number, number, number, number];\n u_colorGlow: [number, number, number, number];\n u_distortion: number;\n u_gap: number;\n u_innerGlow: number;\n u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n stepsPerColor?: number;\n colorBack?: string;\n colorGlow?: string;\n distortion?: number;\n gap?: number;\n innerGlow?: number;\n}\n"],
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 } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n maxColorCount: 5,\n} as const;\n\n/**\n * Voronoi pattern by Ksenia Kondrashova\n * The variation of Voronoi pattern with cell edges. Big thanks to Inigo Quilez\n * https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms include:\n *\n * - `u_colors` (`vec4[]`): Array of RGBA colors used for cell filling\n * - `u_colorsCount` (`float`): Number of active colors in `u_colors`\n * - `u_colorBack` (`vec4`): RGBA color for the gaps between cells\n * - `u_colorGlow` (`vec4`): RGBA color for the radial shape on the cell edges\n * - `u_distortion` (`float`, 0 \u2013 0.5): Controls how far cell centers can be displaced from the regular grid\n * - `u_gap` (`float`): Width of the gaps between cells (gaps can't be removed completely due to artifacts of Voronoi cells)\n * - `u_glow` (`float`): Controls the size of the radial glow inside each cell\n * - `u_stepsPerColor` (`float`): Discretization of the color transition\n * - `u_noiseTexture` (`sampler2D`): Replacement of standard hash function, added for better performance\n */\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n vec2 uv = floor(p) / 100. + .5;\n return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n vec2 ip = floor(x);\n vec2 fp = fract(x);\n\n vec2 mg, mr;\n float md = 8.;\n float rand = 0.;\n\n for (int j = -1; j <= 1; j++) {\n for (int i = -1; i <= 1; i++) {\n vec2 g = vec2(float(i), float(j));\n vec2 raw_hash = hash(ip + g);\n vec2 o = hash(ip + g);\n o = .5 + u_distortion * sin(t + TWO_PI * o);\n vec2 r = g + o - fp;\n float d = dot(r, r);\n\n if (d < md) {\n md = d;\n mr = r;\n mg = g;\n rand = raw_hash.x;\n }\n }\n }\n\n md = 8.;\n for (int j = -2; j <= 2; j++) {\n for (int i = -2; i <= 2; i++) {\n vec2 g = mg + vec2(float(i), float(j));\n vec2 o = hash(ip + g);\n o = .5 + u_distortion * sin(t + TWO_PI * o);\n vec2 r = g + o - fp;\n if (dot(mr - r, mr - r) > .00001) {\n md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n }\n }\n }\n\n return vec4(md, mr, rand);\n}\n\nvoid main() {\n vec2 shape_uv = v_patternUV;\n shape_uv *= .0125;\n\n float t = u_time;\n\n vec4 voronoiRes = voronoi(shape_uv, t);\n\n float shape = clamp(voronoiRes.w, 0., 1.);\n float mixer = shape * (u_colorsCount - 1.);\n mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n float steps = max(1., u_stepsPerColor);\n\n vec4 gradient = u_colors[0];\n gradient.rgb *= gradient.a;\n for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {\n if (i >= int(u_colorsCount)) break;\n float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n localT = round(localT * steps) / steps;\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\n }\n\n if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n float localT = mixer + 1.;\n if (mixer > (u_colorsCount - 1.)) {\n localT = mixer - (u_colorsCount - 1.);\n }\n localT = round(localT * steps) / steps;\n vec4 cFst = u_colors[0];\n cFst.rgb *= cFst.a;\n vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n cLast.rgb *= cLast.a;\n gradient = mix(cLast, cFst, localT);\n }\n\n vec3 cellColor = gradient.rgb;\n float cellOpacity = gradient.a;\n\n float glows = length(voronoiRes.yz * u_glow + .1);\n glows = pow(glows, 1.5);\n\n vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n float opacity = cellOpacity + u_colorGlow.a * glows;\n\n float edge = voronoiRes.x;\n float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);\n opacity = mix(u_colorGap.a, opacity, edge);\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n u_colors: vec4[];\n u_colorsCount: number;\n u_stepsPerColor: number;\n u_colorGap: [number, number, number, number];\n u_colorGlow: [number, number, number, number];\n u_distortion: number;\n u_gap: number;\n u_glow: number;\n u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n colors?: string[];\n stepsPerColor?: number;\n colorGap?: string;\n colorGlow?: string;\n distortion?: number;\n gap?: number;\n glow?: number;\n}\n"],
5
5
  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,iBAAiB;AAEnB,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAmBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,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;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,wBAgEa,YAAY,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;",
6
6
  "names": []
7
7
  }
@@ -1,6 +1,6 @@
1
- import type { vec4 } from '../types';
2
- import type { ShaderMotionParams } from '../shader-mount';
3
- import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
1
+ import type { vec4 } from '../types.js';
2
+ import type { ShaderMotionParams } from '../shader-mount.js';
3
+ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
4
4
  export declare const warpMeta: {
5
5
  readonly maxColorCount: 10;
6
6
  };
@@ -3,13 +3,13 @@
3
3
  * https://github.com/paper-design/shaders *
4
4
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
5
 
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declarePI, declareRandom, declareRotate, colorBandingFix } from "../shader-utils";
6
+ import { sizingVariablesDeclaration } from "../shader-sizing.js";
7
+ import { declarePI, declareRandom, declareRotate, colorBandingFix } from "../shader-utils.js";
8
8
  const warpMeta = {
9
9
  maxColorCount: 10
10
10
  };
11
11
  const warpFragmentShader = `#version 300 es
12
- precision highp float;
12
+ precision mediump float;
13
13
 
14
14
  uniform float u_time;
15
15
  uniform float u_scale;
@@ -33,7 +33,7 @@ ${declarePI}
33
33
  ${declareRandom}
34
34
  ${declareRotate}
35
35
 
36
- float noise(vec2 st) {
36
+ float valueNoise(vec2 st) {
37
37
  vec2 i = floor(st);
38
38
  vec2 f = fract(st);
39
39
  float a = random(i);
@@ -53,54 +53,58 @@ float noise(vec2 st) {
53
53
  }
54
54
 
55
55
  void main() {
56
- vec2 shape_uv = v_patternUV;
57
- shape_uv *= .0025;
56
+ vec2 uv = v_patternUV;
57
+ uv *= .005;
58
58
 
59
59
  float t = .01 * u_time;
60
60
 
61
61
  float noise_scale = .0005 + .006 * u_scale;
62
62
 
63
- float n1 = noise(shape_uv * 1. + t);
64
- float n2 = noise(shape_uv * 2. - t);
63
+ float n1 = valueNoise(uv * 1. + t);
64
+ float n2 = valueNoise(uv * 2. - t);
65
65
  float angle = n1 * TWO_PI;
66
- shape_uv.x += 4. * u_distortion * n2 * cos(angle);
67
- shape_uv.y += 4. * u_distortion * n2 * sin(angle);
66
+ uv.x += 4. * u_distortion * n2 * cos(angle);
67
+ uv.y += 4. * u_distortion * n2 * sin(angle);
68
68
 
69
- float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));
70
- for (float i = 1.; i <= iterations_number; i++) {
71
- shape_uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * shape_uv.y);
72
- shape_uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * shape_uv.x);
69
+ float iterationsNumber = ceil(clamp(u_swirlIterations, 1., 30.));
70
+ for (float i = 1.; i <= iterationsNumber; i++) {
71
+ uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);
72
+ uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);
73
73
  }
74
74
 
75
75
  float proportion = clamp(u_proportion, 0., 1.);
76
76
 
77
77
  float shape = 0.;
78
78
  if (u_shape < .5) {
79
- vec2 checks_shape_uv = shape_uv * (.5 + 3.5 * u_shapeScale);
80
- shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);
79
+ vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);
80
+ shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);
81
81
  shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
82
82
  } else if (u_shape < 1.5) {
83
- vec2 stripes_shape_uv = shape_uv * (.25 + 3. * u_shapeScale);
84
- float f = fract(stripes_shape_uv.y);
83
+ vec2 stripesShape_uv = uv * (2. * u_shapeScale);
84
+ float f = fract(stripesShape_uv.y);
85
85
  shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);
86
86
  shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
87
87
  } else {
88
- float sh = 1. - shape_uv.y;
89
- float shape_scaling = 5. * (1. - u_shapeScale);
90
- shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));
88
+ float shapeScaling = 5. * (1. - u_shapeScale);
89
+ shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));
91
90
  }
92
91
 
93
92
  float mixer = shape * (u_colorsCount - 1.);
94
- mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
95
93
  vec4 gradient = u_colors[0];
96
94
  gradient.rgb *= gradient.a;
97
95
  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {
98
- if (i >= int(u_colorsCount)) break;
99
- float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
100
- localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);
101
- vec4 c = u_colors[i];
102
- c.rgb *= c.a;
103
- gradient = mix(gradient, c, localT);
96
+ if (i >= int(u_colorsCount)) break;
97
+ float localMixer = clamp(mixer - float(i - 1), 0.0, 1.0);
98
+
99
+ float localMixerStart = floor(localMixer);
100
+ float smoothed = smoothstep(.5 - u_softness * .5, .5 + u_softness * .5, localMixer - localMixerStart);
101
+ float localTStepped = localMixerStart + smoothed;
102
+
103
+ localMixer = mix(localTStepped, localMixer, u_softness);
104
+
105
+ vec4 c = u_colors[i];
106
+ c.rgb *= c.a;
107
+ gradient = mix(gradient, c, localMixer);
104
108
  }
105
109
 
106
110
  vec3 color = gradient.rgb;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/warp.ts"],
4
- "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRandom, declareRotate, colorBandingFix } from '../shader-utils';\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 highp 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 noise(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 shape_uv = v_patternUV;\n shape_uv *= .0025;\n\n float t = .01 * u_time;\n\n float noise_scale = .0005 + .006 * u_scale;\n\n float n1 = noise(shape_uv * 1. + t);\n float n2 = noise(shape_uv * 2. - t);\n float angle = n1 * TWO_PI;\n shape_uv.x += 4. * u_distortion * n2 * cos(angle);\n shape_uv.y += 4. * u_distortion * n2 * sin(angle);\n\n float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));\n for (float i = 1.; i <= iterations_number; i++) {\n shape_uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * shape_uv.y);\n shape_uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * shape_uv.x);\n }\n\n float proportion = clamp(u_proportion, 0., 1.);\n\n float shape = 0.;\n if (u_shape < .5) {\n vec2 checks_shape_uv = shape_uv * (.5 + 3.5 * u_shapeScale);\n shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);\n shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n } else if (u_shape < 1.5) {\n vec2 stripes_shape_uv = shape_uv * (.25 + 3. * u_shapeScale);\n float f = fract(stripes_shape_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 sh = 1. - shape_uv.y;\n float shape_scaling = 5. * (1. - u_shapeScale);\n shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));\n }\n\n float mixer = shape * (u_colorsCount - 1.);\n mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\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 localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n localT = smoothstep(.5 - .5 * u_softness, .5 + .5 * u_softness, localT);\n vec4 c = u_colors[i];\n c.rgb *= c.a;\n gradient = mix(gradient, c, localT);\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,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;AAAA;AAAA,wBA+DS,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY1C,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, 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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,10 @@
1
- import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
1
+ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
2
2
  /**
3
3
  * Waves static pattern on the transparent background
4
4
  *
5
5
  * Uniforms include:
6
- * u_color1 - the first color
7
- * u_color2 - the second color
6
+ * u_colorFront - the first color
7
+ * u_colorBack - the second color
8
8
  * u_shape (0 ... 3) - the line shaping coefficient, non-integer
9
9
  values allowed and produce mixed shapes
10
10
  - u_shape = 0 is zigzag
@@ -19,8 +19,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
19
19
  */
20
20
  export declare const wavesFragmentShader: string;
21
21
  export interface WavesUniforms extends ShaderSizingUniforms {
22
- u_color1: [number, number, number, number];
23
- u_color2: [number, number, number, number];
22
+ u_colorFront: [number, number, number, number];
23
+ u_colorBack: [number, number, number, number];
24
24
  u_shape: number;
25
25
  u_frequency: number;
26
26
  u_amplitude: number;
@@ -29,8 +29,8 @@ export interface WavesUniforms extends ShaderSizingUniforms {
29
29
  u_softness: number;
30
30
  }
31
31
  export interface WavesParams extends ShaderSizingParams {
32
- color1?: string;
33
- color2?: string;
32
+ colorFront?: string;
33
+ colorBack?: string;
34
34
  rotation?: number;
35
35
  shape?: number;
36
36
  frequency?: number;
@@ -3,15 +3,15 @@
3
3
  * https://github.com/paper-design/shaders *
4
4
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
5
 
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declarePI, declareRotate } from "../shader-utils";
6
+ import { sizingVariablesDeclaration } from "../shader-sizing.js";
7
+ import { declarePI, declareRotate } from "../shader-utils.js";
8
8
  const wavesFragmentShader = `#version 300 es
9
- precision highp float;
9
+ precision mediump float;
10
10
 
11
11
  uniform float u_scale;
12
12
 
13
- uniform vec4 u_color1;
14
- uniform vec4 u_color2;
13
+ uniform vec4 u_colorFront;
14
+ uniform vec4 u_colorBack;
15
15
  uniform float u_shape;
16
16
  uniform float u_frequency;
17
17
  uniform float u_amplitude;
@@ -45,11 +45,19 @@ void main() {
45
45
 
46
46
  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);
47
47
  edge_width += .5 * max(0., u_softness);
48
- float dc = clamp(u_proportion, 0., 1.);
49
- float t = smoothstep(dc - edge_width, dc + edge_width, shape);
48
+ float dc = 1. - clamp(u_proportion, 0., 1.);
49
+ float res = smoothstep(dc - edge_width, dc + edge_width, shape);
50
50
 
51
- vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, t);
52
- float opacity = mix(u_color1.a, u_color2.a, t);
51
+ vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
52
+ float fgOpacity = u_colorFront.a;
53
+ vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
54
+ float bgOpacity = u_colorBack.a;
55
+
56
+ vec3 color = fgColor * res;
57
+ float opacity = fgOpacity * res;
58
+
59
+ color += bgColor * (1. - opacity);
60
+ opacity += bgOpacity * (1. - opacity);
53
61
 
54
62
  fragColor = vec4(color, opacity);
55
63
  }
@@ -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';\nimport { declarePI, declareRotate } from '../shader-utils';\n\n/**\n * Waves static pattern on the transparent background\n *\n * Uniforms include:\n * u_color1 - the first color\n * u_color2 - 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 highp float;\n\nuniform float u_scale;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\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 = clamp(u_proportion, 0., 1.);\n float t = smoothstep(dc - edge_width, dc + edge_width, shape);\n\n vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, t);\n float opacity = mix(u_color1.a, u_color2.a, t);\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WavesUniforms extends ShaderSizingUniforms {\n u_color1: [number, number, number, number];\n u_color2: [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 color1?: string;\n color2?: 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;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;",
4
+ "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"],
5
+ "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;",
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.29",
3
+ "version": "0.0.31",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "sideEffects": false,