Generative artist, sharing my journey in visual experiments.
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothstroke(raysSDF(st, 8), 0.5, 0.15, 0.005);
float inner = starSDF(st.xy, 6, 0.09);
float outer = starSDF(st.yx, 6, 0.09);
color *= smoothstep(0.69, 0.71, outer);
color += smoothfill(outer, 0.5, 0.01);
color -= smoothstroke(inner, 0.25, 0.06, 0.01);
color += smoothstroke(outer, 0.6, 0.05, 0.01);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += flip(smoothstroke(raysSDF(st, 28), 0.5, 0.2, 0.035), fill(st.y, 0.5));
float rect = rectSDF(st, vec2(1.0));
color *= step(0.25, rect);
color += fill(rect, 0.2);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float sdf = polySDF(st.yx, 8);
color += fill(sdf, 0.5);
color *= smoothstroke(raysSDF(st, 8), 0.5, 0.2, 0.01);
color *= smoothstep(0.265, 0.275, sdf);
color += stroke(sdf, 0.2, 0.05);
color += stroke(sdf, 0.6, 0.1);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float v1 = vesicaSDF(st, 0.5);
vec2 st2 = st.yx + vec2(0.04, 0.0);
float v2 = vesicaSDF(st2, 0.7);
color += smoothstroke(v2, 1.0, 0.05, 0.005);
color += smoothfill(v2, 1.0, 0.005) * smoothstroke(circleSDF(st), 0.3, 0.05, 0.005);
color += smoothstroke(raysSDF(st, 50), 0.2, 0.2, 0.05) * smoothfill(v1, 1.25, 0.01) * step(1.0, v2);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothfill(heartSDF(st), 0.5, 0.02);
color -= smoothstroke(polySDF(st, 3), 0.15, 0.05, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st.x = flip(st.x, step(0.5, st.y));
vec2 offset = vec2(0.15, 0.0);
float left = circleSDF(st + offset);
float right = circleSDF(st - offset);
color += smoothstroke(left, 0.4, 0.075, 0.005);
color = smoothbridgef(color, right, 0.4, 0.075, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = st.yx;
st.x = mix(1.0 - st.x, st.x, step(0.5, st.y));
vec2 o = vec2(0.1, 0.0);
vec2 s = vec2(1.0);
float a = radians(45.0);
float l = rectSDF(rotate(st + o, a), s);
float r = rectSDF(rotate(st - o, -a), s);
color += stroke(l, 0.3, 0.1);
color = bridgef(color, r, 0.3, 0.1);
color += smoothfill(rhombSDF(abs(st.yx - vec2(0.5, 0.5))), 0.1, 0.008);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st.x = mix(1.0 - st.x, st.x, step(0.5, st.y));
vec2 o = vec2(0.05,0.0);
vec2 s = vec2(1.0);
float a = radians(45.0);
float l = rectSDF(rotate(st + o, a), s);
float r = rectSDF(rotate(st - o, -a), s);
color += stroke(l, 0.145, 0.098);
color = bridgef(color, r, 0.145, 0.098);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float r1 = rectSDF(st, vec2(1.0));
float r2 = rectSDF(rotate(st, radians(45.0)), vec2(1.0));
float inv = step(0.5, (st.x + st.y) * 0.5);
inv = flip(inv, step(0.5, 0.5 + (st.x - st.y) * 0.5));
float w = 0.075;
color += stroke(r1, 0.5, w) + stroke(r2, 0.5, w);
float bridges = mix(r1, r2, inv);
color = bridgef(color, bridges, 0.5, w);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float inv = step(0.5, st.y);
st = rotate(st, radians(-45.0)) - 0.2;
st = mix(st, 0.6 - st, step(0.5, inv));
for (int i = 0; i < 5; i++) {
float r = rectSDF(st, vec2(1.0));
float s = 0.25;
s -= abs(float(i) * 0.1 - 0.2);
color = bridgef(color, r, s, 0.05);
st += 0.1;
}
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.
