Generative artist, sharing my journey in visual experiments.
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st = rotate(st, radians(-60.0));
st.y = flip(st.y,step(0.5, st.x));
st.y += 0.25;
float down = polySDF(st, 3);
st.y = 1.5 - st.y;
float top = polySDF(st, 3);
color += smoothstroke(top, 0.4, 0.15, 0.005);
color = smoothbridgef(color, down, 0.4, 0.15, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
st.y = 1.0 - st.y;
float s = 0.25;
float t1 = polySDF(st + vec2(0.0, 0.175), 3);
float t2 = polySDF(st + vec2(0.1, 0.0), 3);
float t3 = polySDF(st - vec2(0.1, 0.0), 3);
color += smoothstroke(t1, s, 0.08, 0.005) + smoothstroke(t2, s, 0.08, 0.005) + smoothstroke(t3, s, 0.08, 0.005);
float bridges = mix(mix(t1, t2, step(0.5, st.y)), mix(t3, t2, step(0.5, st.y)), step(0.5, st.x));
color = smoothbridgef(color, bridges, s, 0.08, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`#ifndef TAU
#define TAU 6.2831853071795864769252867665590
#endif
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);
}`)
pixelSpiritify(`#ifndef TAU
#define TAU 6.2831853071795864769252867665590
#endif
vec4 render(vec2 st) {
float color = 0.0;
const float n = 3.0;
float a = TAU / n;
for (float i = 0.0; i < n * 2.0; i++) {
vec2 xy = rotate(st, a * i);
xy.y -= 0.09;
float vsc = vesicaSDF(xy, 0.3);
color = mix(color + smoothstroke(vsc, 0.5, 0.1, 0.005), mix(color, smoothbridgef(color, vsc, 0.5, 0.1, 0.005), smoothstep(xy.x - 0.02, xy.x + 0.02, 0.5) - smoothstep(xy.y - 0.02, xy.y + 0.02, 0.4)), step(3.0, i));
}
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`#ifndef TAU
#define TAU 6.2831853071795864769252867665590
#endif
vec4 render(vec2 st) {
float color = 0.0;
float star = starSDF(st, 8, 0.063);
color += fill(star, 1.22);
const float n = 8.0;
float a = TAU / n;
for (float i = 0.0; i < n; i++) {
vec2 xy = rotate(st, 0.39 + a * i);
xy = scale(xy, vec2(1.0, 0.72));
xy.y -= 0.125;
color *= smoothstep(0.234, 0.235, rhombSDF(xy));
}
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`#ifndef PI
#define PI 3.1415926535897932384626433832795
#endif
vec4 render(vec2 st) {
float color = 0.0;
st -= 0.5;
float r = dot(st, st);
float a = (atan(st.y, st.x) / PI);
vec2 uv = vec2(a, r);
vec2 grid = vec2(5.0, log(r) * 20.0);
vec2 uv_i = floor(uv * grid);
uv.x += 0.5 * mod(uv_i.y, 2.0);
vec2 uv_f = fract(uv * grid);
float shape = rhombSDF(uv_f);
color += smoothfill(shape, 0.9, 0.1) * smoothstep(0.74, 0.75, 1.0 - r);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothfill(flowerSDF(st, 5), 0.25, 0.015);
color -= smoothstep(0.94, 0.96, starSDF(rotate(st, 0.628), 5, 0.1));
color = clamp(color, 0.0, 1.0);
float circle = circleSDF(st);
color -= smoothstroke(circle, 0.1, 0.05, 0.005);
color += smoothstroke(circle, 0.8, 0.07, 0.005);
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothstep(0.495, 0.5, spiralSDF(st, 0.13));
return vec4(vec3(color), 1.0);
}`)
pixelSpiritify(`vec4 render(vec2 st) {
return vec4(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.
