@paper-design/shaders 0.0.15 → 0.0.16

package/dist/shaders/smoke-ring.d.ts

@@ -1,21 +1,22 @@
 export type SmokeRingUniforms = {
-    u_colorBack: [number, number, number, number];
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
     u_scale: number;
+    u_colorBack: [number, number, number, number];
+    u_colorInner: [number, number, number, number];
+    u_colorOuter: [number, number, number, number];
+    u_noiseScale: number;
     u_thickness: number;
 };
 /**
- * Smoke Ring, based on https://codepen.io/ksenia-k/full/zYyqRWE
+ * Smoke Ring by Ksenia Kondrashova
  * Renders a fractional Brownian motion (fBm) noise over the
  * polar coordinates masked with ring shape
  *
  * Uniforms include:
- * u_colorBack: The back color of the scene
- * u_color1: Main color of the ring
- * u_color2: The third color of the mesh gradient
- * u_color4: The fourth color of the mesh gradient
- * u_scale: The scale of the noise
- * u_thickness: The thickness of the ring
+ * u_scale - the scale applied to user space: with scale = 1 the ring fits the screen height
+ * u_colorBack - the background color of the scene
+ * u_colorInner - the inner color of the ring gradient
+ * u_colorOuter - the outer color of the ring gradient
+ * u_noiseScale - the resolution of noise texture
+ * u_thickness - the thickness of the ring
  */
