-
Notifications
You must be signed in to change notification settings - Fork 0
/
noise-shader.js
59 lines (50 loc) · 1.34 KB
/
noise-shader.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const canvasSketch = require('canvas-sketch');
const createShader = require('canvas-sketch-util/shader');
const glsl = require('glslify');
// Setup our sketch
const settings = {
context: 'webgl',
animate: true
};
// Your glsl code
const frag = glsl(`
precision highp float;
uniform float time;
uniform float aspect;
varying vec2 vUv;
// for noise
#pragma glslify: noise = require('glsl-noise/simplex/3d');
#pragma glslify: hsl2rgb = require('glsl-hsl2rgb');
void main () {
// now doing noise
vec2 center = vUv - 0.5;
center.x *= aspect;
float dist = length(center);
float n = noise(vec3(center * 1.0, 0.5));
vec3 color = hsl2rgb(
1.0 + n * 0.25,
0.25 + n * 0.1,
0.8 - n * 0.5
);
float opacity = smoothstep(0.251, 0.25, dist);
gl_FragColor = vec4(color, opacity);
}
`);
// Your sketch, which simply returns the shader
const sketch = ({ gl }) => {
// Create the shader and return it
return createShader({
clearColor: 'white',
// Pass along WebGL context
gl,
// Specify fragment and/or vertex shader strings
frag,
// Specify additional uniforms to pass down to the shaders
uniforms: {
// Expose props from canvas-sketch
time: ({ time }) => time,
aspect: ({ width, height }) => width / height
}
});
};
canvasSketch(sketch, settings);