Generative artist, sharing my journey in visual experiments.
bnbShader(await raymarch({
background: `vec3(22./255.)`,
eye: `vec3(3, 2, 3) * rotate3D(u_time * TAU, vec3(0, 1, 0))`,
sceneSDF: `
#define PI ${Math.PI}
#define TAU ${Math.PI * 2}
${sdBox()}
${sdSphere()}
${sdRoundedCylinder()}
${opRep()}
${opUnion()}
${opSubtraction()}
${opIntersection()}
${rotate3D()}
float glow = 0.;
float glow2 = 0.;
float wiredCylinder(vec3 p) {
float d = 10e5;
float weight = 0.001;
const float n = 6.;
for(float i = 0.; i < n; i++) {
vec3 pp = p * rotate3D(PI / n * i, vec3(0, 1, 0));
float box = sdBox(pp, vec3(.7, 2.5, weight * 2.));
d = opUnion(d, box);
}
d = opUnion(d, sdBox(opRep(p, vec3(1., .85 / 2., 1.)), vec3(.7, weight, .7)));
float c = sdRoundedCylinder(p, .2, .4, 1.7);
c = opSubtraction(c + weight * 2., c);
d = opIntersection(d, c);
return d;
}
float wiredSphere(vec3 p) {
float d = 10e5;
float weight = 0.001;
const float n = 6.;
for(float i = 0.; i < n; i++) {
vec3 pp = p * rotate3D(PI / n * i, vec3(0, 1, 0));
float box = sdBox(pp, vec3(5., 5., weight * 2.));
d = opUnion(d, box);
}
d = opUnion(d, sdBox(opRep(p, vec3(10., .85 / 2., 10.)), vec3(5., weight, 5.)));
float c = sdSphere(p*rotate3D(PI/2., vec3(1, 0, 0)), 4.);
c = opSubtraction(c + weight * 2., c);
d = opIntersection(d, c);
return d;
}
vec2 sceneSDF(vec3 p) {
float d = 10e5;
p *= rotate3D(u_time * TAU, vec3(1, 0, 0));
d = opUnion(d, wiredCylinder(p));
d = opUnion(d, wiredCylinder(p * rotate3D(PI/2., vec3(1, 0, 0))));
d = opUnion(d, wiredCylinder(p * rotate3D(PI/2., vec3(0, 0, 1))));
glow += (0.05 / (0.05 + d * d * 50.)) / (float(AA * AA) * 7.);
float d2 = wiredSphere(p);
glow2 += (0.05 / (0.05 + d2 * d2 * 50.)) / (float(AA * AA) * 10.);
d = opUnion(d, d2);
return vec2(d, 10.);
}`,
effect: `
vec3 effect(vec3 c) {
c += glow * vec3(.2, .2, 1.5);
c += glow2 * vec3(1.5, .2, .2);
return c;
}
`,
antiAliasing: 3,
logShader: true
}), {
w: 540, h: 540,
numFrames: 110,
fps: 20,
record: true,
video: 'mp4',
shutterAngle: .8,
samplesPerFrame: 8,
chromaticAberration: 2
})
sdRoundedCylinder()
import {sdBox, sdRoundedCylinder, sdSphere, opIntersection, opUnion, opSubtraction, opRep} from '@makio135/iq-sdf'
import {rotate3D} from '@makio135/glsl-snippets'
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.
