diff --git a/TimesNewPixel.ttf b/TimesNewPixel.ttf new file mode 100644 index 0000000..99fb38b Binary files /dev/null and b/TimesNewPixel.ttf differ diff --git a/index.html b/index.html index 58802a5..ee1f1df 100644 --- a/index.html +++ b/index.html @@ -21,10 +21,15 @@
-

Title

+ +
+

Test for internet websites

+
diff --git a/js/main.js b/js/main.js index 3b235db..b44bd65 100644 --- a/js/main.js +++ b/js/main.js @@ -6,7 +6,7 @@ var gl = canvas.getContext("webgl", { }); function resizeCanvas() { - const scl = (p) => Math.trunc(p / 4); + const scl = (p) => Math.trunc(p / 2); var width = scl(gl.canvas.clientWidth); var height = scl(gl.canvas.clientHeight); diff --git a/shader/bg.frag b/shader/bg.frag index 9a4595b..5da5c1e 100644 --- a/shader/bg.frag +++ b/shader/bg.frag @@ -61,9 +61,19 @@ void main() { float dist = distance(herescaled, center); float distf = smoothstep(0.0, shortside, dist); - float second = floor(u_time * 1.1); - float noise = snoise(vec2(herescaled.x * herescaled.y, second)); - float final = distf - noise * 0.8; + // at lower clock values, we make vignette gradient denser + // (at kinda slow rate for a breathing effect) + float slowtime = u_time / 2.0; + float timing = sin(slowtime) + 1.0; + float vig = distf + mix(-0.05, 0.0, timing); - gl_FragColor = mix(lighter, darker, final); + // randomize noise pattern every second ish + float fasttime = u_time * 1.1; + float second = floor(fasttime); + float noise = snoise(vec2(herescaled.x * herescaled.y, second)); + + // blend noise and gradient + float final = (1.0 - vig) - noise * 0.9; + + gl_FragColor = mix(darker, lighter, final); } diff --git a/style.css b/style.css index 6ca7a2d..3e13737 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,11 @@ --fg1: #ffffff; } +@font-face { + font-family: TimesNewPixel; + src: url("/TimesNewPixel.ttf"); +} + * { margin: 0px; padding: 0px; @@ -15,6 +20,13 @@ body { background: var(--bg); color: var(--fg1); + + font-family: TimesNewPixel; +} + +.shadow { + filter: drop-shadow(1px 1px 0 var(--bg)) drop-shadow(-1px 1px 0 var(--bg)) + drop-shadow(1px -1px 0 var(--bg)) drop-shadow(-1px -1px 0 var(--bg)); } #bg { @@ -42,4 +54,5 @@ footer { bottom: 0; left: 0; width: 100vw; + padding: 4px; } diff --git a/templogo.png b/templogo.png new file mode 100644 index 0000000..d82bed7 Binary files /dev/null and b/templogo.png differ