Published
Edited
May 5, 2022
2 stars
shader({
width: 800,
height: 800,
iTime: true,
visibility,
inputs:{t: viewof freqM,p: viewof ampM},
//uniforms: { t: "float" ,p: "float" } // descomentar para usar con OSC
})`
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 *2.-1.;
// Make the distance field
d = length( abs(st*p))+iTime*-1.0;
//d = length( min(abs(st)-.3,0.) );
//d = length( max(abs(st)-.3,0.) );
// Visualize the distance field
fragColor = vec4(vec3(fract(d)),1.0);
}
`
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.
