Generative artist, sharing my journey in visual experiments.
bnbshader x raymarch templatePlaying with matcap studioRaymarching & MatCaps materials :)Layers of noiseDeep in the AbyssNoise SDF testsWireframed boxesIcosahedron & lightsraymarch x bnbShaderExploding FractalPolyhedrons & lasersSliced torusFolding spaceΞLasers & tori fractalFlipping boxesFolding spaceFolding spaceLasers & tori fractalGyroid sphereGyroid columnfBlob & metaballsFolding spacefolding space 2bnbshader x raymarch templatebnbshader x raymarch templateUntitledbnbshader x raymarch template
bnbshader x raymarch template
sh = () => raymarch({
eye: `vec3(2., 2. + sin(u_time * TAU), 4.)`,
background: `vec3(22./255.)`,
sceneSDF: `
#define PI ${Math.PI}
#define TAU ${Math.PI * 2}
${iqSDF.sdBox()}
${iqSDF.sdTorus()}
${iqSDF.opUnion()}
${iqSDF.opSubtraction()}
${iqSDF.opIntersection()}
${iqSDF.opSymXYZ()}
${iqSDF.opRep()}
${iqSDF.rotateY()}
${glslSnippets.rotate3D()}
${motionToolkit.easeInOutCubic()}
float glow1 = 0.;
float glow2 = 0.;
float wireframedBox(vec3 p, vec3 dim, float weight) {
float d = sdBox(p, dim + weight / 2.);
d = opSubtraction(sdBox(p, (dim - weight / 2.) + vec3(1, 0, 0)), d);
d = opSubtraction(sdBox(p, (dim - weight / 2.) + vec3(0, 1, 0)), d);
d = opSubtraction(sdBox(p, (dim - weight / 2.) + vec3(0, 0, 1)), d);
return d;
}
vec2 sceneSDF(vec3 p) {
vec3 pp = p;
p *= rotateY(easeInOutCubic(u_time) * TAU);
float d = wireframedBox(p, vec3(1), .02);
float dd = sdBox(p * rotate3D(sin(u_time * TAU) * .5, vec3(1, 0, 1)), vec3(4., .01, 4.));
dd = opUnion(dd, sdTorus(p * rotate3D(u_time * TAU, vec3(1, 0 , 1)), vec2(1.7, .8)));
dd = opIntersection(dd, opUnion(
opUnion(
sdBox(opRep(p, vec3(0., 0., .2)), vec3(4., 4., .001)),
sdBox(opRep(p, vec3(.2, 0., 0.)), vec3(.001, 4., 4.))
),
opSubtraction(sdBox(p, vec3(1. - .001 / 2.)), sdBox(p, vec3(1. + .001 / 2.)))
));
dd = opIntersection(dd, sdBox(p, vec3(1)));
d = opUnion(d, dd);
glow1 += 0.011 / (0.01 + d * d * 50.) / (float(AA * AA) * 40.);
float d2 = wireframedBox(p, vec3(1.3 + sin(u_time * TAU) * .1), .01);
d2 = opIntersection(d2, sdBox(opSymXYZ(p) - (1. - sin(u_time * TAU) * .2), vec3(.4 + sin(u_time * 4. * TAU) * .2)));
glow2 += 0.02 / (0.01 + d2 * d2 * 10.) / (float(AA * AA) * 4.);
d = opUnion(d, d2);
return vec2(d, 135.);
}`,
effect: `
vec3 effect(vec3 c) {
c += glow1 * vec3(.2, 1., .2);
c += glow2 * vec3(.2, .2, 1.);
return c;
}
`,
antiAliasing: 3,
logShader: true
})
motionToolkit.easeInOutCubic()
glslSnippets
motionToolkit
iqSDF
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.
