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