shader({ width: 640, height: 100 })`
fn mainImage (fragCoord: vec2<f32>, fragColor: ptr<function, vec4<f32>>) {
*fragColor = vec4(fragCoord.xy / iResolution.xy, 0f, 1f);
}`
shader({ width: 640, height: 100, sources, controls: true })`
const size = 25.0;
fn mainImage(fragCoord: vec2<f32>, fragColor: ptr<function, vec4<f32>>) {
let p = fragCoord.xy;
let k = f32((fmod(p.x, size * 2.0) < size) == (fmod(p.y, size * 2.0) < size));
*fragColor = vec4(vec3(k), 1);
}`
shader({
height: 100,
iTime: true,
sources,
visibility,
controls: true
})`
const size = 25.0;
fn rotate2d(a: f32) -> mat2x2<f32> {
return mat2x2(cos(a), -sin(a), sin(a), cos(a));
}
fn mainImage(fragCoord: vec2<f32>, fragColor: ptr<function, vec4<f32>>) {
let p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(iTime / 10.0);
let k = f32((fmod(p.x, size * 2.0) < size) == (fmod(p.y, size * 2.0) < size));
*fragColor = vec4(vec3(k), 1.0);
}`
figure = shader({
height: 100,
sources,
uniforms: { angle: "float" }
})`
const size = 25.0;
fn rotate2d(a: f32) -> mat2x2<f32> {
return mat2x2(cos(a), -sin(a), sin(a), cos(a));
}
fn mainImage(fragCoord: vec2<f32>, fragColor: ptr<function, vec4<f32>>) {
let p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle);
let k = f32((fmod(p.x, size * 2.0) < size) == (fmod(p.y, size * 2.0) < size));
*fragColor = vec4(vec3(k), 1.0);
}`
figure.update({ angle: (now / 10000.0) % (2 * Math.PI) })
shader({ height: 100, inputs: { angle: viewof angle, size: viewof size } })`
fn modulo(x: f32, y: f32) -> f32 { return x - y * floor(x / y); }
fn rotate2d(a: f32) -> mat2x2<f32> {
return mat2x2(cos(a), -sin(a), sin(a), cos(a));
}
fn mainImage(fragCoord: vec2<f32>, fragColor: ptr<function, vec4<f32>>) {
let p = (fragCoord.xy - iResolution.xy / 2.0) * rotate2d(angle);
let k = f32((modulo(p.x, size * 2.0) < size) == (modulo(p.y, size * 2.0) < size));
*fragColor = vec4(vec3(k), 1.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.
