176 lines
4.9 KiB
HTML
176 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>
|
|
The Ayerharts
|
|
</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display|Montserrat" rel="stylesheet">
|
|
|
|
<link href="/style/waves.css" rel="stylesheet">
|
|
<script src="/scripts/waves.js" type="text/javascript"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<span class="full-name">The Ayerharts</span>
|
|
<canvas />
|
|
<script type="x-shader/x-fragment" id="waves">
|
|
#ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
precision highp float;
|
|
#else
|
|
precision mediump float;
|
|
#endif
|
|
|
|
uniform float iTime;
|
|
uniform vec2 iResolution;
|
|
|
|
#define RIBBONCOLOR vec4(1.0, 1.0, 1.0, 0.5)
|
|
#define TRANSP vec4(0.0, 0.0, 0.0, 0.0)
|
|
#define RIBWIDTH 0.03
|
|
|
|
#define AA 1.0/iResolution.y
|
|
|
|
#define time (100.0 + iTime / 15.0)
|
|
#define COLORTIME iTime/ 22.0 + 0.3
|
|
|
|
float
|
|
sin01(float x)
|
|
{
|
|
float x2 = fract (x);
|
|
return 0.5 + 0.5 * sin (x2 * 6.28318530718);
|
|
}
|
|
|
|
vec4
|
|
color1()
|
|
{
|
|
float x = COLORTIME;
|
|
float darken = 0.5;
|
|
return vec4 (darken * sin01 (x), darken * sin01 (x + 1.0 / 3.0), darken * sin01 (x + 2.0 / 3.0), 1.0);
|
|
}
|
|
|
|
// inner color
|
|
vec4
|
|
color2()
|
|
{
|
|
float x = COLORTIME;
|
|
float offset = 0.05;
|
|
return vec4 (sin01 (x + offset), sin01 (x + 1.0 / 2.0 + offset), sin01 (x + 2.0 / 3.0 + offset), 1.0);
|
|
}
|
|
|
|
vec4
|
|
background(vec2 uv)
|
|
{
|
|
float dist = 1.4142 * length (uv - vec2 (0.5, 0.5));
|
|
return mix (color1(), color2 (),1.0 - dist);
|
|
}
|
|
|
|
// source-over alpha composite
|
|
vec4
|
|
addColors(vec4 c1, vec4 c2)
|
|
{
|
|
vec4 color = mix (c2, c1, c1.a);
|
|
color.a = 1.0;
|
|
return color;
|
|
}
|
|
|
|
float
|
|
rand(float n)
|
|
{
|
|
return fract (sin (n) * 43758.5453123);
|
|
}
|
|
|
|
float
|
|
wave(float x)
|
|
{
|
|
return sin (x) * cos (x * 3.0) * sin (0.7 * x);
|
|
}
|
|
|
|
vec4
|
|
ribbon(float seed, vec2 uv)
|
|
{
|
|
float phase = rand (seed + 0.2) * 10.0;
|
|
float speedMod = 1.0 + rand (seed + 0.123);
|
|
float width = RIBWIDTH * (seed -1.0 + 0.1);
|
|
|
|
float warpY = uv.y + wave (uv.x * 1.0 + time * speedMod + phase) * 0.6;
|
|
|
|
float alpha = seed * 0.22 + 0.25;
|
|
float inRibbon = warpY + RIBWIDTH * 3.0 + width;
|
|
|
|
inRibbon = smoothstep (0.5 - AA, 0.5 + AA, 1.0 - inRibbon);
|
|
return vec4 (RIBBONCOLOR.rgb, mix (alpha, 0.0, 1.0 - inRibbon));
|
|
}
|
|
|
|
vec4
|
|
bottomRibbon(float seed, vec2 uv)
|
|
{
|
|
float phase = rand (seed + 0.2) * 2.0;
|
|
float speedMod = 1.0 + rand (seed + 0.123);
|
|
float width = RIBWIDTH * (seed - 1.0 + 0.1);
|
|
|
|
float warpY = uv.y + wave (uv.x * 1.0 + time * speedMod + phase) * 0.25;
|
|
|
|
float alpha = seed * 0.22 + 0.25;
|
|
float inRibbon = warpY + RIBWIDTH * 3.0 + width;
|
|
|
|
inRibbon = smoothstep (0.5 - AA, 0.5 + AA, 1.0 - inRibbon);
|
|
return vec4 (RIBBONCOLOR.rgb, mix (alpha, 0.0, 1.0 - inRibbon));
|
|
}
|
|
|
|
vec4
|
|
ribbon(vec2 uv)
|
|
{
|
|
return ribbon (1.0, uv);
|
|
}
|
|
|
|
void
|
|
main()
|
|
{
|
|
vec2 uv = gl_FragCoord.xy / iResolution.xy;
|
|
vec4 uvc = gl_FragCoord / min (iResolution.x, iResolution.y);
|
|
vec4 bgColor = background (uv);
|
|
|
|
gl_FragColor = bgColor;
|
|
|
|
gl_FragColor = addColors (ribbon (0.05, uv), gl_FragColor);
|
|
gl_FragColor = addColors (ribbon (0.06, uv), gl_FragColor);
|
|
gl_FragColor = addColors (ribbon (0.007, uv), gl_FragColor);
|
|
gl_FragColor = addColors (ribbon (0.1, uv), gl_FragColor);
|
|
gl_FragColor = addColors (bottomRibbon (5.0, uv), gl_FragColor);
|
|
}
|
|
</script>
|
|
</header>
|
|
<section id="content">
|
|
<div class="l-s">
|
|
<div class="name">
|
|
<span>LK+S</span>
|
|
</div>
|
|
<ul class="sites">
|
|
<li><a href="https://wedding.ayerhart.party">wedding.ayerhart.party</a></li>
|
|
<li><a href="https://hockeymoon.ayerhart.party">hockeymoon.ayerhart.party</a></li>
|
|
<li><a href="https://music.ayerh.art">music.ayerh.art</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="steve">
|
|
<div class="name">
|
|
<span>Steve</span>
|
|
</div>
|
|
<ul class="sites">
|
|
<li><a href="https://steve.ayerh.art">steve.ayerh.art</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="lk">
|
|
<div class="name">
|
|
<span>Lee Katherine</span>
|
|
</div>
|
|
<ul class="sites">
|
|
<li><a href="https://lkayerhart.ist">lkayerhart.ist</a></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|