I’m planning to create a custom web component which lets you easily embed your fragment shaders into any website for a long time. You can find some (mostly abandoned ones) on github, so this is my take on the topic (to abandon it eventually 😉).
It tries to be compatible with https://twigl.app/, supporting geekest mode and MRT as well (but only 300 es).
See details on github.
Demo⌗
float noise21(vec2 p) {
p += vec2(23.34, 34.232);
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 get_point_by_id(vec2 id, float t) {
return vec2(
sin(6821.126 + t * noise21(id * (.456, .681))),
cos(34.123 + t * noise21(id * 543.21))
);
}
float df_line(vec2 a, vec2 b, vec2 p) {
vec2 pa = p - a, ba = b - a;
float h = clamp(dot(pa,ba) / dot(ba,ba), 0., 1.);
return length(pa - ba * h);
}
float line(vec2 a, vec2 b, vec2 uv) {
float r1 = .03;
float r2 = .005;
float d = df_line(a, b, uv);
float d2 = length(a-b);
float fade = smoothstep(1.5, .5, d2);
fade += smoothstep(.05, .02, abs(d2-.5));
return smoothstep(r1, r2, d) * fade;
}
void main()
{
vec2 uv = ((2. * gl_FragCoord.xy) - resolution.xy) / min(resolution.x, resolution.y);
vec3 col = 0.2 + 0.2*cos(time+uv.xyx+vec3(0,2,4));
vec2 st = uv * 3.;
vec2 id = floor(st);
vec2 i_st = fract(st);
float m_dist = 1.;
vec2 curr_point = .5 + .5 * get_point_by_id(id, time * 2.);
float m = 0.;
vec2 points[9];
int i = 0;
for (int y = -1; y <= 1; y++) {
for (int x = -1; x <= 1; x++) {
vec2 neighbor = vec2(float(x), float(y));
vec2 point = neighbor + .5 + .5 * get_point_by_id(id+neighbor, time * 2.);
points[i++] = point;
vec2 diff = point - i_st;
float dist = length(diff);
if (dist < m_dist) {
m_dist = dist;
}
// line between points
m += line(curr_point, point, i_st);
}
}
// extra lines
m += line(points[1], points[3], i_st);
m += line(points[1], points[5], i_st);
m += line(points[7], points[5], i_st);
m += line(points[7], points[3], i_st);
// the point itself
m += 1. - step(.05, m_dist);
col += .8 * m;
// Output to screen
outColor = vec4(col,1.0);
}