160 lines
4.4 KiB
HTML
160 lines
4.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>GLSL: In Which Alice Feels Sick</title>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
|
||
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
||
|
|
void main() {
|
||
|
|
gl_Position = vec4( position, 1.0 );
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
||
|
|
|
||
|
|
uniform vec2 u_resolution;
|
||
|
|
uniform vec2 u_mouse;
|
||
|
|
uniform float u_time;
|
||
|
|
uniform sampler2D u_noise;
|
||
|
|
|
||
|
|
float PI = 3.141592653589793;
|
||
|
|
|
||
|
|
// float r1 = 0.1 + ((u_mouse.y + 0.5) * .1);
|
||
|
|
// float r2 = 0.4 + (u_mouse.x * .2);
|
||
|
|
float r1 = 0.1;
|
||
|
|
float r2 = 0.4;
|
||
|
|
|
||
|
|
// These awesome complex Math functions curtesy of
|
||
|
|
// https://github.com/mkovacs/reim/blob/master/reim.glsl
|
||
|
|
vec2 cCis(float r);
|
||
|
|
vec2 cLog(vec2 c); // principal value
|
||
|
|
vec2 cInv(vec2 c);
|
||
|
|
float cArg(vec2 c);
|
||
|
|
float cAbs(vec2 c);
|
||
|
|
|
||
|
|
vec2 cMul(vec2 a, vec2 b);
|
||
|
|
vec2 cDiv(vec2 a, vec2 b);
|
||
|
|
|
||
|
|
vec2 cCis(float r)
|
||
|
|
{
|
||
|
|
return vec2( cos(r), sin(r) );
|
||
|
|
}
|
||
|
|
vec2 cExp(vec2 c)
|
||
|
|
{
|
||
|
|
return exp(c.x) * cCis(c.y);
|
||
|
|
}
|
||
|
|
vec2 cConj(vec2 c)
|
||
|
|
{
|
||
|
|
return vec2(c.x, -c.y);
|
||
|
|
}
|
||
|
|
vec2 cInv(vec2 c)
|
||
|
|
{
|
||
|
|
return cConj(c) / dot(c, c);
|
||
|
|
}
|
||
|
|
vec2 cLog(vec2 c)
|
||
|
|
{
|
||
|
|
return vec2( log( cAbs(c) ), cArg(c) );
|
||
|
|
}
|
||
|
|
float cArg(vec2 c)
|
||
|
|
{
|
||
|
|
return atan(c.y, c.x);
|
||
|
|
}
|
||
|
|
float cAbs(vec2 c)
|
||
|
|
{
|
||
|
|
return length(c);
|
||
|
|
}
|
||
|
|
vec2 cMul(vec2 a, vec2 b)
|
||
|
|
{
|
||
|
|
return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
|
||
|
|
}
|
||
|
|
vec2 cDiv(vec2 a, vec2 b)
|
||
|
|
{
|
||
|
|
return cMul(a, cInv(b));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
vec2 hash2(vec2 p)
|
||
|
|
{
|
||
|
|
vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
|
||
|
|
return o;
|
||
|
|
}
|
||
|
|
|
||
|
|
float rect(vec2 p, vec2 size) {
|
||
|
|
vec2 d = abs(p) - size;
|
||
|
|
return min(max(d.x, d.y), 0.0) + length(max(d,0.0));
|
||
|
|
}
|
||
|
|
|
||
|
|
float strokewidth = 0.02;
|
||
|
|
vec3 circles(vec2 uv, float r1, float r2) {
|
||
|
|
float d = length(uv);
|
||
|
|
vec3 colour = vec3(0.);
|
||
|
|
float aa = fwidth(d);
|
||
|
|
|
||
|
|
float distance_between = (r2 - r1)/2.;
|
||
|
|
|
||
|
|
colour = mix(colour, vec3(.8, .8, 0.), smoothstep(aa, 0., rect(uv + vec2(r1+distance_between, 0.), vec2(distance_between, strokewidth / 2.)) ));
|
||
|
|
colour = mix(colour, vec3(.8, .8, .8), smoothstep(aa, 0., rect(uv - vec2(r1+distance_between, 0.), vec2(distance_between, strokewidth / 2.)) ));
|
||
|
|
colour = mix(colour, vec3(.0, .8, .8), smoothstep(aa, 0., rect(uv + vec2(0., r1+distance_between), vec2(strokewidth / 2., distance_between)) ));
|
||
|
|
colour = mix(colour, vec3(.8, .0, .8), smoothstep(aa, 0., rect(uv - vec2(0., r1+distance_between), vec2(strokewidth / 2., distance_between)) ));
|
||
|
|
|
||
|
|
colour = mix(colour, vec3(1., 0., 0.), smoothstep(r1 + aa, r1, d) * smoothstep(r1 - strokewidth, r1 - strokewidth + aa, d));
|
||
|
|
colour = mix(colour, vec3(0., 1., 0.), smoothstep(r2 + aa, r2, d) * smoothstep(r2 - strokewidth, r2 - strokewidth + aa, d));
|
||
|
|
|
||
|
|
return colour;
|
||
|
|
|
||
|
|
}
|
||
|
|
vec3 render(vec2 uv) {
|
||
|
|
// float vignette = pow(uv.x*uv.y * 15.0, 0.25);
|
||
|
|
// float vignette = pow((1. - uv.x - 0.5) * (1. - uv.y - 0.5) * 5., 0.55) * .5;
|
||
|
|
float d = length(uv);
|
||
|
|
|
||
|
|
float vignette = smoothstep(.5, 1., 1. - d) * .8;
|
||
|
|
vignette *= smoothstep(0., 0.2, d);
|
||
|
|
vignette *= 1.5;
|
||
|
|
vignette = .8 - vignette;
|
||
|
|
uv += u_time * .2;
|
||
|
|
vec2 i_uv = floor(uv * 10.);
|
||
|
|
vec3 colour = vec3(mod(i_uv.x + i_uv.y, 2.));
|
||
|
|
|
||
|
|
colour -= vignette;
|
||
|
|
|
||
|
|
|
||
|
|
float aa = .05;
|
||
|
|
// colour = mix(colour, vec3(0.), smoothstep(r1 + aa * .5, r1, d) * smoothstep(r1 - strokewidth, r1 - strokewidth + aa * .5, d) * .5);
|
||
|
|
colour = mix(colour, vec3(0.), smoothstep(r2 + aa, r2, d) * smoothstep(r2 - strokewidth * 2., r2 - strokewidth * 2. + aa, d));
|
||
|
|
|
||
|
|
return colour;
|
||
|
|
}
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
|
||
|
|
|
||
|
|
// 5. Take the tiled strips back to ordinary space.
|
||
|
|
uv = cLog(uv);
|
||
|
|
// 4. Scale and rotate the strips
|
||
|
|
float scale = log(r2/r1);
|
||
|
|
float angle = atan(scale/(2.0*PI));
|
||
|
|
uv = cDiv(uv, cExp(vec2(0,angle))*cos(angle));
|
||
|
|
// 3. this simulates zooming in the tile
|
||
|
|
uv += u_time;
|
||
|
|
// 2. Tile the strips
|
||
|
|
uv.x = mod(uv.x,log(r2/r1));
|
||
|
|
// 1. Take the annulus to a strip
|
||
|
|
uv = cExp(uv)*r1;
|
||
|
|
|
||
|
|
vec3 colour = render(uv);
|
||
|
|
|
||
|
|
gl_FragColor = vec4(colour,1.0);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="container"></div>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|