How to draw a sine wave
Draw a moving sine wave in a fragment shader.
article
canvas
data
| Vertice | Index | x | y |
|---|---|---|---|
| 0 | 0 | 0 | 0 |
| 1 | 1 | 512 | 0 |
| 2 | 2 | 0 | 288 |
| 3 | 3 | 0 | 288 |
| 4 | 4 | 512 | 288 |
| 5 | 5 | 512 | 0 |
pixel
r
0
g
0
b
0
a
0
x
0
y
0
Fragment Shader
xxxxxxxxxx1
precision mediump float;2
3
uniform vec2 u_resolution;4
uniform float u_time;5
6
7
8
vec3 bgColorDown = vec3(0.2, 0.1, 0.1);9
vec3 bgColorUp = vec3(0.1, 0.1, 0.2);10
11
vec3 P1ColorIn = vec3(1.0, 0.5, 0.0);12
vec3 P1ColorOut = vec3(1.0, 0.0, 0.0);13
14
vec3 P2ColorIn = vec3(0.0, 0.5, 1.0); //vec3(1.0, 1.0, 1.0);15
vec3 P2ColorOut = vec3(0.0, 0.0, 1.0); //vec3(0.0, 0.5, 1.0);16
17
void main() {18
vec2 uv = gl_FragCoord.xy / u_resolution.xy;19
20
float curve = 0.1 * sin((9.25 * uv.x) + (2.0 * u_time));21
22
float lineAShape = smoothstep(1.0 - clamp(distance(curve + uv.y, 0.5) * 1.0, 0.0, 1.0), 1.0, 0.99);23
vec3 lineACol = (1.0 - lineAShape) * vec3(mix(P1ColorIn, P1ColorOut, lineAShape));24
25
gl_FragColor = vec4(lineACol, 1.0);26
}27
Vertex Shader
xxxxxxxxxx1
precision mediump float;2
3
attribute vec2 a_position;4
uniform vec2 u_resolution;5
6
void main() {7
vec2 pos = a_position / u_resolution * 2.0 - 1.0;8
gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);9
}10