-export declare const smokeRingFragmentShader = "\n\n  precision highp float;\n\n  uniform vec4 u_colorBack;\n  uniform vec4 u_color1;\n  uniform vec4 u_color2;\n  uniform float u_scale;\n  uniform float u_thickness;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n\n    #define TWO_PI 6.28318530718\n    #define PI 3.14159265358979323846\n\n    float rand(vec2 n) {\n        return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n    }\n    float noise(vec2 n) {\n        const vec2 d = vec2(0.0, 1.0);\n        vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n        return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n    }\n    float fbm(vec2 n) {\n        float total = 0.0, amplitude = .4;\n        for (int i = 0; i < 12; i++) {\n            total += noise(n) * amplitude;\n            n += n;\n            amplitude *= 0.6;\n        }\n        return total;\n    }\n\n    float get_ring_shape(vec2 uv, float innerRadius, float outerRadius) {\n        float distance = length(uv);\n        float line_width = outerRadius - innerRadius;\n        float ringValue = smoothstep(innerRadius, innerRadius + .8 * line_width, distance);\n        ringValue -= smoothstep(outerRadius, outerRadius + 1.2 * line_width, distance);\n        return clamp(ringValue, 0., 1.);\n    }\n\n    void main() {\n\n        vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n        float ratio = u_resolution.x / u_resolution.y;\n\n        uv -= .5;\n        uv *= 2.;\n        uv.x *= ratio;\n\n        float t = u_time;\n\n        float atg = atan(uv.y, uv.x);\n        float angle = (atg + PI) / TWO_PI;\n\n        vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));\n        polar_uv *= u_scale;\n\n        float noise_left = fbm(polar_uv + .05 * t);\n        polar_uv.x = mod(polar_uv.x, u_scale * TWO_PI);\n        float noise_right = fbm(polar_uv + .05 * t);\n        float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));\n\n        float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);\n\n        float radius = .4 - .25 * u_thickness;\n        float thickness = u_thickness;\n        thickness = pow(thickness, 2.);\n\n        float ring_shape = get_ring_shape(uv * (.5 + .6 * noise), radius - .2 * thickness, radius + .5 * thickness);\n        ring_shape = clamp(ring_shape, 0., 1.);\n        \n        float ring_shape_outer = 1. - pow(ring_shape, 7.);\n        ring_shape_outer *= ring_shape;\n        \n        float ring_shape_inner = ring_shape - ring_shape_outer;\n        ring_shape_inner *= ring_shape;\n\n        ring_shape_outer *= u_color2.a;\n        ring_shape_inner *= u_color1.a;\n\n        float background = 1. - ring_shape;\n        background *= u_colorBack.a;\n        \n        vec3 color = u_color2.rgb * ring_shape_outer;\n        color += u_color1.rgb * ring_shape_inner;\n        color += u_colorBack.rgb * background;\n        \n        float opacity = ring_shape_outer;\n        opacity += ring_shape_inner;\n        opacity += background;\n        \n        gl_FragColor = vec4(color, opacity);\n    }\n";
+export declare const smokeRingFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\nuniform vec4 u_colorOuter;\nuniform float u_noiseScale;\nuniform float u_thickness;\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nfloat random(in vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(in 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  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n}\nfloat fbm(in vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 12; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat get_ring_shape(vec2 uv, float innerRadius, float outerRadius) {\n  float distance = length(uv);\n  float line_width = outerRadius - innerRadius;\n  float ringValue = smoothstep(innerRadius, innerRadius + .8 * line_width, distance);\n  ringValue -= smoothstep(outerRadius, outerRadius + 1.2 * line_width, distance);\n  return clamp(ringValue, 0., 1.);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  float ratio = u_resolution.x / u_resolution.y;\n\n  uv -= .5;\n  uv /= u_pixelRatio;\n  float scale = .5 * u_scale + 1e-4;\n  uv *= (1. - step(1. - scale, 1.) / scale);\n  uv *= 3.;\n  uv.x *= ratio;\n\n  float t = u_time;\n\n  float atg = atan(uv.y, uv.x);\n  float angle = (atg + PI) / TWO_PI;\n\n  vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));\n  polar_uv *= u_noiseScale;\n\n  float noise_left = fbm(polar_uv + .05 * t);\n  polar_uv.x = mod(polar_uv.x, u_noiseScale * TWO_PI);\n  float noise_right = fbm(polar_uv + .05 * t);\n  float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));\n\n  float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);\n\n  float radius = .4 - .25 * u_thickness;\n  float thickness = u_thickness;\n  thickness = pow(thickness, 2.);\n\n  float ring_shape = get_ring_shape(uv * (.5 + .6 * noise), radius - .2 * thickness, radius + .5 * thickness);\n\n  float ring_shape_outer = 1. - pow(ring_shape, 7.);\n  ring_shape_outer *= ring_shape;\n\n  float ring_shape_inner = ring_shape - ring_shape_outer;\n  ring_shape_inner *= ring_shape;\n\n  float background = u_colorBack.a;\n\n  float opacity = ring_shape_outer * u_colorOuter.a;\n  opacity += ring_shape_inner * u_colorInner.a;\n  opacity += background * (1. - ring_shape_inner * u_colorInner.a - ring_shape_outer * u_colorOuter.a);\n\n  vec3 color = u_colorBack.rgb * (1. - ring_shape) * background;\n  color += u_colorOuter.rgb * ring_shape_outer * u_colorOuter.a;\n  color += u_colorInner.rgb * ring_shape_inner * u_colorInner.a;\n\n  color += u_colorBack.rgb * ring_shape_inner * (1. - u_colorInner.a) * background;\n  color += u_colorBack.rgb * ring_shape_outer * (1. - u_colorOuter.a) * background;\n\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -1,23 +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_scale: number;
     u_steps_number: number;
 };
 /**
  * Stepped Simplex Noise by Ksenia Kondrashova
- * Calculates a combination of 2 simplex noises with result rendered as a stepped gradient
+ * Calculates a combination of 2 simplex noises with result rendered as
+ * an X-stepped 5-colored gradient
  *
  * Uniforms include:
- * u_color1: The first color
- * u_color2: The second color
- * u_color3: The third color
- * u_color4: The fourth color
- * u_color5: The fifth color
- * u_scale: The scale applied to coordinates
- * u_steps_number: The number of colors to show as a stepped gradient
+ * 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 = "\nprecision highp float;\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform vec4 u_color4;\nuniform vec4 u_color5;\nuniform float u_scale;\nuniform float u_steps_number;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\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  uv *= (.001 * u_scale * u_resolution);\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  vec4 col = u_color1;\n  for (int i = 0; i < 5; i++) {\n      vec4 next_col = getColor(i + 1);\n      col = mix(col, next_col, smoothstep((float(i) + .5) / 5., (float(i) + 2.) / 5., noise));\n  }\n  gl_FragColor = col;\n}\n";
+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.15",
+  "version": "0.0.16",
   "license": "MIT",
   "type": "module",
   "publishConfig": {