canvas = shader({ width, height: 200, iTime: true, visibility, uniforms: {amp: "float", frec: "float"} })`
float plot(vec2 st, float pct){
return smoothstep( pct-0.564, pct, st.y) -
smoothstep( pct, pct+0.012, st.y);
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float y = smoothstep(amp,0.660,st.x) - smoothstep(frec,0.840,st.x);
vec3 color = vec3(y);
fragColor = vec4(st.x,st.y,0.0,1.0);
// Plot a line
float pct = plot(st, y);
color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
fragColor = vec4(color,1.0);
}
`
canvas.update({amp: amp, frec:frec})
canvas2 = shader({
width:300,
height: 600,
iTime: true,
visibility,
uniforms: { amp: "float", frec: "float" }
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
st.x *= iResolution.x/iResolution.y;
vec3 color = vec3(0.0);
float d = 0.0;
// Remap the space to -1. to 1.
st = st *amp-0.2;
// Make the distance field
// d = length( abs(st)-.2 );
d = length( abs(st));
// d = length( min(abs(st)-.3,0.) );
// d = length( max(abs(st)-.3,0.) );
// Visualize the distance field
fragColor = vec4(vec3(fract(d*10.0)),1.0);
// Drawing with the distance field
//fragColor = vec4(vec3( step(.3,d) ),1.0);
//fragColor = vec4(vec3( step(.3,d) * step(d,.4)),1.0);
// fragColor = vec4(vec3( smoothstep(.3,.4,d)* smoothstep(.6,.5,d)) ,1.0);
}
`
canvas2.update({amp: amp, frec:frec})
frec = Generators.observe((notify) => {
osc.on("/frec", (msg) => {
notify(msg.args[0]);
});
})
amp = Generators.observe((notify) => {
osc.on("/amp", (msg) => {
notify(msg.args[0]);
});
})
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.
