54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Inktober 01 - Grid</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cormorant:300i,600&display=swap'>
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<a href="https://github.com/halvves/shader-doodle" target="_blank">
|
|
<div class="desc">
|
|
<h1>01</h1>
|
|
<h2>Grid</h2>
|
|
</div>
|
|
<shader-doodle>
|
|
<script type="x-shader/x-fragment" />
|
|
const vec3 blue = vec3(.431372549, .521568627, .631372549);
|
|
|
|
void main() {
|
|
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
|
|
|
|
// grid
|
|
const float grid_resolution = 10.;
|
|
vec2 fpos = fract(uv * grid_resolution);
|
|
vec2 ipos = floor(uv * grid_resolution);
|
|
|
|
// distort grid items
|
|
fpos.x = fpos.x + sin(fpos.y * 5. + u_time) * .25 * fpos.x;
|
|
|
|
// rings-ish
|
|
float v = floor(fract(dot(ipos * .3 + .5, fpos * .3 - .5) * 2.) + .25);
|
|
|
|
// borders
|
|
const float b_size = .06;
|
|
const float b_smooth = .01;
|
|
vec2 fpos_centered = fpos - vec2(.5);
|
|
const float b_distance = .5 - b_size;
|
|
v = max(v, max(
|
|
smoothstep(-b_smooth, b_smooth, abs(fpos_centered.x) - b_distance),
|
|
smoothstep(-b_smooth, b_smooth, abs(fpos_centered.y) - b_distance))
|
|
);
|
|
|
|
gl_FragColor = vec4(blue, 1. - v);
|
|
}
|
|
</script>
|
|
</shader-doodle>
|
|
</a>
|
|
<!-- partial -->
|
|
<script src='https://unpkg.com/shader-doodle@1.0.0-alpha.0/dist/shader-doodle.umd.js'></script>
|
|
|
|
</body>
|
|
</html> |