Generative artist, sharing my journey in visual experiments.
fragment(`
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.y;
vec3 col = vec3(0);
gl_FragColor = vec4(col, 1.);
}
`, { play: false })
fragment(`
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.y;
vec3 col = vec3(0);
gl_FragColor = vec4(col, 1.);
}
`, { play: false })
fragment(`
precision mediump float;
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.y;
vec3 col = vec3(0);
gl_FragColor = vec4(col, 1.);
}
`, { play: false })
fragment(`
precision mediump float;
#define S(a,b,t) smoothstep(a,b,t)
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float hash21(vec2 p) {
vec3 a = fract(vec3(p.xyx) * vec3(213.897, 653.453, 253.098));
a += dot(a, a.yzx + 79.76);
return fract((a.x + a.y) * a.z);
}
vec2 getPos(vec2 id, vec2 offset, float t) {
float n = hash21(id+offset);
float n1 = fract(n*10.);
float n2 = fract(n*100.);
float a = t+n;
return offset + vec2(sin(a*n1), cos(a*n2))*.4;
}
float lineDist(vec2 p, vec2 a, vec2 b) {
vec2 pa = p - a;
vec2 ba = b - a;
float t = clamp(dot(pa, ba) / dot(ba, ba), 0., 1.);
return length(pa - ba * t);
}
float line(vec2 p, vec2 a, vec2 b) {
float d = lineDist(p, a, b);
float m = S(.03, .01, d);
float d2 = length(a - b);
m *= S(1.2, .8, d2) + S(.05, .03, abs(d2 - .75));
return m;
}
int mod(int a, int b) {
return a - b * (a / b);
}
float layer(vec2 uv, float n, float t) {
// create grid
vec2 id = floor(uv) + n; // id for each cell
vec2 gv = fract(uv) - .5; // grid UV
// get pos for cell + 8 neighbors
vec2 p[9];
for(int y = -1; y <= 1; y++) {
for(int x = -1; x <= 1; x++) {
p[(y + 1) * 3 + x + 1] = getPos(id, vec2(x, y), t);
}
}
// draw lines
float m = 0.;
for(int i = 0; i < 9; i ++) {
m += line(gv, p[4], p[i]);
vec2 j = (p[i] - gv) * 20.;
float sparkle = 1. / dot(j, j);
m += sparkle * (sin(t + fract(p[i].x) * 10.) * .5 + .5);
}
m += line(gv, p[1], p[3]);
m += line(gv, p[1], p[5]);
m += line(gv, p[7], p[3]);
m += line(gv, p[7], p[5]);
return m;
}
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.y;
vec2 mouse = u_mouse / u_resolution;
mouse = 1. - mouse;
mouse -= .5;
float gradient = uv.y;
float t = u_time * .1;
float s = sin(t);
float c = cos(t);
mat2 rot = mat2(c, -s, s, c);
//uv *= rot;
//mouse *= rot;
float m = 0.;
for(float i = 0.; i < 1.; i += 1./4.){
float z = fract(i + t);
float size = mix(10., .5, z);
float fade = S(0., .6, z) * S(1., .8, z);
m += layer(uv * size + mouse * z, i, u_time) * fade;
}
vec3 base = sin(t * 5. * vec3(.345, .456, .657)) * .4 + .6;
vec3 col = m * base;
//col -= gradient * base;
col *= S(.8, .4, length(uv));
gl_FragColor = vec4(col, 1.);
}
`, { play: true })
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.