Generative artist, sharing my journey in visual experiments.
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float sdf = rectSDF(st, vec2(1.0));
color += stroke(sdf, 0.5, 0.125);
color += fill(sdf, 0.1);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float rect = rectSDF(st, vec2(1.0));
color += fill(rect, 0.5);
float cross = crossSDF(st, 1.0);
color *= step(0.5, fract(cross * 4.0));
color *= step(1.0, cross);
color += fill(cross, 0.5);
color += stroke(rect, 0.65, 0.05);
color += stroke(rect, 0.75, 0.025);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float rect = rectSDF(st, vec2(0.5, 1.0));
float diag = (st.x + st.y) * 0.5;
color += flip(fill(rect, 0.6), stroke(diag, 0.5, 0.01));
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
vec2 offset = vec2(0.15, 0.0);
float left = circleSDF(st + offset);
float right = circleSDF(st - offset);
color += flip(smoothstroke(left, 0.5, 0.05, 0.005), smoothfill(right, 0.525, 0.005));
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float sdf = vesicaSDF(st, 0.2);
color += flip(smoothfill(sdf, 0.5, 0.005), step((st.x + st.y) * 0.5, 0.5));
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st.y = 1.0 - st.y;
vec2 ts = vec2(st.x, 0.82 - st.y);
color += smoothfill(triSDF(st), 0.7, 0.005);
color -= smoothfill(triSDF(ts), 0.36, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float circle = circleSDF(st - vec2(0.0, 0.1));
float triangle = triSDF(st + vec2(0.0, 0.1));
color += smoothstroke(circle, 0.45, 0.1, 0.005);
color *= smoothstep(0.545, 0.555, triangle);
color += smoothfill(triangle, 0.45, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float sdf = rhombSDF(st);
color += smoothfill(sdf, 0.425, 0.005);
color += smoothstroke(sdf, 0.5, 0.05, 0.005);
color += smoothstroke(sdf, 0.6, 0.03, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += flip(smoothfill(triSDF(st), .5, 0.005), smoothfill(rhombSDF(st), 0.4, 0.005));
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(st, radians(-25.0));
float sdf = triSDF(st);
sdf /= triSDF(st + vec2(0.0, 0.2));
color += smoothfill(abs(sdf), 0.56, 0.01);
return vec4(vec3(color), 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.
