cmd3 = gl4.regl({
vert: `
precision highp float;
// per vertex attributes
attribute vec2 position;
// variables to send to the fragment shader
varying vec3 fragColor;
// values that are the same for all vertices
uniform float pointWidth;
// a helper function to turn HSV colors into RGB
vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main() {
// update the size of a point based on the prop pointWidth
gl_PointSize = pointWidth;
// send color to the fragment shader
// The H value is calculated based on the angle (as a challenge figure out how)
// The S value depends on the distance from the center
// The V value is always defaulted to 1
fragColor = hsv2rgb(vec3((acos(-1.0) + atan(position.y,position.x))/(acos(-1.0)*2.0),1.0-length(position)/sqrt(2.0),1));
// holds the position of a vertex
gl_Position = vec4(position, 0.0, 1.0);
}
`,
frag: `
precision highp float;
varying vec3 fragColor;
void main() {
// holds the color of a pixel
gl_FragColor = vec4(fragColor, 0.8);
}
`,
attributes: {
position: points.map(d => [d.x, d.y]),
},
uniforms: {
pointWidth: gl4.regl.prop('pointWidth'),
},
count: points.length,
primitive: 'points'
})