Generative artist, sharing my journey in visual experiments.
// access to u_resolution, u_mouse and u_time uniforms
pixelSpiritify(`vec4 render(vec2 st) {
return vec4(vec2(gl_FragCoord.x, u_mouse.x) / u_resolution, sin(u_time) / 2.0 + 0.5, 1.0);
}`)
// access to PixelSpirit functions
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothfill(circleSDF(st), 0.85, 0.01);
vec2 offset = vec2(mod(u_time/10., 2.) - 1.0, 0.0);
color -= smoothfill(circleSDF(st-offset), 0.84, 0.01);
color = clamp(color, 0.0, 1.0);
return vec4(vec3(color), 1.);
}`)
// specify canvas dimensions in options
pixelSpiritify(`
#define TAU (2.0*3.1415926)
vec4 render(vec2 st) {
float color = 0.0;
const float n = 12.0;
float a = TAU / n;
for (float i = 0.0; i < n; i++) {
vec2 xy = rotate(st, a * i);
xy.y -= 0.189;
float vsc = vesicaSDF(xy, 0.3);
color *= 1.0 - smoothstroke(vsc, 0.45, 0.1, 0.005) * step(0.5, xy.y);
color += smoothstroke(vsc, 0.45, 0.05, 0.005);
}
return vec4(vec3(color), 1.0);
}
`, { w: 300, h: 300 })
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.
