@paper-design/shaders 0.0.14 → 0.0.16

package/dist/shaders/stepped-simplex-noise.d.ts

@@ -0,0 +1,24 @@
+export type SteppedSimplexNoiseUniforms = {
+    u_scale: number;
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_color3: [number, number, number, number];
+    u_color4: [number, number, number, number];
+    u_color5: [number, number, number, number];
+    u_steps_number: number;
+};
+/**
+ * Stepped Simplex Noise by Ksenia Kondrashova
+ * Calculates a combination of 2 simplex noises with result rendered as
+ * an X-stepped 5-colored gradient
+ *
+ * Uniforms include:
+ * u_scale - the scale applied to user space
+ * u_color1 - the first gradient color
+ * u_color2 - the second gradient color
+ * u_color3 - the third gradient color
+ * u_color4 - the fourth gradient color
+ * u_color5 - the fifth gradient color
+ * u_steps_number - the number of solid colors to show as a stepped gradient
+ */
+export declare const steppedSimplexNoiseFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec4 u_color5;\nuniform float u_steps_number;\n\nout vec4 fragColor;\n\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\nfloat get_noise(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\nvec4 getColor(int index) {\n  if (index == 0) return u_color1;\n  if (index == 1) return u_color2;\n  if (index == 2) return u_color3;\n  if (index == 3) return u_color4;\n  if (index == 4) return u_color5;\n  return u_color1;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (.0008 * (1. - step(1. - scale, 1.) / scale));\n  uv *= u_resolution;\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float t = u_time;\n\n  float noise = .5 + .5 * get_noise(uv, t);\n  noise = floor(noise * u_steps_number) / u_steps_number;\n\n  vec3 color = u_color1.rgb * u_color1.a;\n  float opacity = u_color1.a;\n  for (int i = 0; i < 5; i++) {\n    vec4 next_c = getColor(i + 1);\n    float proportion = smoothstep((float(i) + .5) / 5., (float(i) + 2.) / 5., noise);\n    color = mix(color, next_c.rgb * next_c.a, proportion);\n    opacity = mix(opacity, next_c.a, proportion);\n  }\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/shaders/voronoi.d.ts

@@ -0,0 +1,36 @@
+export type VoronoiUniforms = {
+    u_scale: number;
+    u_colorCell1: [number, number, number, number];
+    u_colorCell2: [number, number, number, number];
+    u_colorCell3: [number, number, number, number];
+    u_colorEdges: [number, number, number, number];
+    u_colorMid: [number, number, number, number];
+    u_colorGradient: number;
+    u_distance: number;
+    u_edgesSize: number;
+    u_edgesSharpness: number;
+    u_middleSize: number;
+    u_middleSharpness: number;
+};
+/**
+ * Voronoi pattern
+ * The artwork by Ksenia Kondrashova
+ * Renders a number of circular shapes with gooey effect applied
+ *
+ * Uniforms include:
+ * u_scale - the scale applied to user space
+ * u_colorCell1 - color #1 of mix used to fill the cell shape
+ * u_colorCell2 - color #2 of mix used to fill the cell shape
+ * u_colorCell3 - color #3 of mix used to fill the cell shape
+ * u_colorEdges - color of borders between the cells
+ * u_colorMid - color used to fill the radial shape in the center of each cell
+ * u_colorGradient (0 .. 1) - if the cell color is a gradient of palette colors or one color selection
+ * u_distance (0 ... 0.5) - how far the cell center can move from regular square grid
+ * u_edgesSize (0 .. 1) - the size of borders
+ *   (can be set to zero but the edge may get glitchy due to nature of Voronoi diagram)
+ * u_edgesSharpness (0 .. 1) - the blur/sharp for cell border
+ * u_middleSize (0 .. 1) - the size of shape in the center of each cell
+ * u_middleSharpness (0 .. 1) - the smoothness of shape in the center of each cell
+ *   (vary from cell color gradient to sharp dot in the middle)
+ */
+export declare const voronoiFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\n\nuniform vec4 u_colorCell1;\nuniform vec4 u_colorCell2;\nuniform vec4 u_colorCell3;\nuniform vec4 u_colorEdges;\nuniform vec4 u_colorMid;\n\nuniform float u_colorGradient;\nuniform float u_distance;\nuniform float u_edgesSize;\nuniform float u_edgesSharpness;\nuniform float u_middleSize;\nuniform float u_middleSharpness;\n\n#define TWO_PI 6.28318530718\n\nout vec4 fragColor;\n\nvec2 hash(vec2 p) {\n  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\n  return fract(sin(p) * 18.5453);\n}\n\nfloat smin(float angle, float b, float k) {\n  float h = clamp(.5 + .5 * (b - angle) / k, 0., 1.);\n  return mix(b, angle, h) - k * h * (1. - h);\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, vec2 randomizer) {\n    vec3 color1 = c1.rgb * c1.a;\n    vec3 color2 = c2.rgb * c2.a;\n    vec3 color3 = c3.rgb * c3.a;\n\n    float mixer = clamp(u_colorGradient, 0., 1.);\n    float r1 = smoothstep(.5 - .5 * mixer, .5 + .5 * mixer, randomizer[0]);\n    float r2 = smoothstep(.6 - .6 * mixer, .6 + .4 * mixer, randomizer[1]);\n    vec3 blended_color_2 = mix(color1, color2, r1);\n    float blended_opacity_2 = mix(c1.a, c2.a, r1);\n    vec3 c = mix(blended_color_2, color3, r2);\n    float o = mix(blended_opacity_2, c3.a, r2);\n    \n    return vec4(c, o);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float t = u_time;\n  uv -= .5;\n  uv *= (.01 * u_scale * u_resolution);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  vec2 i_uv = floor(uv);\n  vec2 f_uv = fract(uv);\n\n  vec2 randomizer = vec2(0.);\n  vec3 distance = vec3(1.);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 tile_offset = vec2(float(x), float(y));\n      vec2 o = hash(i_uv + tile_offset);\n      tile_offset += (.5 + clamp(u_distance, 0., .5) * sin(t + TWO_PI * o)) - f_uv;\n\n      float dist = dot(tile_offset, tile_offset);\n      float old_min_dist = distance.x;\n\n      distance.z = max(distance.x, max(distance.y, min(distance.z, dist)));\n      distance.y = max(distance.x, min(distance.y, dist));\n      distance.x = min(distance.x, dist);\n\n      if (old_min_dist > distance.x) {\n        randomizer = o;\n      }\n    }\n  }\n\n  distance = sqrt(distance);\n\n  distance = sqrt(distance);\n  float cell_shape = min(smin(distance.z, distance.y, .1) - distance.x, 1.);\n\n  float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);\n  float dot_edge_width = fwidth(dot_shape);\n  float dotSharp = clamp(u_middleSharpness, 0., 1.);\n  dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);\n\n  float cell_edge_width = fwidth(distance.x);\n  float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);\n  float edgeSharp = clamp(u_edgesSharpness, 0., 1.);\n  cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);\n\n  dot_shape *= cell_shape;\n\n  vec4 cell_mix = blend_colors(u_colorCell1, u_colorCell2, u_colorCell3, randomizer);\n  \n  vec4 edges = vec4(u_colorEdges.rgb * u_colorEdges.a, u_colorEdges.a);\n\n  vec3 color = mix(edges.rgb, cell_mix.rgb, cell_shape);\n  float opacity = mix(edges.a, cell_mix.a, cell_shape);\n\n  color = mix(color, u_colorMid.rgb * u_colorMid.a, dot_shape);\n  opacity = mix(opacity, u_colorMid.a, dot_shape);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/shaders/waves.d.ts

@@ -0,0 +1,34 @@
+export type WavesUniforms = {
+    u_scale: number;
+    u_rotation: number;
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
+    u_shape: number;
+    u_frequency: number;
+    u_amplitude: number;
+    u_spacing: number;
+    u_dutyCycle: number;
+    u_edgeBlur: number;
+};
+/**
+ * Stepped Simplex Noise by Ksenia Kondrashova
+ * Calculates a combination of 2 simplex noises with result rendered as a stepped gradient
+ *
+ * Uniforms include:
+ * u_scale - the scale applied to user space
+ * u_rotation - the rotation applied to user space
+ * u_color1 - the first color
+ * u_color2 - the second color
+ * u_shape (0 ... 3) - the line shaping coefficient, non-integer
+   values allowed and produce mixed shapes
+   - u_shape = 0 is zigzag
+   - u_shape = 1 is perfect sine wave
+   - u_shape = 2 is irregular wave #1
+   - u_shape = 3 is irregular wave #2
+ * u_frequency - the wave frequency
+ * u_amplitude - the wave amplitude
+ * u_spacing - the density of pattern lines
+ * u_dutyCycle (0 ... 1) - the proportion of stroke width to the pattern step
+ * u_edgeBlur (0 ... 1) - the blur applied to the lines edges
+ */
+export declare const wavesFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\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_dutyCycle;\nuniform float u_edgeBlur;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nout vec4 fragColor;\n\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n  uv -= .5;\n  uv *= (.02 * max(0., u_scale) * u_resolution);\n  uv = rotate(uv, u_rotation * .5 * PI);\n  uv /= u_pixelRatio;\n  uv += .5;\n\n  float wave = .5 * cos(uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(uv.x * u_frequency) - .5);\n  float irregular = sin(uv.x * .25 * u_frequency * TWO_PI) * cos(uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(uv.x * u_frequency * TWO_PI) + .5 * cos(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((uv.y + offset) * PI / spacing);\n  \n  float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);\n  edge_width += .5 * max(0., u_edgeBlur);\n  float dc = clamp(u_dutyCycle, 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "MIT",
   "type": "module",
   "publishConfig": {