Published
Edited
Nov 24, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
return vec4(0.0, 0.0, 0.0, 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += step(0.5, st.x);
return vec4(vec3(color), 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`#ifndef PI
#define PI 3.1415926535897932384626433832795
#endif
vec4 render(vec2 st) {
float color = 0.0;
color += smoothstep(0.495 + cos(st.y * PI) * 0.25, 0.505 + cos(st.y * PI) * 0.25, st.x);
return vec4(vec3(color), 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += step(0.5, (st.x + st.y) * 0.5);
return vec4(vec3(color), 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += stroke(st.x, 0.5, 0.15);
return vec4(vec3(color), 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`
#ifndef PI
#define PI 3.1415926535897932384626433832795
#endif

vec4 render(vec2 st) {
float color = 0.0;
float offset = cos(st.y * PI) * 0.15;
color += smoothstroke(st.x, 0.28 + offset, 0.1, 0.005);
color += smoothstroke(st.x, 0.5 + offset, 0.1, 0.005);
color += smoothstroke(st.x, 0.72 + offset, 0.1, 0.005);
return vec4(vec3(color), 1.0);
}`)

Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float sdf = 0.5 + (st.x - st.y) * 0.5;
color += stroke(sdf, 0.5, 0.1);
return vec4(vec3(color), 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
float sdf = 0.5 + (st.x - st.y) * 0.5;
color += stroke(sdf, 0.5, 0.1);
float sdf_inv = (st.x + st.y) * 0.5;
color += stroke(sdf_inv, 0.5, 0.1);
return vec4(vec3(color), 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothstroke(circleSDF(st), 0.5, 0.05, 0.005);
return vec4(vec3(color), 1.0);
}`)
Insert cell
Insert cell
pixelSpiritify(`vec4 render(vec2 st) {
float color = 0.0;
color += smoothfill(circleSDF(st), 0.65, 0.01);
vec2 offset = vec2(0.1, 0.05);
color -= smoothfill(circleSDF(st - offset), 0.5, 0.01);
return vec4(vec3(color), 1.0);
}`)
Insert cell

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.
Learn more