JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id=c></canvas>
CSS
canvas {
position: absolute;
top: 0;
left: 0;
}
JavaScript
Helper = {};
Helper.createShader = function( gl, type, source ){
var shader = gl.createShader( type );
gl.shaderSource( shader, source );
gl.compileShader( shader );
return shader;
}
Helper.createProgram = function( gl, vertexShader, fragmentShader ){
var program = gl.createProgram();
gl.attachShader( program, vertexShader );
gl.attachShader( program, fragmentShader );
gl.linkProgram( program );
return program;
}
Helper.pixel2DVertexVaryingShader = `
attribute vec2 a_position;
uniform vec2 u_resolution;
attribute vec3 a_color;
varying vec3 v_color;
void main(){
gl_Position = vec4( vec2( 1, -1 ) * ( ( a_position / u_resolution ) * 2.0 - 1.0 ), 0, 1 );
v_color = a_color;
}
`;
Helper.uniform2DFragmentVaryingShader = `
precision mediump float;
varying vec3 v_color;
uniform float u_tick;
float frac = 1.0/6.0;
void main(){
float hue = v_color.x + u_tick;
hue = abs(hue - floor(hue));
vec4 color = vec4( 0, 0, 0, 1 );
if( hue < frac ){
color.r = 1.0;
color.g = hue / frac;
color.b = 0.0;
} else if( hue < frac * 2.0 ){
color.r = 1.0 - ( hue - frac ) / frac;
color.g = 1.0;
color.b = 0.0;
} else if( hue < frac * 3.0 ){
color.r = 0.0;
color.g = 1.0;
color.b = ( hue - frac * 2.0 ) / frac;
} else if( hue < frac * 4.0 ){
color.r = 0.0;
color.g = 1.0 - ( hue - frac * 3.0 ) / frac;
color.b = 1.0;
} else if( hue < frac * 5.0 ){
color.r = ( hue - frac * 4.0 ) / frac;
color.g = 0.0;
color.b = 1.0;
} else {
color.r = 1.0;
color.g = 0.0;
color.b = 1.0 - ( hue - frac * 5.0 ) / frac;
}
color = vec4( color.rgb * v_color.y, v_color.z );
gl_FragColor = color;
}
`;
// end of helper
var gl = c.getContext( 'webgl' )
, w = c.width = window.innerWidth
, h = c.height = window.innerHeight
, webgl = {};
webgl.shaderProgram =
Helper.createProgram(
gl,
Helper.createShader( gl, gl.VERTEX_SHADER, Helper.pixel2DVertexVaryingShader ),
...