How to draw a sine wave

Draw a moving sine wave in a fragment shader.

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

precision mediump float;uniform vec2 u_resolution;uniform float u_time;#define PI 3.14vec3 bgColorDown = vec3(0.2, 0.1, 0.1);vec3 bgColorUp = vec3(0.1, 0.1, 0.2);vec3 P1ColorIn = vec3(1.0, 0.5, 0.0);vec3 P1ColorOut = vec3(1.0, 0.0, 0.0);vec3 P2ColorIn = vec3(0.0, 0.5, 1.0); //vec3(1.0, 1.0, 1.0);vec3 P2ColorOut = vec3(0.0, 0.0, 1.0); //vec3(0.0, 0.5, 1.0);void main() { vec2 uv = gl_FragCoord.xy / u_resolution.xy; float curve = 0.1 * sin((9.25 * uv.x) + (2.0 * u_time)); float lineAShape = smoothstep(1.0 - clamp(distance(curve + uv.y, 0.5) * 1.0, 0.0, 1.0), 1.0, 0.99); vec3 lineACol = (1.0 - lineAShape) * vec3(mix(P1ColorIn, P1ColorOut, lineAShape)); gl_FragColor = vec4(lineACol, 1.0);}

Vertex Shader

precision mediump float;attribute vec2 a_position;uniform vec2 u_resolution;void main() { vec2 pos = a_position / u_resolution * 2.0 - 1.0; gl_Position = vec4(pos.x, -pos.y, 0.0, 1.0);}