shaders = ({
vertex: `
attribute vec4 position;
void main() {
gl_Position = position; // Vertex position
}
`,misterio: `
// Distance from p to a circle of radius 0.7
float signedDistance (in vec2 p) {
float f = 0.6;
float a = sdSegment( p, vec2 (-1.0*f,f), vec2(f,-1.0*f));
float b = sdSegment( p, vec2 (-1.0*f,-1.0*f), vec2(f,f));
float d = sdCircle(p,0.7);
return min(max(d,min(a,b)),max(-1.0*d,min(a,b)));
}
`,
circle: `
// Distance from p to a circle of radius 0.7
float signedDistance (in vec2 p) {
return sdCircle (p, 0.6);
}
`,
box: `
// Distance from p to a box 1.5 units wide and 1 units high
float signedDistance (in vec2 p) {
return sdBox(p, vec2(0.75, 0.5));
}
`,
boxAndCircle: `
// Distance from p to the intersection between a box 1.5 units wide and 1 units high
// and a circle of radius 0.7
float signedDistance (in vec2 p) {
return max(sdBox(p, vec2(0.75, 0.5)), sdCircle(p,0.7));
}
`,
boxOrCircle: `
// Distance from p to the union between a box 1.5 units wide and 1 units high
// and a circle of radius 0.7
float signedDistance (in vec2 p) {
return min(sdBox(p, vec2(0.75, 0.5)), sdCircle(p,0.7));
}
`,
boxMinusCircle: `
// Distance from p to the difference between a box 1.5 units wide and 1 units high
// and a circle of radius 0.7
float signedDistance (in vec2 p) {
return max(sdBox(p, vec2(0.75, 0.5)), -sdCircle(p,0.7));
}
`,
circleMinusBox: `
// Distance from p to the difference between a circle of radius 0.7
// and a box 1.5 units wide and 1 units high
float signedDistance (in vec2 p) {
return max(-sdBox(p, vec2(0.75, 0.5)), sdCircle(p,0.7));
}
`,
plainColoring : `
// Simple coloring scheme for distance d: white inside
// and orange outside
vec3 color (in float d, in vec2 p) {
return vec3(1.0) - sign(d)*vec3(0.1,0.4,0.7);
}
`,
rainbowColoring: `
// Inigo Quilez's coloring scheme for a distance function. Draws isolines
// and highlights the region close to the border. Nice!
vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
{
return a + b*cos( 6.28318*(c*t+d) );
}
vec3 color (in float d, in vec2 p) {
vec3 col = vec3(1.0) - sign(d)*vec3(0.1,0.4,0.7);
col *= 1.0 - exp(-3.0*abs(d));
float c = cos(150.0*d);
col *= 0.8 + 0.2*c*c*c;
col = pal( d, vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.0,0.33,0.67) );
col = mix( col, vec3(1.0), 1.0-smoothstep(0.0,0.01,abs(d)) );
col -= mod(col, 0.2);
return col;
}
`,
iqColoring: `
// Inigo Quilez's coloring scheme for a distance function. Draws isolines
// and highlights the region close to the border. Nice!
vec3 color (in float d, in vec2 p) {
vec3 col = vec3(1.0) - sign(d)*vec3(0.1,0.4,0.7);
col *= 1.0 - exp(-3.0*abs(d));
float c = cos(150.0*d);
col *= 0.8 + 0.2*c*c*c;
col = mix( col, vec3(1.0), 1.0-smoothstep(0.0,0.01,abs(d)) );
return col;
}
`,
fragment: function(distanceFunc,colorFunc) {
return `
precision mediump float;
uniform vec3 iResolution; // Size of the viewport in pixels
uniform float distanceOffset; // Offset value to be added to distance function
//
// Signed distance from point 'p' to a circle of radius 'r' centered at the origin
//
float sdCircle( in vec2 p, in float r )
{
return length(p)-r;
}
float sdSegment( in vec2 p, in vec2 a, in vec2 b)
{
vec2 pa = p-a, ba = b-a;
float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
return length( pa - ba*h )-0.3;
}
//
// Signed distance from point 'p' to an axes-aligned rectangle centered at the origin and
// having width and height equal to b.x/2 and b.y/2, respectively.
//
float sdBox( in vec2 p, in vec2 b )
{
vec2 d = abs(p)-b;
return length(max(d,0.0)) + min(max(d.x,d.y),0.0);
}
${distanceFunc}
${colorFunc}
void main() {
// Translate coordinates to center of screen and normalize to range [-1..1]
vec2 p = (2.0*gl_FragCoord.xy-iResolution.xy)/iResolution.y;
// Compute signed distance to the shape and offset it
float d = signedDistance(p) + distanceOffset;
// Coloring
vec3 col = color(d, p);
gl_FragColor = vec4(col,1.0);
}
`}
})
resolutionLocation = gl.getUniformLocation(program, 'iResolution')
offsetLocation = gl.getUniformLocation(program, 'distanceOffset')
gl.uniform
drawFrame = {
loadVertices; // Reactive dependency!
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Opaque black
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer( vertexLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexLocation);
gl.uniform3fv(resolutionLocation, [canvas.width,canvas.height,1])
gl.uniform1f(offsetLocation, config.offset)
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
