@paper-design/shaders 0.0.29 → 0.0.30-backbuffer-experiment.0

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 (58) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/shader-mount.d.ts +5 -1
  3. package/dist/shader-sizing.d.ts +1 -1
  4. package/dist/shaders/dithering.d.ts +21 -7
  5. package/dist/shaders/grain-gradient.d.ts +12 -2
  6. package/package.json +2 -2
  7. package/dist/get-shader-color-from-string.js +0 -93
  8. package/dist/get-shader-color-from-string.js.map +0 -7
  9. package/dist/get-shader-noise-texture.js +0 -23
  10. package/dist/get-shader-noise-texture.js.map +0 -7
  11. package/dist/index.js +0 -97
  12. package/dist/index.js.map +0 -7
  13. package/dist/shader-color-spaces.js +0 -96
  14. package/dist/shader-color-spaces.js.map +0 -7
  15. package/dist/shader-mount.js +0 -569
  16. package/dist/shader-mount.js.map +0 -7
  17. package/dist/shader-sizing.js +0 -196
  18. package/dist/shader-sizing.js.map +0 -7
  19. package/dist/shader-utils.js +0 -59
  20. package/dist/shader-utils.js.map +0 -7
  21. package/dist/shaders/dithering.js +0 -197
  22. package/dist/shaders/dithering.js.map +0 -7
  23. package/dist/shaders/dot-grid.js +0 -100
  24. package/dist/shaders/dot-grid.js.map +0 -7
  25. package/dist/shaders/dot-orbit.js +0 -120
  26. package/dist/shaders/dot-orbit.js.map +0 -7
  27. package/dist/shaders/god-rays.js +0 -134
  28. package/dist/shaders/god-rays.js.map +0 -7
  29. package/dist/shaders/grain-gradient.js +0 -219
  30. package/dist/shaders/grain-gradient.js.map +0 -7
  31. package/dist/shaders/liquid-metal.js +0 -224
  32. package/dist/shaders/liquid-metal.js.map +0 -7
  33. package/dist/shaders/mesh-gradient.js +0 -97
  34. package/dist/shaders/mesh-gradient.js.map +0 -7
  35. package/dist/shaders/metaballs.js +0 -109
  36. package/dist/shaders/metaballs.js.map +0 -7
  37. package/dist/shaders/neuro-noise.js +0 -66
  38. package/dist/shaders/neuro-noise.js.map +0 -7
  39. package/dist/shaders/perlin-noise.js +0 -193
  40. package/dist/shaders/perlin-noise.js.map +0 -7
  41. package/dist/shaders/pulsing-border.js +0 -218
  42. package/dist/shaders/pulsing-border.js.map +0 -7
  43. package/dist/shaders/simplex-noise.js +0 -103
  44. package/dist/shaders/simplex-noise.js.map +0 -7
  45. package/dist/shaders/smoke-ring.js +0 -141
  46. package/dist/shaders/smoke-ring.js.map +0 -7
  47. package/dist/shaders/spiral.js +0 -75
  48. package/dist/shaders/spiral.js.map +0 -7
  49. package/dist/shaders/swirl.js +0 -80
  50. package/dist/shaders/swirl.js.map +0 -7
  51. package/dist/shaders/voronoi.js +0 -143
  52. package/dist/shaders/voronoi.js.map +0 -7
  53. package/dist/shaders/warp.js +0 -124
  54. package/dist/shaders/warp.js.map +0 -7
  55. package/dist/shaders/waves.js +0 -60
  56. package/dist/shaders/waves.js.map +0 -7
  57. package/dist/types.js +0 -6
  58. package/dist/types.js.map +0 -7
