-
Notifications
You must be signed in to change notification settings - Fork 0
/
shader.js
65 lines (51 loc) · 1.53 KB
/
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
60
61
62
63
64
65
const canvasSketch = require('canvas-sketch')
const createShader = require('canvas-sketch-util/shader')
const glsl = require('glslify')
// Setup our sketch
const settings = {
context: 'webgl',
dimensions: [512, 512],
animate: true,
duration: 4,
fps: 24,
}
// Your glsl code
const frag = glsl(/*glsl*/ `
precision highp float;
uniform float time;
uniform float aspect;
varying vec2 vUv;
#pragma glslify: noise = require('glsl-noise/simplex/3d');
#pragma glslify: hsl2rgb = require('glsl-hsl2rgb');
void main () {
// vec3 colorA = cos(time * 2.0) + vec3(1.0, 0.0, 0.0);
// vec3 colorB = vec3(0.0, 0.5, 0.0);
vec2 center = vUv - 0.5;
center.x *= aspect;
float dist = length(center);
float alpha = smoothstep(0.25, 0.2475, dist);
// vec3 color = mix(colorA, colorB, vUv.y + vUv.x * sin(time));
// gl_FragColor = vec4(color, alpha);
float n = noise(vec3(center * 0.5, time * 0.25));
vec3 color = hsl2rgb(0.6 + n * 0.2, 0.5, 0.5);
gl_FragColor = vec4(color, alpha);
}
`)
// 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)