Generative artist, sharing my journey in visual experiments.
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(st, radians(45.0));
color += fill(rectSDF(st, vec2(1.0)), 0.4);
color *= 1.-stroke(st.x, 0.5, 0.02);
color *= 1.-stroke(st.y, 0.5, 0.02);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(st, radians(-45.0));
float off = 0.12;
vec2 s = vec2(1.0);
color += fill(rectSDF(st + off, s), 0.2);
color += fill(rectSDF(st - off, s), 0.2);
float r = rectSDF(st, s);
color *= step(0.33, r);
color += fill(r, 0.3);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(vec2(st.x, 1.0 - st.y), radians(45.0));
vec2 s = vec2(1.0);
color += fill(rectSDF(st - 0.025, s), 0.4);
color += fill(rectSDF(st + 0.025, s), 0.4);
color *= step(0.38, rectSDF(st + 0.025, s));
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(st,radians(-45.0));
vec2 s = vec2(1.0);
float o = 0.05;
color += flip(fill(rectSDF(st - o, s), 0.4), fill(rectSDF(st + o, s), 0.4));
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(st, radians(45.0));
float r1 = rectSDF(st, vec2(1.0));
float r2 = rectSDF(st + 0.15, vec2(1.0));
color += stroke(r1, 0.5, 0.05);
color *= step(0.325, r2);
color += stroke(r2, 0.325, 0.05) * fill(r1, 0.525);
color += stroke(r2, 0.2, 0.05);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(st, radians(-45.0)) - 0.08;
for (int i = 0; i < 4; i++) {
float r = rectSDF(st, vec2(1.0));
color += stroke(r, 0.19, 0.04);
st += 0.05;
}
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float d1 = polySDF(st, 5);
vec2 ts = vec2(st.x, 1.0 - st.y);
float d2 = polySDF(ts, 5);
color += smoothfill(d1, 0.75, 0.01) * smoothfill(fract(d1 * 5.0), 0.5, 0.01);
color -= smoothfill(d1, 0.6, 0.01) * smoothfill(fract(d2 * 4.9), 0.45, 0.01);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = st.yx;
color += smoothstroke(hexSDF(st), 0.6, 0.1, 0.005);
color += smoothfill(hexSDF(st - vec2(-0.06, -0.1)), 0.15, 0.005);
color += smoothfill(hexSDF(st - vec2(-0.06, 0.1)), 0.15, 0.005);
color += smoothfill(hexSDF(st - vec2(0.11, 0.0)), 0.15, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothstroke(circleSDF(st), 0.8, 0.05, 0.005);
st.y = 1.0 - st.y;
float s = starSDF(st.yx, 5, 0.1);
color *= smoothstep(0.69 ,0.71, s);
color += smoothstroke(s, 0.4, 0.1, 0.01);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float bg = starSDF(st, 16, 0.1);
color += smoothfill(bg, 1.3, 0.01);
float l = 0.0;
for (float i = 0.; i < 8.; i++) {
vec2 xy = rotate(st, QTR_PI * i);
xy.y -= 0.3;
float tri = polySDF(xy, 3);
color += smoothfill(tri, 0.31, 0.001);
l += smoothstroke(tri, .3, .03, 0.005);
}
color *= 1.0 - l;
float c = polySDF(st, 8);
color -= smoothstroke(c, 0.15, 0.04, 0.005);
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.
