118 lines
2.9 KiB
HTML
118 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Infinite primordial creatures</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<script type="text/fragment" id="fragShader">
|
|
precision highp float;
|
|
|
|
uniform vec2 u_resolution;
|
|
uniform float u_time;
|
|
uniform vec2 u_mouse;
|
|
uniform vec2 u_position;
|
|
uniform float u_zoom;
|
|
uniform sampler2D s_noise;
|
|
|
|
uniform sampler2D b_noise;
|
|
|
|
varying vec2 v_uv;
|
|
|
|
|
|
vec2 getScreenSpace() {
|
|
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
|
|
|
|
return uv;
|
|
}
|
|
float rand(vec2 n) {
|
|
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
|
|
}
|
|
// Procedural colour palettes curtesy Inigo Quilez
|
|
// https://iquilezles.org/www/articles/palettes/palettes.htm
|
|
vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
|
|
return a + b*cos( 6.28318*(c*t+d) );
|
|
}
|
|
vec3 getColour(float fid, vec3 c) {
|
|
|
|
return palette(fid / 9., vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),c.gbr,c);
|
|
}
|
|
|
|
// Logarithmic smin curtesy Inigo Quilez
|
|
// https://iquilezles.org/www/articles/smin/smin.htm
|
|
vec2 smin( in float a, in float b, in float k ) {
|
|
|
|
float f1 = exp2( -k*a );
|
|
float f2 = exp2( -k*b );
|
|
return vec2(-log2(f1+f2)/k,f2);
|
|
}
|
|
void render(in vec2 uv, out vec4 colour) {
|
|
|
|
vec3 c = vec3(0.05,0.09,0.15) * (1.+sin(uv.y));
|
|
uv *= 20.;
|
|
|
|
vec2 id = floor(uv * .5);
|
|
vec2 cell = mod(uv, 2.) - 1.;
|
|
vec2 id9 = floor((id / 3.));
|
|
float r9 = rand(id9);
|
|
float r92 = rand(id9 - 100.);
|
|
float r93 = rand(id9 + 100.);
|
|
|
|
vec4 cellcolour = vec4(1);
|
|
float dist = 10.;
|
|
|
|
for(float x = -2.; x <= 2.; x+=2.) {
|
|
for(float y = -2.; y <= 2.; y+=2.) {
|
|
vec2 offset = vec2(x,y);
|
|
vec2 cid = floor((uv - offset) * .5);
|
|
|
|
vec2 _id = mod(cid, 3.);
|
|
float fid = _id.x + _id.y * 3.;
|
|
|
|
float rnd = rand(cid+100.);
|
|
|
|
float size = .5 + rnd * .5;
|
|
float r = .5 + .2 * rand(cid-100.);
|
|
float t = (100. * -r + u_time * (5. + 5. * rand(cid+300.)) * (r9 + .5));
|
|
|
|
vec2 coffset = (_id - 1.) * clamp(rand(cid), .8, 1.) * (.8+r92) + vec2(cos(t), sin(t)) * r;
|
|
|
|
|
|
float field = length(cell + offset + coffset)-size;
|
|
|
|
vec2 db = smin( dist, field, 15.0 );
|
|
|
|
dist = db.x;
|
|
|
|
cellcolour += vec4(getColour(fid, vec3(r9, r92,r93))*db.y, db.y);
|
|
|
|
|
|
}
|
|
}
|
|
|
|
cellcolour.xyz /= cellcolour.w;
|
|
|
|
float shape = smoothstep(0.02, -.02, dist);
|
|
|
|
c = mix(c, cellcolour.rgb, shape);
|
|
|
|
colour = vec4(c, 1);
|
|
}
|
|
void main() {
|
|
vec2 uv = getScreenSpace();
|
|
|
|
uv *= u_zoom;
|
|
uv += u_position - 10.;
|
|
|
|
render(uv, gl_FragColor);
|
|
}
|
|
</script>
|
|
<!-- partial -->
|
|
<script type="module" src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|