@@ -1,196 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- const sizingVariablesDeclaration = `
7
- in vec2 v_objectUV;
8
- in vec2 v_responsiveUV;
9
- in vec2 v_responsiveBoxGivenSize;
10
- in vec2 v_patternUV;`;
11
- const sizingDebugVariablesDeclaration = `
12
- in vec2 v_objectBoxSize;
13
- in vec2 v_objectHelperBox;
14
- in vec2 v_responsiveBoxSize;
15
- in vec2 v_responsiveHelperBox;
16
- in vec2 v_patternBoxSize;
17
- in vec2 v_patternHelperBox;`;
18
- const sizingUniformsDeclaration = `
19
- uniform float u_originX;
20
- uniform float u_originY;
21
- uniform float u_worldWidth;
22
- uniform float u_worldHeight;
23
- uniform float u_fit;
24
-
25
- uniform float u_scale;
26
- uniform float u_rotation;
27
- uniform float u_offsetX;
28
- uniform float u_offsetY;`;
29
- const sizingUV = `
30
-
31
- vec2 uv = gl_FragCoord.xy / u_resolution.xy;
32
- #ifdef USE_PIXELIZATION
33
- float pxSize = u_pxSize * u_pixelRatio;
34
- vec2 pxSizeUv = gl_FragCoord.xy;
35
- pxSizeUv -= .5 * u_resolution;
36
- pxSizeUv /= pxSize;
37
- vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy;
38
- roundedUv += .5;
39
- if (u_pxRounded == true) {
40
- uv = roundedUv;
41
- }
42
- #endif
43
- uv -= .5;
44
-
45
-
46
- // ===================================================
47
- // sizing params shared between objects and patterns
48
-
49
- vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
50
- vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
51
- givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
52
- vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));
53
- float r = u_rotation * 3.14159265358979323846 / 180.;
54
- mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
55
- vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
56
-
57
-
58
- // ===================================================
59
- // Sizing api for objects (graphics with fixed ratio)
60
-
61
- #ifdef USE_OBJECT_SIZING
62
- float fixedRatio = 1.;
63
- vec2 fixedRatioBoxGivenSize = vec2(
64
- (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
65
- (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
66
- );
67
- vec2 objectBoxSize = vec2(0.);
68
- // fit = none
69
- objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);
70
- if (u_fit == 1.) { // fit = contain
71
- objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);
72
- } else if (u_fit == 2.) { // fit = cover
73
- objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);
74
- }
75
- objectBoxSize.y = objectBoxSize.x / fixedRatio;
76
- vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
77
-
78
- #ifdef ADD_HELPERS
79
- vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;
80
- objectHelperBox -= .5;
81
- objectHelperBox *= objectWorldScale;
82
- objectHelperBox += boxOrigin * (objectWorldScale - 1.);
83
- #endif
84
-
85
- vec2 objectUV = uv;
86
- objectUV *= objectWorldScale;
87
- objectUV += boxOrigin * (objectWorldScale - 1.);
88
- objectUV += vec2(-u_offsetX, u_offsetY);
89
- objectUV /= u_scale;
90
- objectUV = graphicRotation * objectUV;
91
- #endif
92
-
93
- // ===================================================
94
-
95
- // ===================================================
96
- // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)
97
-
98
- #ifdef USE_PATTERN_SIZING
99
- float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
100
- vec2 patternBoxGivenSize = vec2(
101
- (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
102
- (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
103
- );
104
- vec2 patternBoxSize = vec2(0.);
105
- // fit = none
106
- patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
107
- float patternWorldNoFitBoxWidth = patternBoxSize.x;
108
- if (u_fit == 1.) { // fit = contain
109
- patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
110
- } else if (u_fit == 2.) { // fit = cover
111
- patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
112
- }
113
- patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
114
- vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
115
-
116
- #ifdef ADD_HELPERS
117
- vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;
118
- patternHelperBox -= .5;
119
- patternHelperBox *= patternWorldScale;
120
- patternHelperBox += boxOrigin * (patternWorldScale - 1.);
121
- #endif
122
-
123
- vec2 patternUV = uv;
124
- patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;
125
- patternUV += boxOrigin;
126
- patternUV -= boxOrigin / patternWorldScale;
127
- patternUV *= u_resolution.xy;
128
- patternUV /= u_pixelRatio;
129
- if (u_fit > 0.) {
130
- patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);
131
- }
132
- patternUV /= u_scale;
133
- patternUV = graphicRotation * patternUV;
134
- patternUV += boxOrigin / patternWorldScale;
135
- patternUV -= boxOrigin;
136
- patternUV += .5;
137
- #endif
138
- `;
139
- const drawSizingHelpers = `
140
- vec2 worldBoxDist = abs(helperBox);
141
- float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));
142
- color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);
143
- opacity += boxStroke;
144
-
145
- vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);
146
- vec2 boxOriginDist = helperBox + boxOriginCopy;
147
- boxOriginDist.x *= (boxSize.x / boxSize.y);
148
- float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));
149
-
150
- vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);
151
- graphicOriginPointDist.x *= (boxSize.x / boxSize.y);
152
- float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));
153
-
154
- color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);
155
- opacity += boxOriginPoint;
156
- color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);
157
- opacity += graphicOriginPoint;
158
- `;
159
- const defaultObjectSizing = {
160
- fit: "contain",
161
- scale: 1,
162
- rotation: 0,
163
- offsetX: 0,
164
- offsetY: 0,
165
- originX: 0.5,
166
- originY: 0.5,
167
- worldWidth: 0,
168
- worldHeight: 0
169
- };
170
- const defaultPatternSizing = {
171
- fit: "none",
172
- scale: 1,
173
- rotation: 0,
174
- offsetX: 0,
175
- offsetY: 0,
176
- originX: 0.5,
177
- originY: 0.5,
178
- worldWidth: 0,
179
- worldHeight: 0
180
- };
181
- const ShaderFitOptions = {
182
- none: 0,
183
- contain: 1,
184
- cover: 2
185
- };
186
- export {
187
- ShaderFitOptions,
188
- defaultObjectSizing,
189
- defaultPatternSizing,
190
- drawSizingHelpers,
191
- sizingDebugVariablesDeclaration,
192
- sizingUV,
193
- sizingUniformsDeclaration,
194
- sizingVariablesDeclaration
195
- };
196
- //# sourceMappingURL=shader-sizing.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/shader-sizing.ts"],
4
- "sourcesContent": ["/*\n ===================================================================\n The space coordinates passed from the vertex shader.\n\n `sizingVariablesDeclaration` must be included in every fragment\n shader\u2014unless we want to apply sizing to the coordinates directly\n in the fragment shader.\n\n So far, the only exception is when we need to apply pixelization\n before sizing (e.g., to make dithering pixels independent of sizing).\n*/\nexport const sizingVariablesDeclaration = `\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;`;\n\n/*\n ===================================================================\n Additional variables used only for drawing a sizing overlay.\n*/\nexport const sizingDebugVariablesDeclaration = `\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;`;\n\n/*\n ===================================================================\n In most cases, sizing UNIFORMS are used only in the vertex shader.\n But there are cases where we need to pass them to the fragment shader\n as well:\n - dithering pixelization where all the sizing happens in fragment\n - drawing the sizing helpers\n*/\nexport const sizingUniformsDeclaration = `\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;`;\n\n/*\n ===================================================================\n In most cases, sizing TRANSFORMS are applied in the vertex shader.\n For exceptions (e.g., dithering pixelization), the operations below\n need to be included in the fragment shader instead.\n\n Currently, only `objectUV` and `patternUV` are supported.\n The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part.\n*/\nexport const sizingUV = `\n\n vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n #ifdef USE_PIXELIZATION\n float pxSize = u_pxSize * u_pixelRatio;\n vec2 pxSizeUv = gl_FragCoord.xy;\n pxSizeUv -= .5 * u_resolution;\n pxSizeUv /= pxSize;\n vec2 roundedUv = floor(pxSizeUv) * pxSize / u_resolution.xy; \n roundedUv += .5;\n if (u_pxRounded == true) {\n uv = roundedUv;\n } \n #endif\n uv -= .5;\n\n \n // ===================================================\n // sizing params shared between objects and patterns\n \n vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n float r = u_rotation * 3.14159265358979323846 / 180.;\n mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n \n // ===================================================\n // Sizing api for objects (graphics with fixed ratio)\n\n #ifdef USE_OBJECT_SIZING\n float fixedRatio = 1.;\n vec2 fixedRatioBoxGivenSize = vec2(\n (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n );\n vec2 objectBoxSize = vec2(0.);\n // fit = none\n objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n if (u_fit == 1.) { // fit = contain\n objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n } else if (u_fit == 2.) { // fit = cover\n objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n }\n objectBoxSize.y = objectBoxSize.x / fixedRatio;\n vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n \n #ifdef ADD_HELPERS\n vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n objectHelperBox -= .5;\n objectHelperBox *= objectWorldScale;\n objectHelperBox += boxOrigin * (objectWorldScale - 1.); \n #endif\n \n vec2 objectUV = uv;\n objectUV *= objectWorldScale;\n objectUV += boxOrigin * (objectWorldScale - 1.);\n objectUV += vec2(-u_offsetX, u_offsetY);\n objectUV /= u_scale;\n objectUV = graphicRotation * objectUV;\n #endif\n \n // ===================================================\n \n // ===================================================\n // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n \n #ifdef USE_PATTERN_SIZING\n float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n vec2 patternBoxGivenSize = vec2(\n (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n );\n vec2 patternBoxSize = vec2(0.);\n // fit = none\n patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n float patternWorldNoFitBoxWidth = patternBoxSize.x;\n if (u_fit == 1.) { // fit = contain\n patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n } else if (u_fit == 2.) { // fit = cover\n patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n }\n patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n \n #ifdef ADD_HELPERS \n vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n patternHelperBox -= .5;\n patternHelperBox *= patternWorldScale;\n patternHelperBox += boxOrigin * (patternWorldScale - 1.); \n #endif\n \n vec2 patternUV = uv;\n patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n patternUV += boxOrigin;\n patternUV -= boxOrigin / patternWorldScale;\n patternUV *= u_resolution.xy;\n patternUV /= u_pixelRatio;\n if (u_fit > 0.) {\n patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n }\n patternUV /= u_scale;\n patternUV = graphicRotation * patternUV;\n patternUV += boxOrigin / patternWorldScale;\n patternUV -= boxOrigin;\n patternUV += .5;\n #endif\n`;\n\n/*\n ===================================================================\n Helpers used to draw the sizing (box, box origin and graphic origin)\n over the shader. Can be used with both vertex sizing and vector sizing\n\n helperBox and boxSize should be defined before inserting the code\n*/\nexport const drawSizingHelpers = `\n vec2 worldBoxDist = abs(helperBox);\n float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n opacity += boxStroke;\n\n vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n vec2 boxOriginDist = helperBox + boxOriginCopy;\n boxOriginDist.x *= (boxSize.x / boxSize.y);\n float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n \n vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n \n color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n opacity += boxOriginPoint;\n color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n opacity += graphicOriginPoint;\n`;\n\nexport interface ShaderSizingUniforms {\n u_fit: (typeof ShaderFitOptions)[ShaderFit];\n u_scale: number;\n u_rotation: number;\n u_originX: number;\n u_originY: number;\n u_offsetX: number;\n u_offsetY: number;\n u_worldWidth: number;\n u_worldHeight: number;\n}\n\nexport interface ShaderSizingParams {\n fit?: 'none' | 'contain' | 'cover';\n scale?: number;\n rotation?: number;\n originX?: number;\n originY?: number;\n offsetX?: number;\n offsetY?: number;\n worldWidth?: number;\n worldHeight?: number;\n}\n\nexport const defaultObjectSizing: Required<ShaderSizingParams> = {\n fit: 'contain',\n scale: 1,\n rotation: 0,\n offsetX: 0,\n offsetY: 0,\n originX: 0.5,\n originY: 0.5,\n worldWidth: 0,\n worldHeight: 0,\n};\n\nexport const defaultPatternSizing: Required<ShaderSizingParams> = {\n fit: 'none',\n scale: 1,\n rotation: 0,\n offsetX: 0,\n offsetY: 0,\n originX: 0.5,\n originY: 0.5,\n worldWidth: 0,\n worldHeight: 0,\n};\n\nexport const ShaderFitOptions = {\n none: 0,\n contain: 1,\n cover: 2,\n} as const;\n\nexport type ShaderFit = keyof typeof ShaderFitOptions;\n"],
5
- "mappings": ";;;;;AAWO,MAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBlC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsHjB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C1B,MAAM,sBAAoD;AAAA,EAC/D,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,uBAAqD;AAAA,EAChE,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;",
6
- "names": []
7
- }
@@ -1,59 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- const declarePI = `
7
- #define TWO_PI 6.28318530718
8
- #define PI 3.14159265358979323846
9
- `;
10
- const declareRotate = `
11
- vec2 rotate(vec2 uv, float th) {
12
- return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
13
- }
14
- `;
15
- const declareRandom = `
16
- float random(vec2 st) {
17
- return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
18
- }
19
- `;
20
- const colorBandingFix = `
21
- color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
22
- `;
23
- const declareSimplexNoise = `
24
- vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
25
- float snoise(vec2 v) {
26
- const vec4 C = vec4(0.211324865405187, 0.366025403784439,
27
- -0.577350269189626, 0.024390243902439);
28
- vec2 i = floor(v + dot(v, C.yy));
29
- vec2 x0 = v - i + dot(i, C.xx);
30
- vec2 i1;
31
- i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
32
- vec4 x12 = x0.xyxy + C.xxzz;
33
- x12.xy -= i1;
34
- i = mod(i, 289.0);
35
- vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
36
- + i.x + vec3(0.0, i1.x, 1.0));
37
- vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
38
- dot(x12.zw, x12.zw)), 0.0);
39
- m = m * m;
40
- m = m * m;
41
- vec3 x = 2.0 * fract(p * C.www) - 1.0;
42
- vec3 h = abs(x) - 0.5;
43
- vec3 ox = floor(x + 0.5);
44
- vec3 a0 = x - ox;
45
- m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
46
- vec3 g;
47
- g.x = a0.x * x0.x + h.x * x0.y;
48
- g.yz = a0.yz * x12.xz + h.yz * x12.yw;
49
- return 130.0 * dot(m, g);
50
- }
51
- `;
52
- export {
53
- colorBandingFix,
54
- declarePI,
55
- declareRandom,
56
- declareRotate,
57
- declareSimplexNoise
58
- };
59
- //# sourceMappingURL=shader-utils.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/shader-utils.ts"],
4
- "sourcesContent": ["export const declarePI = `\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n`;\n\nexport const declareRotate = `\nvec2 rotate(vec2 uv, float th) {\n return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n`;\n\nexport const declareRandom = `\nfloat random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n`;\n\n// It does use the standard random function but we don't call it to keep\n// colorBandingFix insertion independent from declareRandom\nexport const colorBandingFix = `\n color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n`;\n\nexport const declareSimplexNoise = `\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat 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"],
5
- "mappings": ";;;;;AAAO,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMtB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAQtB,MAAM,kBAAkB;AAAA;AAAA;AAIxB,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;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
- "names": []
7
- }
@@ -1,197 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import {
7
- sizingUniformsDeclaration,
8
- sizingUV,
9
- drawSizingHelpers
10
- } from "../shader-sizing";
11
- import { declareSimplexNoise, declarePI, declareRandom } from "../shader-utils";
12
- const ditheringFragmentShader = `#version 300 es
13
- precision highp float;
14
-
15
- uniform float u_time;
16
- uniform vec2 u_resolution;
17
- uniform float u_pixelRatio;
18
-
19
- ${sizingUniformsDeclaration}
20
-
21
- uniform vec4 u_color1;
22
- uniform vec4 u_color2;
23
- uniform float u_shape;
24
- uniform float u_type;
25
- uniform float u_pxSize;
26
- uniform bool u_pxRounded;
27
-
28
- out vec4 fragColor;
29
-
30
- ${declareSimplexNoise}
31
- ${declarePI}
32
- ${declareRandom}
33
-
34
- float getSimplexNoise(vec2 uv, float t) {
35
- float noise = .5 * snoise(uv - vec2(0., .3 * t));
36
- noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
37
-
38
- return noise;
39
- }
40
-
41
- const int bayer2x2[4] = int[4](0, 2, 3, 1);
42
- const int bayer4x4[16] = int[16](
43
- 0, 8, 2, 10,
44
- 12, 4, 14, 6,
45
- 3, 11, 1, 9,
46
- 15, 7, 13, 5
47
- );
48
-
49
- const int bayer8x8[64] = int[64](
50
- 0, 32, 8, 40, 2, 34, 10, 42,
51
- 48, 16, 56, 24, 50, 18, 58, 26,
52
- 12, 44, 4, 36, 14, 46, 6, 38,
53
- 60, 28, 52, 20, 62, 30, 54, 22,
54
- 3, 35, 11, 43, 1, 33, 9, 41,
55
- 51, 19, 59, 27, 49, 17, 57, 25,
56
- 15, 47, 7, 39, 13, 45, 5, 37,
57
- 63, 31, 55, 23, 61, 29, 53, 21
58
- );
59
-
60
- float getBayerValue(vec2 uv, int size) {
61
- ivec2 pos = ivec2(mod(uv, float(size)));
62
- int index = pos.y * size + pos.x;
63
-
64
- if (size == 2) {
65
- return float(bayer2x2[index]) / 4.0;
66
- } else if (size == 4) {
67
- return float(bayer4x4[index]) / 16.0;
68
- } else if (size == 8) {
69
- return float(bayer8x8[index]) / 64.0;
70
- }
71
- return 0.0;
72
- }
73
-
74
-
75
- void main() {
76
- float t = .5 * u_time;
77
-
78
- #define USE_PATTERN_SIZING
79
- #define USE_OBJECT_SIZING
80
- #define USE_PIXELIZATION
81
- // #define ADD_HELPERS
82
-
83
- ${sizingUV}
84
-
85
- vec2 dithering_uv = pxSizeUv;
86
- vec2 ditheringNoise_uv = roundedUv;
87
- vec2 shape_uv = objectUV;
88
- if (u_shape < 3.5) {
89
- shape_uv = patternUV;
90
- }
91
-
92
- float shape = 0.;
93
- if (u_shape < 1.5) {
94
- // Simplex noise
95
- shape_uv *= .001;
96
-
97
- shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);
98
- shape = smoothstep(0.3, 0.9, shape);
99
-
100
- } else if (u_shape < 2.5) {
101
- // Warp
102
- shape_uv *= .003;
103
-
104
- for (float i = 1.0; i < 6.0; i++) {
105
- shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);
106
- shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);
107
- }
108
-
109
- shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));
110
- shape = smoothstep(0.02, 1., shape);
111
-
112
- } else if (u_shape < 3.5) {
113
- // Dots
114
- shape_uv *= .05;
115
-
116
- float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
117
- float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);
118
-
119
- float speed = sign(rand - .5) * ceil(2. + rand);
120
- shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);
121
- shape = pow(shape, 6.);
122
-
123
- } else if (u_shape < 4.5) {
124
- // Sine wave
125
- shape_uv *= 4.;
126
-
127
- float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));
128
- shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
129
-
130
- } else if (u_shape < 5.5) {
131
- // Ripple
132
-
133
- float dist = length(shape_uv);
134
- float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
135
- shape = waves;
136
-
137
- } else if (u_shape < 6.5) {
138
- // Swirl
139
-
140
- float l = length(shape_uv);
141
- float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;
142
- float twist = 1.2;
143
- float offset = pow(l, -twist) + angle / TWO_PI;
144
- float mid = smoothstep(0., 1., pow(l, twist));
145
- shape = mix(0., fract(offset), mid);
146
-
147
- } else {
148
- // Sphere
149
- shape_uv *= 2.;
150
-
151
- vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));
152
- vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
153
- shape = .5 + .5 * dot(lightPos, pos);
154
- }
155
-
156
-
157
- int type = int(floor(u_type));
158
- float dithering = 0.0;
159
-
160
- switch (type) {
161
- case 1: {
162
- dithering = step(random(ditheringNoise_uv), shape);
163
- } break;
164
- case 2:
165
- dithering = getBayerValue(dithering_uv, 2);
166
- break;
167
- case 3:
168
- dithering = getBayerValue(dithering_uv, 4);
169
- break;
170
- default:
171
- dithering = getBayerValue(dithering_uv, 8);
172
- break;
173
- }
174
-
175
- dithering -= .5;
176
- float res = step(.5, shape + dithering);
177
-
178
- vec3 color = mix(u_color1.rgb, u_color2.rgb, res);
179
- float opacity = mix(u_color1.a, u_color2.a, res);
180
-
181
- #ifdef ADD_HELPERS
182
- vec2 helperBox = objectHelperBox;
183
- vec2 boxSize = objectBoxSize;
184
- if (u_shape < 3.5) {
185
- helperBox = patternHelperBox;
186
- boxSize = patternBoxSize;
187
- }
188
- ${drawSizingHelpers}
189
- #endif
190
-
191
- fragColor = vec4(color, opacity);
192
- }
193
- `;
194
- export {
195
- ditheringFragmentShader
196
- };
197
- //# sourceMappingURL=dithering.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/dithering.ts"],
4
- "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport {\n sizingUniformsDeclaration,\n type ShaderSizingParams,\n type ShaderSizingUniforms,\n sizingUV,\n drawSizingHelpers,\n} from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom } from '../shader-utils';\n\n/**\n * Dithering Fragment Shader by Ksenia Kondrashova\n * Applies dithering (4 dithering types available) over the\n * abstract shapes animation (7 animated shapes available)\n *\n * Uniforms include:\n * - u_color1: background color, RGBA\n * - u_color2: pixels color, RGBA\n *\n * - u_shape (float, used as int, 1 to 7):\n * --- shape = 1: Simplex noise pattern\n * --- shape = 2: Warp noise pattern\n * --- shape = 3: Columns if dots moving vertically\n * --- shape = 4: Sine wave\n * --- shape = 5: Ripple effect\n * --- shape = 6: Swirl animation\n * --- shape = 7: Rotating sphere\n *\n * - u_type (float, used as int, 1 to 4):\n * --- type = 1: Random dithering\n * --- type = 2: 2x2 Bayer matrix\n * --- type = 3: 4x4 Bayer matrix\n * --- type = 4: 8x8 Bayer matrix\n *\n * - pxSize (float), relative to canvas resolution\n * - u_pxRounded (bool)\n *\n */\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\nuniform bool u_pxRounded;\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n${declarePI}\n${declareRandom}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n float noise = .5 * snoise(uv - vec2(0., .3 * t));\n noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n 0, 8, 2, 10, \n 12, 4, 14, 6, \n 3, 11, 1, 9, \n 15, 7, 13, 5\n);\n\nconst int bayer8x8[64] = int[64](\n 0, 32, 8, 40, 2, 34, 10, 42,\n 48, 16, 56, 24, 50, 18, 58, 26,\n 12, 44, 4, 36, 14, 46, 6, 38,\n 60, 28, 52, 20, 62, 30, 54, 22,\n 3, 35, 11, 43, 1, 33, 9, 41,\n 51, 19, 59, 27, 49, 17, 57, 25,\n 15, 47, 7, 39, 13, 45, 5, 37,\n 63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n ivec2 pos = ivec2(mod(uv, float(size)));\n int index = pos.y * size + pos.x;\n\n if (size == 2) {\n return float(bayer2x2[index]) / 4.0;\n } else if (size == 4) {\n return float(bayer4x4[index]) / 16.0;\n } else if (size == 8) {\n return float(bayer8x8[index]) / 64.0;\n }\n return 0.0;\n}\n\n\nvoid main() { \n float t = .5 * u_time; \n\n #define USE_PATTERN_SIZING\n #define USE_OBJECT_SIZING\n #define USE_PIXELIZATION\n // #define ADD_HELPERS\n \n ${sizingUV}\n \n vec2 dithering_uv = pxSizeUv;\n vec2 ditheringNoise_uv = roundedUv;\n vec2 shape_uv = objectUV;\n if (u_shape < 3.5) {\n shape_uv = patternUV;\n }\n\n float shape = 0.; \n if (u_shape < 1.5) {\n // Simplex noise\n shape_uv *= .001;\n\n shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n shape = smoothstep(0.3, 0.9, shape);\n \n } else if (u_shape < 2.5) { \n // Warp\n shape_uv *= .003;\n\n for (float i = 1.0; i < 6.0; i++) { \n shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t); \n shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t); \n } \n \n shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x)); \n shape = smoothstep(0.02, 1., shape);\n \n } else if (u_shape < 3.5) { \n // Dots \n shape_uv *= .05;\n\n float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n float speed = sign(rand - .5) * ceil(2. + rand);\n shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t); \n shape = pow(shape, 6.);\n\n } else if (u_shape < 4.5) { \n // Sine wave\n shape_uv *= 4.;\n\n float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n \n } else if (u_shape < 5.5) { \n // Ripple\n\n float dist = length(shape_uv);\n float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n shape = waves;\n \n } else if (u_shape < 6.5) { \n // Swirl \n\n float l = length(shape_uv);\n float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n float twist = 1.2;\n float offset = pow(l, -twist) + angle / TWO_PI; \n float mid = smoothstep(0., 1., pow(l, twist));\n shape = mix(0., fract(offset), mid);\n \n } else {\n // Sphere\n shape_uv *= 2.;\n \n vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));\n vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n shape = .5 + .5 * dot(lightPos, pos);\n } \n \n \n int type = int(floor(u_type)); \n float dithering = 0.0; \n \n switch (type) { \n case 1: {\n dithering = step(random(ditheringNoise_uv), shape); \n } break; \n case 2: \n dithering = getBayerValue(dithering_uv, 2); \n break; \n case 3: \n dithering = getBayerValue(dithering_uv, 4); \n break; \n default: \n dithering = getBayerValue(dithering_uv, 8); \n break; \n } \n \n dithering -= .5; \n float res = step(.5, shape + dithering); \n \n vec3 color = mix(u_color1.rgb, u_color2.rgb, res);\n float opacity = mix(u_color1.a, u_color2.a, res);\n\n #ifdef ADD_HELPERS\n vec2 helperBox = objectHelperBox;\n vec2 boxSize = objectBoxSize;\n if (u_shape < 3.5) {\n helperBox = patternHelperBox;\n boxSize = patternBoxSize;\n }\n ${drawSizingHelpers}\n #endif\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n u_color1: [number, number, number, number];\n u_color2: [number, number, number, number];\n u_shape: number;\n u_type: number;\n u_pxSize: number;\n u_pxRounded: boolean;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n color1?: string;\n color2?: string;\n shape?: number;\n type?: number;\n pxSize?: number;\n pxRounded?: boolean;\n}\n"],
5
- "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,WAAW,qBAAqB;AA8BvD,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWzB,mBAAmB;AAAA,EACnB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDX,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyGN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,100 +0,0 @@
1
- /* * * * * * * * * * * * * * * * * * * * * * * * * * * *
2
- * Paper Shaders *
3
- * https://github.com/paper-design/shaders *
4
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
-
6
- import { sizingVariablesDeclaration } from "../shader-sizing";
7
- import { declarePI, declareSimplexNoise } from "../shader-utils";
8
- const dotGridFragmentShader = `#version 300 es
9
- precision highp float;
10
-
11
- uniform vec4 u_colorBack;
12
- uniform vec4 u_colorFill;
13
- uniform vec4 u_colorStroke;
14
- uniform float u_dotSize;
15
- uniform float u_gapX;
16
- uniform float u_gapY;
17
- uniform float u_strokeWidth;
18
- uniform float u_sizeRange;
19
- uniform float u_opacityRange;
20
- uniform float u_shape;
21
-
22
- ${sizingVariablesDeclaration}
23
-
24
- out vec4 fragColor;
25
-
26
- ${declarePI}
27
- ${declareSimplexNoise}
28
-
29
- float polygon(vec2 p, float N, float rot) {
30
- float a = atan(p.x, p.y) + rot;
31
- float r = TWO_PI / float(N);
32
-
33
- return cos(floor(.5 + a / r) * r - a) * length(p);
34
- }
35
-
36
- void main() {
37
-
38
- vec2 shape_uv = v_patternUV;
39
- shape_uv += .5;
40
-
41
- vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;
42
- vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));
43
- float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
44
- float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
45
-
46
- vec2 center = vec2(0.5) - 1e-3;
47
- vec2 p = (grid - center) * vec2(u_gapX, u_gapY);
48
-
49
- float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
50
- float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
51
-
52
- float dist;
53
- if (u_shape < 0.5) {
54
- // Circle
55
- dist = length(p);
56
- } else if (u_shape < 1.5) {
57
- // Diamond
58
- strokeWidth *= 1.5;
59
- dist = polygon(1.5 * p, 4., .25 * PI);
60
- } else if (u_shape < 2.5) {
61
- // Square
62
- dist = polygon(1.03 * p, 4., 1e-3);
63
- } else {
64
- // Triangle
65
- strokeWidth *= 1.5;
66
- p = p * 2. - 1.;
67
- p *= .9;
68
- p.y -= .75 * baseSize;
69
- dist = polygon(p, 3., 1e-3);
70
- }
71
-
72
- float edgeWidth = fwidth(dist);
73
- float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);
74
- float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);
75
- float stroke = clamp(shapeOuter - shapeInner, 0., 1.);
76
-
77
- float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);
78
-
79
- vec3 color = u_colorBack.rgb * u_colorBack.a;
80
- color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shapeInner);
81
- color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);
82
-
83
- float opacity = u_colorBack.a;
84
- opacity += u_colorFill.a * shapeInner * dot_opacity;
85
- opacity += u_colorStroke.a * stroke * dot_opacity;
86
-
87
- fragColor = vec4(color, opacity);
88
- }
89
- `;
90
- const DotGridShapes = {
91
- circle: 0,
92
- diamond: 1,
93
- square: 2,
94
- triangle: 3
95
- };
96
- export {
97
- DotGridShapes,
98
- dotGridFragmentShader
99
- };
100
- //# sourceMappingURL=dot-grid.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/shaders/dot-grid.ts"],
4
- "sourcesContent": ["import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareSimplexNoise } from '../shader-utils';\n\n/**\n * Dot Grid Pattern\n * (the size parameters are set in pixels)\n *\n * Uniforms include:\n * u_colorBack - the background color\n * u_colorFill - the fill color\n * u_colorStroke - the stroke color\n * u_dotSize (px) - the base dot radius\n * u_strokeWidth (px) - the stroke (to be subtracted from u_dotSize)\n * u_gapX (px) - horizontal grid spacing\n * u_gapY (px) - vertical grid spacing\n * u_sizeRange (0 .. 1) - variety of dot size\n * u_opacityRange(0 .. 1) - variety of dot opacity to be applied equally to fill and stroke\n * u_shape - shape code (0 - circle, 1 - diamond, 2 - square, 3 - triangle)\n */\nexport const dotGridFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorFill;\nuniform vec4 u_colorStroke;\nuniform float u_dotSize;\nuniform float u_gapX;\nuniform float u_gapY;\nuniform float u_strokeWidth;\nuniform float u_sizeRange;\nuniform float u_opacityRange;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n\nfloat polygon(vec2 p, float N, float rot) {\n float a = atan(p.x, p.y) + rot;\n float r = TWO_PI / float(N);\n\n return cos(floor(.5 + a / r) * r - a) * length(p);\n}\n\nvoid main() {\n \n vec2 shape_uv = v_patternUV;\n shape_uv += .5;\n\n vec2 grid = fract(shape_uv / vec2(u_gapX, u_gapY)) + 1e-4;\n vec2 grid_idx = floor(shape_uv / vec2(u_gapX, u_gapY));\n float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));\n float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));\n\n vec2 center = vec2(0.5) - 1e-3;\n vec2 p = (grid - center) * vec2(u_gapX, u_gapY);\n\n float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);\n float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);\n\n float dist;\n if (u_shape < 0.5) {\n // Circle\n dist = length(p);\n } else if (u_shape < 1.5) {\n // Diamond\n strokeWidth *= 1.5;\n dist = polygon(1.5 * p, 4., .25 * PI);\n } else if (u_shape < 2.5) {\n // Square\n dist = polygon(1.03 * p, 4., 1e-3);\n } else {\n // Triangle\n strokeWidth *= 1.5;\n p = p * 2. - 1.;\n p *= .9;\n p.y -= .75 * baseSize;\n dist = polygon(p, 3., 1e-3);\n }\n\n float edgeWidth = fwidth(dist);\n float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);\n float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);\n float stroke = clamp(shapeOuter - shapeInner, 0., 1.);\n\n float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);\n\n vec3 color = u_colorBack.rgb * u_colorBack.a;\n color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shapeInner);\n color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);\n\n float opacity = u_colorBack.a;\n opacity += u_colorFill.a * shapeInner * dot_opacity;\n opacity += u_colorStroke.a * stroke * dot_opacity;\n\n fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DotGridUniforms extends ShaderSizingUniforms {\n u_colorBack: [number, number, number, number];\n u_colorFill: [number, number, number, number];\n u_colorStroke: [number, number, number, number];\n u_dotSize: number;\n u_gapX: number;\n u_gapY: number;\n u_strokeWidth: number;\n u_sizeRange: number;\n u_opacityRange: number;\n u_shape: (typeof DotGridShapes)[DotGridShape];\n}\n\nexport interface DotGridParams extends ShaderSizingParams {\n colorBack?: string;\n colorFill?: string;\n colorStroke?: string;\n size?: number;\n gapX?: number;\n gapY?: number;\n strokeWidth?: number;\n sizeRange?: number;\n opacityRange?: number;\n shape?: DotGridShape;\n}\n\nexport const DotGridShapes = {\n circle: 0,\n diamond: 1,\n square: 2,\n triangle: 3,\n} as const;\n\nexport type DotGridShape = keyof typeof DotGridShapes;\n"],
5
- "mappings": ";;;;;AAAA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,2BAA2B;AAkBxC,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Fd,MAAM,gBAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;",
6
- "names": []
7
- }