commit 24d7e4675bb2323b5048601bc97441f613cc8c65 Author: min Date: Wed Sep 10 03:12:13 2025 -0400 recovery kinda diff --git a/index.html b/index.html new file mode 100644 index 0000000..58802a5 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + asdfasdfasdfsd + + + + + +

Title

+ + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..36a3f61 --- /dev/null +++ b/js/main.js @@ -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); diff --git a/mask.png b/mask.png new file mode 100644 index 0000000..f398482 Binary files /dev/null and b/mask.png differ diff --git a/notes.txt b/notes.txt new file mode 100644 index 0000000..1ca4287 --- /dev/null +++ b/notes.txt @@ -0,0 +1,3 @@ +------------- ** fonts ** ------------- +https://www.pentacom.jp/pentacom/bitfontmaker2/gallery/ +https://humantooth.neocities.org/freefonts diff --git a/shader/bg.frag b/shader/bg.frag new file mode 100644 index 0000000..3cf527b --- /dev/null +++ b/shader/bg.frag @@ -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); +} diff --git a/shader/bg.vert b/shader/bg.vert new file mode 100644 index 0000000..411cead --- /dev/null +++ b/shader/bg.vert @@ -0,0 +1,7 @@ +precision lowp float; + +attribute vec4 a_position; + +void main() { + gl_Position = a_position; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..6ca7a2d --- /dev/null +++ b/style.css @@ -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; +}