@paper-design/shaders - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

dist/index.d.ts

@@ -7,2 +7,4 @@ /** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */
 export { meshGradientFragmentShader, type MeshGradientUniforms } from './shaders/mesh-gradient';
+/** A shader rendering a fractal-like structure made of several layers of since-arches */
+export { neuroNoiseFragmentShader, type NeuroNoiseUniforms } from './shaders/neuro-noise';
 export { getShaderColorFromString } from './shader-mount';

dist/index.js

@@ -1,2 +0,3 @@
-var g=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(t,r,i={},n,s=!0){this.canvas=t,this.fragmentShader=r,this.providedUniforms=i,this.isAnimated=s;let o=t.getContext("webgl",n);if(!o)throw new Error("WebGL not supported");this.gl=o,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let t=x(this.gl,b,this.fragmentShader);t&&(this.program=t,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let t=this.gl.getAttribLocation(this.program,"a_position"),r=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,r);let i=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(i),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(t),this.gl.vertexAttribPointer(t,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(t=>[t,this.gl.getUniformLocation(this.program,t)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let t=this.canvas.clientWidth,r=this.canvas.clientHeight;(this.canvas.width!==t||this.canvas.height!==r)&&(this.canvas.width=t,this.canvas.height=r,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=t=>{if(this.hasBeenDisposed)return;let r=t-this.lastFrameTime;this.lastFrameTime=t,this.isAnimated&&(this.totalAnimationTime+=r),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([t,r])=>{let i=this.uniformLocations[t];if(i)if(Array.isArray(r))switch(r.length){case 2:this.gl.uniform2fv(i,r);break;case 3:this.gl.uniform3fv(i,r);break;case 4:this.gl.uniform4fv(i,r);break;default:r.length===9?this.gl.uniformMatrix3fv(i,!1,r):r.length===16?this.gl.uniformMatrix4fv(i,!1,r):console.warn(`Unsupported uniform array length: ${r.length}`)}else typeof r=="number"?this.gl.uniform1f(i,r):typeof r=="boolean"?this.gl.uniform1i(i,r?1:0):console.warn(`Unsupported uniform type for ${t}: ${typeof r}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=t=>{this.providedUniforms={...this.providedUniforms,...t},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},b=`
+/***** Paper Shaders: https://github.com/paper-design/shaders *****/
+var v=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(r,t,i={},o,n=!0){this.canvas=r,this.fragmentShader=t,this.providedUniforms=i,this.isAnimated=n;let s=r.getContext("webgl",o);if(!s)throw new Error("WebGL not supported");this.gl=s,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let r=x(this.gl,_,this.fragmentShader);r&&(this.program=r,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let r=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let i=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(i),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(r),this.gl.vertexAttribPointer(r,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(r=>[r,this.gl.getUniformLocation(this.program,r)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let r=this.canvas.clientWidth,t=this.canvas.clientHeight;(this.canvas.width!==r||this.canvas.height!==t)&&(this.canvas.width=r,this.canvas.height=t,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=r=>{if(this.hasBeenDisposed)return;let t=r-this.lastFrameTime;this.lastFrameTime=r,this.isAnimated&&(this.totalAnimationTime+=t),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([r,t])=>{let i=this.uniformLocations[r];if(i)if(Array.isArray(t))switch(t.length){case 2:this.gl.uniform2fv(i,t);break;case 3:this.gl.uniform3fv(i,t);break;case 4:this.gl.uniform4fv(i,t);break;default:t.length===9?this.gl.uniformMatrix3fv(i,!1,t):t.length===16?this.gl.uniformMatrix4fv(i,!1,t):console.warn(`Unsupported uniform array length: ${t.length}`)}else typeof t=="number"?this.gl.uniform1f(i,t):typeof t=="boolean"?this.gl.uniform1i(i,t?1:0):console.warn(`Unsupported uniform type for ${r}: ${typeof t}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=r=>{this.providedUniforms={...this.providedUniforms,...r},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},_=`
   attribute vec4 a_position;
@@ -6,3 +7,3 @@ void main() {
   }
-`;function v(e,t,r){let i=e.createShader(t);return i?(e.shaderSource(i,r),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(i)),e.deleteShader(i),null)):null}function x(e,t,r){let i=v(e,e.VERTEX_SHADER,t),n=v(e,e.FRAGMENT_SHADER,r);if(!i||!n)return null;let s=e.createProgram();return s?(e.attachShader(s,i),e.attachShader(s,n),e.linkProgram(s),e.getProgramParameter(s,e.LINK_STATUS)?(e.detachShader(s,i),e.detachShader(s,n),e.deleteShader(i),e.deleteShader(n),s):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(s)),e.deleteProgram(s),e.deleteShader(i),e.deleteShader(n),null)):null}function _(e,t=[0,0,0]){if(typeof e!="string")return t;let r,i,n;if(e.startsWith("#"))[r,i,n]=A(e);else if(e.startsWith("rgb"))[r,i,n]=y(e);else if(e.startsWith("hsl"))[r,i,n]=R(S(e));else return console.error("Unsupported color format"),t;return[r,i,n]}function A(e){e.length===4&&(e=`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`);let t=parseInt(e.slice(1),16),r=(t>>16&255)/255,i=(t>>8&255)/255,n=(t&255)/255;return[r,i,n]}function y(e){let t=e.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return t?[parseInt(t[1]??"0")/255,parseInt(t[2]??"0")/255,parseInt(t[3]??"0")/255]:[0,0,0]}function S(e){let t=e.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return t?[parseInt(t[1]??"0"),parseInt(t[2]??"0"),parseInt(t[3]??"0")]:[0,0,0]}function R(e){let[t,r,i]=e,n=t/360,s=r/100,o=i/100,c,h,l;if(r===0)c=h=l=o;else{let f=(u,p,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<.16666666666666666?u+(p-u)*6*a:a<.5?p:a<.6666666666666666?u+(p-u)*(.6666666666666666-a)*6:u),m=o<.5?o*(1+s):o+s-o*s,d=2*o-m;c=f(d,m,n+1/3),h=f(d,m,n),l=f(d,m,n-1/3)}return[c,h,l]}var w=`
+`;function b(e,r,t){let i=e.createShader(r);return i?(e.shaderSource(i,t),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(i)),e.deleteShader(i),null)):null}function x(e,r,t){let i=b(e,e.VERTEX_SHADER,r),o=b(e,e.FRAGMENT_SHADER,t);if(!i||!o)return null;let n=e.createProgram();return n?(e.attachShader(n,i),e.attachShader(n,o),e.linkProgram(n),e.getProgramParameter(n,e.LINK_STATUS)?(e.detachShader(n,i),e.detachShader(n,o),e.deleteShader(i),e.deleteShader(o),n):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(n)),e.deleteProgram(n),e.deleteShader(i),e.deleteShader(o),null)):null}function g(e,r=[0,0,0]){if(Array.isArray(e)&&e.length===3)return e;if(typeof e!="string")return g(r);let t,i,o;if(e.startsWith("#"))[t,i,o]=y(e);else if(e.startsWith("rgb"))[t,i,o]=A(e);else if(e.startsWith("hsl"))[t,i,o]=R(S(e));else return console.error("Unsupported color format",e),g(r);return[t,i,o]}function y(e){e.length===4&&(e=`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`);let r=parseInt(e.slice(1),16),t=(r>>16&255)/255,i=(r>>8&255)/255,o=(r&255)/255;return[t,i,o]}function A(e){let r=e.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return r?[parseInt(r[1]??"0")/255,parseInt(r[2]??"0")/255,parseInt(r[3]??"0")/255]:[0,0,0]}function S(e){let r=e.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return r?[parseInt(r[1]??"0"),parseInt(r[2]??"0"),parseInt(r[3]??"0")]:[0,0,0]}function R(e){let[r,t,i]=e,o=r/360,n=t/100,s=i/100,c,l,h;if(t===0)c=l=h=s;else{let f=(u,p,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<.16666666666666666?u+(p-u)*6*a:a<.5?p:a<.6666666666666666?u+(p-u)*(.6666666666666666-a)*6:u),m=s<.5?s*(1+n):s+n-s*n,d=2*s-m;c=f(d,m,o+1/3),l=f(d,m,o),h=f(d,m,o-1/3)}return[c,l,h]}var F=`
   precision highp float;
@@ -80,3 +81,3 @@ uniform vec2 u_resolution;
   }
-`;var F=`
+`;var w=`
 // Mesh Gradient: https://www.shadertoy.com/view/wdyczG
@@ -157,3 +158,59 @@ #define S(a,b,t) smoothstep(a,b,t)
 }
-`;export{g as ShaderMount,_ as getShaderColorFromString,w as grainCloudsFragmentShader,F as meshGradientFragmentShader};
+`;var C=`
+precision mediump float;
+
+uniform vec3 u_colorFront;
+uniform vec3 u_colorBack;
+uniform float u_scale;
+uniform float u_brightness;
+uniform float u_speed;
+
+uniform float u_time;
+uniform float u_ratio;
+uniform vec2 u_resolution;
+
+vec2 rotate(vec2 uv, float th) {
+  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
+}
+
+float neuro_shape(vec2 uv, float t) {
+  vec2 sine_acc = vec2(0.);
+  vec2 res = vec2(0.);
+  float scale = 8.;
+
+  for (int j = 0; j < 15; j++) {
+    uv = rotate(uv, 1.);
+    sine_acc = rotate(sine_acc, 1.);
+    vec2 layer = uv * scale + float(j) + sine_acc - t;
+    sine_acc += sin(layer);
+    res += (.5 + .5 * cos(layer)) / scale;
+    scale *= (1.2);
+  }
+  return res.x + res.y;
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  float ratio = u_resolution.x / u_resolution.y;
+  vec2 uv_r = uv;
+  uv_r -= .5;
+  uv_r *= u_scale;
+  uv_r += .5;
+  uv_r.x *= ratio;
+
+  float t = u_speed * u_time;
+  vec3 color = vec3(0.);
+
+  float noise = neuro_shape(uv_r, t);
+
+  noise = u_brightness * pow(noise, 3.);
+  noise += pow(noise, 10.);
+  noise = max(.0, noise - .5);
+  noise *= (1. - length(uv - .5));
+
+  color = mix(u_colorBack, u_colorFront, noise);
+
+  gl_FragColor = vec4(color, 1.);
+}
+`;export{v as ShaderMount,g as getShaderColorFromString,F as grainCloudsFragmentShader,w as meshGradientFragmentShader,C as neuroNoiseFragmentShader};
 //# sourceMappingURL=index.js.map

dist/shader-mount.d.ts

@@ -42,2 +42,2 @@ export declare class ShaderMount {
 /**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGB array */
-export declare function getShaderColorFromString(colorString: string | undefined, fallback?: [number, number, number]): [number, number, number];
+export declare function getShaderColorFromString(colorString: string | [number, number, number] | undefined, fallback?: string | [number, number, number]): [number, number, number];

dist/shaders/mesh-gradient.d.ts

@@ -9,3 +9,3 @@ export type MeshGradientUniforms = {
 /**
- * Mesh Gradient: https://www.shadertoy.com/view/wdyczG
+ * Mesh Gradient, based on https://www.shadertoy.com/view/wdyczG
  * Renders a mesh gradient with a rotating noise pattern
@@ -12,0 +12,0 @@ * and several layers of fractal noise

package.json

 {
   "name": "@paper-design/shaders",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "MIT",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53204

increased by14.66%

Number of package files

10

increased by11.11%

Lines of code

320

increased by29.03%

No dependency changes