From 24d7e4675bb2323b5048601bc97441f613cc8c65 Mon Sep 17 00:00:00 2001 From: min Date: Wed, 10 Sep 2025 03:12:13 -0400 Subject: [PATCH] recovery kinda --- index.html | 30 +++++++++++++++ js/main.js | 102 +++++++++++++++++++++++++++++++++++++++++++++++++ mask.png | Bin 0 -> 1801 bytes notes.txt | 3 ++ shader/bg.frag | 69 +++++++++++++++++++++++++++++++++ shader/bg.vert | 7 ++++ style.css | 45 ++++++++++++++++++++++ 7 files changed, 256 insertions(+) create mode 100644 index.html create mode 100644 js/main.js create mode 100644 mask.png create mode 100644 notes.txt create mode 100644 shader/bg.frag create mode 100644 shader/bg.vert create mode 100644 style.css 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 0000000000000000000000000000000000000000..f3984823e90367924a00b932504449bf5f47f0ed GIT binary patch literal 1801 zcmZ8gX*iqd8vcSd zZ<(UmDoBvqS231A`JWdSL5I!H!qx%+s#184yrBTV;%aZ>ggz^RK*Ytx&CJXsB_%mH zIG|7{FE4LaR@Ua`W=>AdxpU`WFj!(@VrXcntgP(l=;+DGNpEkjfPerS8{7T+_YV&b z=jP_LwY8Zt z9K5`|j*gCQ+_*6`G$bP91a&16$OXGJ32a=o0}CB6sD%8Y;0_bii$WnIq`V>*4EbI z;-bF3eq3DK+S(clg{rHolarIn&CT83-ZnHe^z`&BFE3wTUpF;1O-V^fN=gzD5#izC z@$vET_xI=HA+T`n#z2?+@d z2IJMMSM&4pBoZkU1kU%otl{ydFFqtofm&dxhKJ3&D~ zZ{EBa85t226pW3Ht*or9uCAV*p8ojpWHd1`QCnN<;o-r}&8?@W*VNP$ z78d62?(XO3*V@`DFE4*6y#uZp!1a?A@iqYPwVnae8S=sx42p-L31N;QeNC<(Cl z4hRm@!lRvF2rXSLq*TDt3$Ui1M8J}VUm$;betdr5?IEp~X8}0$0i(u)VI# zx#s3OiNyBQKe}3WM;?!?|7tCq6^nCeBycXtzZ$)nPmI<4Xxo%U7E`x^!!(+RMeZkM zxy0_<3>50%atnQXgGnM!toKsL6Exs~#+IjC&(FA@A0x;Vf;>+Ltu3R5F4)tI=$CX+ zWkQ_@REbbAc*8GAbJc0HJd;Tc)N6z*naq7gXd$s+qH0iMGQKSF(s6aIGdu8Kk>~0- z4p+ovkp7d>Yx9J9$`3c!Xbqy~{cPd1o!w*;i$0PC8xBZ>CHkk+fxXtED;0L)(1t?7t%TwXEbLS zoug5!PmMJMD-om2eNX33!|+3);d=!t;RQ?5BiJe}SS1eY*PiF@-OM;CURYck*YXM7 z?aE->*%P1kK#wJuy9Jkpn1yUI_%HZVG1l88Ak@|H!Hv z*0jc(He?}xFuWlEf{-Cw{o+03zA~oIlB+a+LPSQ-o8dr5iC_V1NQQ0PH`&Rbz zZbjx2;y?2&+w8D`rCU$`7}{yiy4VSc#89>7&;(N55S9 zcMV~t%{*;a_4hpa3~#=A>s>!IkwQ}MwcJp9dyE@Kr4-X@cOGdRH{+RsKW_I?hV#Zu zlDm4Dr5)KD3w7abcGBJNx8QcSx6uy=bjqG!D%z0efoNAezhx9t-G>dIhAyFXjnA< Ka=E3~uYUpIA{*WS literal 0 HcmV?d00001 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; +}