Generative artist, sharing my journey in visual experiments.
bnbShader(`
precision mediump float;
#define PI 3.1415926
#define TAU PI*2.
uniform vec2 u_resolution;
uniform float u_time;
mat3 rotate3D(float angle, vec3 axis){
vec3 a = normalize(axis);
float s = sin(angle);
float c = cos(angle);
float r = 1.0 - c;
return mat3(
a.x * a.x * r + c,
a.y * a.x * r + a.z * s,
a.z * a.x * r - a.y * s,
a.x * a.y * r - a.z * s,
a.y * a.y * r + c,
a.z * a.y * r + a.x * s,
a.x * a.z * r + a.y * s,
a.y * a.z * r - a.x * s,
a.z * a.z * r + c
);
}
vec3 hsv(float h, float s, float v){
vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w));
return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s);
}
void main() {
vec2 r = u_resolution;
float t = u_time;
float n, g, e, R, S;
vec3 p, q;
for(float i = 1.; i < 50.; i ++) {
n = i;
p = g * vec3((gl_FragCoord.xy * 2. - r) / r.y, 1);
p.z -= 4.8;
p *= rotate3D(t * TAU, vec3(-1, 1, -1));
q = p;
R = 1.;
for(int j = 0; j < 8; j++) {
float s = sin(t * TAU + PI / 2.) * .2 + .25;
p -= clamp(p, -1., 1.) * 2.;
S = 9. * clamp(s / min(dot(p, p), 1.),0.,1.);
p = p * S + q * .5;
R = R * abs(S) + .5;
}
e = .7 * length(p) / R - 1e-3;
g += e;
if(e < .001) break;
}
float o = 9./n;
gl_FragColor = vec4(hsv(mod(o, 1.), o + .1, 1. - o), 1.);
}`, {
w: 540, h: 540,
numFrames: 100,
fps: 20,
record: true,
// video: 'mp4',
shutterAngle: .5,
samplesPerFrame: 6
})
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.
