Generative artist, sharing my journey in visual experiments.
sh = async () => raymarch({
antiAliasing: 3,
eye: `vec3(0, sin(u_time * TAU) * .1, -1) * 3.8`,
background: `vec3(.1)`,
distMax: 100,
sceneSDF: `
#define PI ${Math.PI}
#define TAU ${Math.PI * 2}
uniform sampler2D u_texture;
${iqSDF.sdBox()}
${iqSDF.opSmoothUnion()}
${iqSDF.rotateX()}
${iqSDF.rotateZ()}
${await glslSnippets.matcap()}
vec2 sceneSDF(vec3 p) {
float d = 10e5;
float t = (u_time - .4) * TAU;
const float n = 12.;
for(float i = 0.; i < n; i ++) {
float angle = TAU/n * i;
vec3 pp = p + vec3(cos(angle) * 1., sin(angle) * 1., 0.);
float angle2 = t + (i/n) * PI * (n - 2.);
pp *= rotateZ(angle2);
pp *= rotateX(angle2);
d = opSmoothUnion(d, sdBox(pp, vec3(.55, .11, .11)) - .05, .25);
}
return vec2(d, 1.);
}`,
computeColor: `
vec3 computeColor(vec3 ro, vec3 rd, vec3 pos, float d, float m) {
vec3 color = vec3(0.);
vec3 nor = calcNormal(pos);
vec2 matcapUV = matcap(rd, nor);
color = texture2D(u_texture, matcapUV).rgb;
float fre = pow(1.0 + dot(nor, rd), 2.); // fresnel
vec3 bg = vec3(.1);
color = mix(color, bg, fre);
return color;
}`,
logShader: true
})
iqSDF
glslSnippets
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.
