138 lines
3.4 KiB
HTML
138 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" >
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>CodePen - Colorful Distance Field Shader - #anydayshaders 13</title>
|
|||
|
|
<link rel="stylesheet" href="./style.css">
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- partial:index.partial.html -->
|
|||
|
|
<digital-art dpr="auto" aria-hidden="true">
|
|||
|
|
<script type="buffer" name="position" data-size="2">
|
|||
|
|
[-1, -1, -1, 1, 1, -1, 1, -1, 1, 1, -1, 1]
|
|||
|
|
</script>
|
|||
|
|
<script type="vert">
|
|||
|
|
precision highp float;
|
|||
|
|
uniform float time;
|
|||
|
|
uniform vec2 resolution;
|
|||
|
|
varying vec4 vPos;
|
|||
|
|
attribute vec4 position;
|
|||
|
|
|
|||
|
|
void main() {
|
|||
|
|
vPos = position;
|
|||
|
|
gl_Position = position;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<script type="frag">
|
|||
|
|
precision highp float;
|
|||
|
|
uniform float time;
|
|||
|
|
uniform vec2 resolution;
|
|||
|
|
varying vec4 vPos;
|
|||
|
|
|
|||
|
|
const int NUM_CIRCLES = 25;
|
|||
|
|
|
|||
|
|
vec2 rotate(vec2 p, float a) {
|
|||
|
|
return vec2(p.x * cos(a) - p.y * sin(a),
|
|||
|
|
p.x * sin(a) + p.y * cos(a));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vec3 background(vec2 p) {
|
|||
|
|
return vec3(.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2D Random
|
|||
|
|
float random (in vec2 st) {
|
|||
|
|
return fract(sin(dot(st.xy,
|
|||
|
|
vec2(12.9898,78.233)))
|
|||
|
|
* 43758.5453123);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vec2 sdCircle(vec2 p, float r, int i) {
|
|||
|
|
return vec2(length(p) - r, float(i));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// cosine based palette, 4 vec3 params
|
|||
|
|
vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d )
|
|||
|
|
{
|
|||
|
|
return a + b*cos( 6.28318*(c*t+d) );
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vec3 twilight(float t) {
|
|||
|
|
vec3 a = vec3(0.5, 0.5, 0.5);
|
|||
|
|
vec3 b = vec3(0.5, 0.5, 0.5);
|
|||
|
|
vec3 c = vec3(2.0, 1.0, 0.0);
|
|||
|
|
vec3 d = vec3(0.50, 0.20, 0.25);
|
|||
|
|
return palette(t, a, b, c, d);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vec2 minV(vec2 a, vec2 b) {
|
|||
|
|
return mix(a, b, step(b.x,a.x));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vec2 maxV(vec2 a, vec2 b) {
|
|||
|
|
return mix(a, b, step(a.x,b.x));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vec2 diffV(vec2 a, vec2 b) {
|
|||
|
|
return maxV(minV(a, b), -maxV(a, b));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
float subtract(float a, float b)
|
|||
|
|
{
|
|||
|
|
return max(-a, b);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
float symmetricDiff(float a, float b)
|
|||
|
|
{
|
|||
|
|
// (A ∪ B) \ (A ∩ B)
|
|||
|
|
return max(min(a, b), -max(a, b));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vec2 scene(vec2 p) {
|
|||
|
|
vec2 d = vec2(999., -1.);
|
|||
|
|
float zoom = 20.;
|
|||
|
|
float t = time * 1e-3 * .25;
|
|||
|
|
vec2 p0 = p * zoom;
|
|||
|
|
for (int i = 0; i < NUM_CIRCLES; i++) {
|
|||
|
|
vec2 c1 = vec2(
|
|||
|
|
sin(float(i) + t * .2) +
|
|||
|
|
sin(1. + float(i) + t * .3),
|
|||
|
|
cos(float(i) + t * .1) +
|
|||
|
|
cos(1. + float(i) + t * .2) +
|
|||
|
|
cos(1.5 + float(i) + t * .7)
|
|||
|
|
) * 5.;
|
|||
|
|
vec2 c = vec2(random(vec2(float(i * 2) * .2, .1)), random(vec2(float(i * 2 + 1) * .2, .2))) - .5;
|
|||
|
|
c *= zoom;
|
|||
|
|
float r = random(vec2(float(i * 2) * .2, .1));
|
|||
|
|
d = diffV(d,
|
|||
|
|
sdCircle(p0 - c - c1, 5.5 + 1. * r, i)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
void main() {
|
|||
|
|
vec2 p0 = gl_FragCoord.xy / resolution - .5;
|
|||
|
|
float aspect = resolution.x / resolution.y;
|
|||
|
|
p0.x *= aspect;
|
|||
|
|
float t = time * 1e-3;
|
|||
|
|
vec2 p = rotate(p0, t * .05);
|
|||
|
|
vec2 s = scene(p);
|
|||
|
|
float d = s.x;
|
|||
|
|
float x = smoothstep(0., 0.1, d);
|
|||
|
|
vec3 bg = background(p);
|
|||
|
|
vec3 fg = twilight(mod(s.y * .1, 1.)) + .2 * sin(-d * .5);
|
|||
|
|
vec3 color = mix(fg, bg, x);
|
|||
|
|
gl_FragColor = vec4(color, 1.);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</digital-art>
|
|||
|
|
<!-- partial -->
|
|||
|
|
<script src="./script.js"></script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|