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 spacebnbshader x raymarch templatebnbshader x raymarch templateUntitledbnbshader x raymarch templatebnbshader x raymarch template
folding space 2
p = getRandomPalette()
palette = shuffle(p)
// palette = ['#ffffff', '#000000', '#ff0000', '#ffee01']
sh = () => raymarch({
antiAliasing: 3,
eye: `vec3(-4, -2, 4) * -3.4`,
distMax: 150,
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.opUnion()}
${iqSDF.sdOctahedron()}
${iqSDF.opIntersection()}
${iqSDF.opSymXYZ()}
${glslSnippets.rotate3D()}
${motionToolkit.linearstep()}
${motionToolkit.easeInOutQuad()}
float step(int i) {
return easeInOutQuad(linearstep(float(i) * .1, float(i + 1) * .1, u_time));
}
float glow = 0.;
vec2 sceneSDF(vec3 p) {
p *= rotate3D(u_time * TAU, vec3(-1, 1, 0));
vec3 pp = p;
vec2 d = vec2(10e5, 0.);
float sinT = sin(u_time * TAU);
vec3 dim2 = vec3(.5 + step(2), .5 + step(1), .5 + step(0)) - easeInOutQuad(linearstep(0., .5, u_time));
float s = .9;
for(float i = 0.; i < 9.; i ++) {
float m = mod(i, NUM_COLORS - 1.) + 1.;
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(0, 0, 1)), dim2), mod(i, NUM_COLORS - 1.) + 1.));
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(0, 1, 0)), dim2.zxy), mod(i + 1., NUM_COLORS - 1.) + 1.));
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(1, 0, 0)), dim2.yzx), mod(i + 2., NUM_COLORS - 1.) + 1.));
p = opSymXYZ(p);
s *= .8;
p.yz -= s * 1.8;
p *= rotate3D(u_time * TAU, vec3(0, 1, 1));
}
p = pp;
s = .9;
for(float i = 0.; i < 9.; i ++) {
float m = mod(i, NUM_COLORS - 1.) + 1.;
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(0, 0, 1)), dim2), mod(i, NUM_COLORS - 1.) + 1.));
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(0, 1, 0)), dim2.zxy), mod(i + 1., NUM_COLORS - 1.) + 1.));
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(1, 0, 0)), dim2.yzx), mod(i + 2., NUM_COLORS - 1.) + 1.));
p = opSymXYZ(p);
s *= .8;
p.xy -= s * 1.8;
p *= rotate3D((u_time + .5) * TAU, vec3(1, 1, 0));
}
p = pp;
s = .9;
for(float i = 0.; i < 9.; i ++) {
float m = mod(i, NUM_COLORS - 1.) + 1.;
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(0, 0, 1)), dim2), mod(i, NUM_COLORS - 1.) + 1.));
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(0, 1, 0)), dim2.zxy), mod(i + 1., NUM_COLORS - 1.) + 1.));
d = opUnion(d, vec2(sdBox(p * rotate3D(PI/4. * 0., vec3(1, 0, 0)), dim2.yzx), mod(i + 2., NUM_COLORS - 1.) + 1.));
p = opSymXYZ(p);
s *= .8;
p.xz -= s * 1.8;
p *= rotate3D(-u_time * TAU, vec3(1, 0, 1));
}
//d = opIntersection(d, sdOctahedron(p, 5. - step(5) * 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.0002 * 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 += glow * texture2D(u_texture, vec2(1.5 / NUM_COLORS, .5)).rgb;
return c;
}
`,
logShader: true
})
shaders
iqSDF
motionToolkit
glslSnippets
import {shuffle} from '@makio135/utilities'
import {getRandomPalette, displayPalettes, hexToRgb} from '@makio135/give-me-colors'
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.
