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 boxesraymarch 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 templatebnbshader x raymarch template
Icosahedron & lights
bnbShader(await raymarch({
sceneSDF: `
${hg_sdf()}
${sdSphere()}
${opSmoothUnion()}
${rotate3D()}
float glow1 = 0.;
float glow2 = 0.;
float glow3 = 0.;
vec2 sceneSDF(vec3 p) {
initGDFVectors();
float t = u_time * TAU;
p.z += 3.;
float box = fIcosahedron(p * rotate3D(t, vec3(1., -1.2, 2.5)), 2.3);
float sphere = sdSphere(vec3(p.x - cos(t * 3.) * 2., p.y - sin(t) * 2., p.z - sin(t * 2.) * 2.), 0.6);
//glow1 += 0.001 / (0.001 + sphere * sphere * 1.0);
glow1 += 0.1 / (0.1 + sphere * sphere * 5.0);
float sphere2 = sdSphere(vec3(p.x + cos(t) * 2., p.y - sin(t * 2.) * 2., p.z - cos(t) * 2.), 0.9);
glow2 += 0.01 / (0.01 + sphere2 * sphere2 * 1.0);
float sphere3 = sdSphere(vec3(p.x - cos(t) * 2., p.y + sin(t) * 2., p.z + sin(t * 3.) * 2.), 0.6);
glow3 += 0.001 / (0.001 + sphere3 * sphere3 * 1.0);
return vec2(opSmoothUnion(sphere3, opSmoothUnion(sphere2, opSmoothUnion(box, sphere, 1.), 1.), 1.), 1.);
}
`,
antiAliasing: 3,
eye: `vec3(0, 0, 5)`,
computeColor: computeColor(),
logShader: true
}), {
w: 540, h: 540,
numFrames: 120,
record: true,
video: 'mp4',
// shutterAngle: 0.5,
// samplesPerFrame: 2
})
computeColor = () => `
vec3 computeColor(vec3 ro, vec3 rd, vec3 pos, float d, float m) {
vec3 nor = calcNormal(pos);
vec3 ref = reflect(rd, nor); // reflected ray
// material
vec3 col = vec3(0);
// lighting
float occ = calcAO(pos, nor); // ambient occlusion
float fre = pow(clamp(1.0 + dot(nor, rd), 0.0, 1.0), 2.0); // fresnel
vec3 lin = vec3(0.0);
lin += 0.25 * fre * vec3(1.00, 1.00, 1.00) * occ;
col = col * lin;
col += glow1 * vec3(.8, .05, .05);
col += glow2 * vec3(.05, .05, .8);
col += glow3 * vec3(.05, .8, .01);
// gamma
col = pow(col, vec3(0.4545));
return col;
}`
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.
