Published
Edited
Dec 17, 2020
1 star
Insert cell
Insert cell
bnbShader(await raymarch({
background: `vec3(22. / 255.)`,
eye: `vec3(4., 3.2 + sin(u_time * TAU) * 2.2, 3.2 + cos(u_time * TAU) * 2.2)`,
target: `vec3(2, 0, 0)`,
sceneSDF: `
#define PI ${Math.PI}
#define TAU ${Math.PI * 2}

${sdRoundedCylinder()}
${sdBox()}
${opIntersection()}
${rotate3D()}
${opSmoothUnion()}

float glow = 0.;

vec2 sceneSDF(vec3 p) {
float d = 10e5;

const float n = 16.;
for(float i = 0.; i < n; i ++){
vec3 pp = p;
pp.x -= 2.;
pp *= rotate3D(i / n * PI, vec3(0 , 0, 1));
pp.y = abs(pp.y);
float tt = u_time * TAU + i / n * PI;
pp = (pp - vec3(0, 1.2, 0)) * rotate3D(-u_time * TAU + i / n * PI, vec3(1, 0, 0));
float c = sdRoundedCylinder(pp, .05, .1, .8);
float b = sdBox(pp + vec3(0, cos(u_time * TAU + i / n * PI) * .9, 0), vec3(.1, .0001, .1));
float bb = sdBox(pp + vec3(0, -cos(u_time * TAU + i / n * PI) * .9, 0), vec3(.1, .0001, .1));
b = min(b, bb);
float g = opIntersection(c + .01, b);
glow += (0.01 / (0.01 + g * g * 50.)) / (float(AA * AA) * 10.);

d = opSmoothUnion(d, c, 0.2);
}

return vec2(d, 2.);
}`,
effect: `
vec3 effect(vec3 col) {
col += glow * vec3(1., 1., .2);
return col;
}
`,
antiAliasing: 3,
logShader: true
}), {
w: 540, h: 540,
record: true,
fps: 20,
video: 'mp4',
shutterAngle: .8,
samplesPerFrame: 8
})
Insert cell
Insert cell
Insert cell
Insert cell
import {sdRoundedCylinder, sdTorus, opSmoothUnion, sdSphere, sdBox, opIntersection} from '@makio135/iq-sdf'
Insert cell
import {rotate3D} from '@makio135/glsl-snippets'
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