recovery kinda
This commit is contained in:
commit
24d7e4675b
SSH Key Fingerprint:
SHA256:mf+pUTmK92Y57BuCjlkBdd82LqztTfDCQIUp0fCKABc
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
|
||||
<meta name="darkreader-lock" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
|
||||
<script src="/js/main.js" type="module" defer></script>
|
||||
|
||||
<title>asdfasdfasdfsd</title>
|
||||
|
||||
<script>
|
||||
void 0;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="bg"></canvas>
|
||||
<main>
|
||||
<h1>Title</h1>
|
||||
</main>
|
||||
<footer>
|
||||
<p>page footer</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/* Canvas set-up */
|
||||
var canvas = document.getElementsByTagName("canvas")[0];
|
||||
var gl = canvas.getContext("webgl", {
|
||||
antialias: false,
|
||||
preserveDrawingBuffer: false,
|
||||
});
|
||||
|
||||
function resizeCanvas() {
|
||||
const scl = (p) => Math.trunc(p / 8);
|
||||
|
||||
var width = scl(gl.canvas.clientWidth);
|
||||
var height = scl(gl.canvas.clientHeight);
|
||||
|
||||
if (gl.canvas.width != width || gl.canvas.height != height) {
|
||||
gl.canvas.width = width;
|
||||
gl.canvas.height = height;
|
||||
|
||||
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
||||
}
|
||||
|
||||
return [width, height];
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
|
||||
/* WebGL set-up */
|
||||
gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
||||
|
||||
/* Fetch shader programs */
|
||||
const fetchText = async (url) => (await fetch(url)).text();
|
||||
|
||||
var vsSrc = await fetchText("/shader/bg.vert");
|
||||
var fsSrc = await fetchText("/shader/bg.frag");
|
||||
|
||||
/* Compile vertex shader */
|
||||
var vs = gl.createShader(gl.VERTEX_SHADER);
|
||||
gl.shaderSource(vs, vsSrc);
|
||||
gl.compileShader(vs);
|
||||
|
||||
/* Compile fragment shader */
|
||||
var fs = gl.createShader(gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(fs, fsSrc);
|
||||
gl.compileShader(fs);
|
||||
|
||||
/* Create and use program */
|
||||
var program = gl.createProgram();
|
||||
gl.attachShader(program, vs);
|
||||
gl.attachShader(program, fs);
|
||||
gl.linkProgram(program);
|
||||
gl.useProgram(program);
|
||||
|
||||
/* Get attributes and uniforms */
|
||||
var a_position = gl.getAttribLocation(program, "a_position");
|
||||
var u_time = gl.getUniformLocation(program, "u_time");
|
||||
var u_resolution = gl.getUniformLocation(program, "u_resolution");
|
||||
|
||||
/* Vertices */
|
||||
const verts = new Float32Array([
|
||||
-1.0, +1.0, -1.0, -1.0, +1.0, +1.0, +1.0, -1.0,
|
||||
]);
|
||||
|
||||
/* Create vertex buffer */
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
||||
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
|
||||
|
||||
/* Bind vertices */
|
||||
gl.vertexAttribPointer(
|
||||
a_position,
|
||||
2,
|
||||
gl.FLOAT,
|
||||
false,
|
||||
verts.BYTES_PER_ELEMENT * 2,
|
||||
0,
|
||||
);
|
||||
gl.enableVertexAttribArray(a_position);
|
||||
|
||||
/* Draw */
|
||||
var startTime = performance.now();
|
||||
function draw() {
|
||||
requestAnimationFrame(draw);
|
||||
|
||||
/* Get time */
|
||||
var nowTime = performance.now() - startTime;
|
||||
if (nowTime >= 8.0) {
|
||||
startTime = 0;
|
||||
}
|
||||
nowTime /= 1000;
|
||||
|
||||
/* Resize canvas */
|
||||
resizeCanvas();
|
||||
|
||||
/* Set uniforms */
|
||||
gl.uniform1f(u_time, nowTime);
|
||||
gl.uniform2fv(u_resolution, [gl.drawingBufferWidth, gl.drawingBufferHeight]);
|
||||
|
||||
// Draw triangles
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||
}
|
||||
|
||||
/* Start !! */
|
||||
requestAnimationFrame(draw);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
------------- ** fonts ** -------------
|
||||
https://www.pentacom.jp/pentacom/bitfontmaker2/gallery/
|
||||
https://humantooth.neocities.org/freefonts
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
precision mediump float;
|
||||
|
||||
uniform float u_time;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
const vec2 zero = vec2(0.0);
|
||||
|
||||
const vec4 darker = vec4(0.0235, 0.0274, 0.0549, 1.0);
|
||||
const vec4 lighter = vec4(0.1058, 0.1137, 0.1450, 1.0);
|
||||
|
||||
vec3 mod289(vec3 x) {
|
||||
return x - floor(x * (1.0 / 289.0)) * 289.0;
|
||||
}
|
||||
vec2 mod289(vec2 x) {
|
||||
return x - floor(x * (1.0 / 289.0)) * 289.0;
|
||||
}
|
||||
vec3 permute(vec3 x) {
|
||||
return mod289(((x * 34.0) + 10.0) * x);
|
||||
}
|
||||
|
||||
float snoise(vec2 v) {
|
||||
const vec4 C = vec4(0.211324865405187,
|
||||
0.366025403784439,
|
||||
-0.577350269189626,
|
||||
0.024390243902439);
|
||||
vec2 i = floor(v + dot(v, C.yy));
|
||||
vec2 x0 = v - i + dot(i, C.xx);
|
||||
vec2 i1;
|
||||
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
|
||||
vec4 x12 = x0.xyxy + C.xxzz;
|
||||
x12.xy -= i1;
|
||||
i = mod289(i);
|
||||
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
|
||||
+ i.x + vec3(0.0, i1.x, 1.0));
|
||||
vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
|
||||
m = m * m;
|
||||
m = m * m;
|
||||
vec3 x = 2.0 * fract(p * C.www) - 1.0;
|
||||
vec3 h = abs(x) - 0.5;
|
||||
vec3 ox = floor(x + 0.5);
|
||||
vec3 a0 = x - ox;
|
||||
m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
|
||||
vec3 g;
|
||||
g.x = a0.x * x0.x + h.x * x0.y;
|
||||
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
|
||||
return 130.0 * dot(m, g);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 center = u_resolution / 2.0;
|
||||
|
||||
// calculate coord scale factor
|
||||
float shortside = min(u_resolution.x, u_resolution.y);
|
||||
vec2 scale2square = u_resolution / vec2(shortside);
|
||||
|
||||
// subtract center to avoid misalignment
|
||||
vec2 hereuncenter = gl_FragCoord.xy - center;
|
||||
vec2 herescaled = (hereuncenter / scale2square) + center;
|
||||
|
||||
// get distance from center
|
||||
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) / 2.0;
|
||||
|
||||
gl_FragColor = mix(lighter, darker, noise);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
precision lowp float;
|
||||
|
||||
attribute vec4 a_position;
|
||||
|
||||
void main() {
|
||||
gl_Position = a_position;
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
:root {
|
||||
--bg: #080810;
|
||||
--fg1: #ffffff;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
|
||||
background: var(--bg);
|
||||
color: var(--fg1);
|
||||
}
|
||||
|
||||
#bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
canvas {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
main {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
}
|
||||
Loading…
Reference in New Issue