shader({
width: 400,
height: 400,
iTime: true,
visibility,
inputs:{a: viewof amp, f:viewof frec}
})`
float Wave(float p, float amplitude, float frequence)
{
float y = amplitude*(abs(mod(p*frequence,2.0)-1.));
return y;
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
st.x *= iResolution.x/iResolution.y;
st = st * 2.-1.;
float d = length(st);
d -= iTime;
float wave = Wave(d,a,f);
fragColor = vec4(vec3(wave),1.0);
}
`
viewof freq2 = Inputs.range([0, 10], {label: "Frequency"})
viewof amp2 = Inputs.range([0, 10], {label: "Amplitude", value:1.0})
canvas = shader({width:400, height: 400, iTime: true,uniforms: {f: "float", a:"float"}})`
float Wave(float p, float amplitude, float frequence)
{
float y = amplitude*(abs(mod(p*frequence,2.0)-1.));
return y;
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
st.x *= iResolution.x/iResolution.y;
st = st * 2.-1.;
float d = length(st);
d -= iTime;
float wave = Wave(d,a,f);
fragColor = vec4(vec3(wave),1.0);
}
`
canvas.update({f: freq2,a:amp2})
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.
