Published
Edited
Dec 17, 2020
2 forks
2 stars
Insert cell
Insert cell
p = getRandomPalette()
Insert cell
// palette = shuffle(p)
palette = ["#1b1b1e", "#d8dbe2", "#a9bcd0", "#58a4b0", "#373f51"]
// palette = ["#540d6e", "#3bceac", "#ffd23f", "#ee4266", "#0ead69"]
// palette = ["#2d3047", "#e84855", "#fffd82", "#1b998b", "#ff9b71"]
Insert cell
Insert cell
Insert cell
sh = () => raymarch({
antiAliasing: 3,
eye: `vec3(2., 2. + sin(u_time * TAU) * 2., 8.) * 1.2 * rotate3D(u_time * TAU, vec3(0, 1, 0))`,
distMax: 60,
background: `vec3(${hexToRgb(palette[0]).join(',')})/255.`,
sceneSDF: `
#define PI ${Math.PI}
#define TAU ${Math.PI * 2}

#define NUM_COLORS ${palette.length}.

uniform sampler2D u_texture;

${iqSDF.sdBox()}
${iqSDF.sdOctahedron()}
${iqSDF.sdSphere()}
${iqSDF.opSymXYZ()}
${iqSDF.opUnion()}
${iqSDF.opSubtraction()}
${iqSDF.opIntersection()}
${glslSnippets.rotate3D()}
${motionToolkit.easeInOutCubic()}
${motionToolkit.easeInOutQuad()}
${motionToolkit.linearstep()}
${motionToolkit.linearstepUpDown()}

vec3 fold(in vec3 p) {
const vec3 nc = vec3(-0.5,-0.809017,0.309017);
for(int i=0;i<5;i++) {
p.xy = abs(p.xy);
float t = 2.*min(0.,dot(p,nc));
p -= t*nc;
}
return p;
}

float glow1 = 0.;
float glow2 = 0.;

vec2 sceneSDF(vec3 p) {
//p *= rotate3D(u_time * TAU, vec3(1,1,0));
vec3 pp = p;
p = fold(p);

// float lasers = sdBox(p, vec3(.0001, .0001, 2. * easeInOutQuad(linearstepUpDown(.35, .45, .65, .7, u_time))));
float lasers = sdBox(p - vec3(1, 0, 1), vec3(3., .0001, .0001));
lasers = opUnion(lasers, sdBox(p - vec3(0., 1. * easeInOutQuad(linearstepUpDown(.35, .45, .62, .68, u_time)), 3.5 + sin(u_time * TAU) * .2), vec3(easeInOutQuad(linearstepUpDown(.07, .15, .65, .7, u_time)) * 3.5, .0001, .0001)));

glow1 += 0.02 / (0.01 + lasers * lasers * 5.) / (float(AA * AA) * 16.);

vec2 d = vec2(10e5, 0);
float s = .5;
for(float i = 0.; i < 8.; i ++) {
p = opSymXYZ(p);
float dd = sdBox(p, vec3(.05, s, .05));
dd = opUnion(dd, sdBox(p, vec3(s, .05, .05)));
if(i == 0.) glow2 += 0.01 / (0.01 + dd * dd * 5.) / (float(AA * AA) * 20.);
//if(i == 7.) glow2 += 0.02 / (0.01 + dd * dd * 5.) / (float(AA * AA) * 20.);
d = opUnion(d, vec2(dd, mod(i, NUM_COLORS - 1.) + 1.));
s *= 1.05;
p.xz -= s * .8;
p *= rotate3D(-easeInOutCubic(1. - u_time) * TAU, vec3(1, 0, 1));
}
float grow = opIntersection(d.x, opSubtraction(sdSphere(pp, easeInOutQuad(linearstep(0., .15, u_time)) * 8.), sdSphere(pp, easeInOutQuad(linearstep(0., .15, u_time)) * 8. - .0001)));
//float grow = opIntersection(d.x, opSubtraction(sdSphere(pp, 1.), sdSphere(pp, 1.01)));

glow1 += 0.02 / (0.01 + grow * grow * 5.) / (float(AA * AA) * 8.);

d = opUnion(d, vec2(lasers, 2.));
// vec2 d = vec2(lasers, 2.);
return d;
}`,
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 = texture2D(u_texture, vec2(m / NUM_COLORS, .5)).rgb;

// lighting
float occ = calcAO(pos, nor); // ambient occlusion
vec3 lig = normalize(vec3(-0.4, 0.7, -0.6)); // sunlight
float amb = clamp(0.5 + 0.5 * nor.y, 0.0, 1.0); // ambient light
float dif = clamp(dot(nor, lig), 0.0, 1.0); // diffuse reflection from sunlight
// backlight
float bac = clamp(dot(nor, normalize(vec3(-lig.x, 0.0, -lig.z))), 0.0, 1.0) * clamp(1.0 - pos.y, 0.0, 1.0);
float dom = smoothstep(-0.1, 0.1, ref.y); // dome light
float fre = pow(clamp(1.0 + dot(nor, rd), 0.0, 1.0), 2.0); // fresnel
float spe = pow(clamp(dot(ref, lig), 0.0, 1.0), 16.0); // specular reflection

dif *= softshadow(pos, lig, 0.02, 2.5);
dom *= softshadow(pos, ref, 0.02, 2.5);

vec3 lin = vec3(0.0);
lin += 1.30 * dif * vec3(1.00, 0.80, 0.55);
lin += 2.00 * spe * vec3(1.00, 0.90, 0.70) * dif;
lin += 0.40 * amb * vec3(0.40, 0.60, 1.00) * occ;
lin += 0.50 * dom * vec3(0.40, 0.60, 1.00) * occ;
lin += 0.50 * bac * vec3(0.25, 0.25, 0.25) * occ;
lin += 0.25 * fre * vec3(1.00, 1.00, 1.00) * occ;
col = col * lin;

// mix in fog?
col = mix(col, vec3(0.8, 0.9, 1.0), 1.0 - exp(-0.00001 * d * d * d));
// col = mix(col, vec3(0.), 1.0 - exp(-0.003 * d * d * d));
// gamma
//col = pow(col, vec3(0.4545));

return col;
}`,
effect: `
vec3 effect(vec3 c) {
c += glow1 * texture2D(u_texture, vec2(3.5 / NUM_COLORS, .5)).rgb;
c += glow2 * texture2D(u_texture, vec2(1.5 / NUM_COLORS, .5)).rgb;
return c;
}
`,
logShader: true
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
iqSDF
Insert cell
Insert cell
motionToolkit
Insert cell
Insert cell
glslSnippets
Insert cell
Insert cell
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