From edb1aadf046eaf3645d8aeb083dccf3aa994c7c7 Mon Sep 17 00:00:00 2001
From: Dongho Kim <dongho@ekstrah.com>
Date: Tue, 9 Dec 2025 21:46:46 +0100
Subject: [PATCH] update

---
 .../__pycache__/__init__.cpython-311.pyc      | Bin 0 -> 235 bytes
 .../__pycache__/security.cpython-311.pyc      | Bin 0 -> 1691 bytes
 .../__pycache__/security.cpython-312.pyc      | Bin 1143 -> 1466 bytes
 app/security/security.py                      |   6 +
 app/static/js/noise_letter.js                 | 180 ++++++++++++++++++
 app/static/shaders/fragment.glsl              |  58 ++++++
 app/static/shaders/vertex.glsl                |   7 +
 app/templates/noise_letter.html               |  64 +++++++
 8 files changed, 315 insertions(+)
 create mode 100644 app/security/__pycache__/__init__.cpython-311.pyc
 create mode 100644 app/security/__pycache__/security.cpython-311.pyc
 create mode 100644 app/static/js/noise_letter.js
 create mode 100644 app/static/shaders/fragment.glsl
 create mode 100644 app/static/shaders/vertex.glsl
 create mode 100644 app/templates/noise_letter.html

diff --git a/app/security/__pycache__/__init__.cpython-311.pyc b/app/security/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..1d332e23071c7e1bb9d19b968ce09749d8bddacd
GIT binary patch
literal 235
zcmZ3^%ge<81UCJ;nQB1#F^B^LOi;#WAs}NqLkdF*V-7<uV-zDJLkd$cgC_G!MxcZy
z<1PN;)a25l%#zCZqWsd5)FMAkrdu2^u_9)mqLmDvL5BTu&<`z6Eh^Se%`Pq}O3cuA
zNiEJU$uH1P&n(f0Y0xcCP0~*+D1Zy-$H!;pWtPOp>lIY~;;_lhPbtkwwJYKP8VGVg
Xu`H1Iz|6?Vc!NRp0yb2{22=q68reSc

literal 0
HcmV?d00001

diff --git a/app/security/__pycache__/security.cpython-311.pyc b/app/security/__pycache__/security.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..c5c0e6cfb8db5d55ecefede5116a76ad9e4395ac
GIT binary patch
literal 1691
zcmcIjy>Amq6rY)0J9g~g;0xju(2-LvkzA1F(t!997eN6?xl`_FEKaM9cf205U(AdN
zwkRS&!F6=Bsd7X~kw1Zw(ngkuwn93cbk`Y$ii$UDubl{|pkQ|A?b~_p_ujnU%=>#{
zVjRJ^_SYqLK||;t^^**}uN<7k2)#r$vayRiT*e+L6RiG;t9g1^$A}<`ZOzslyqnr0
z2<^b^jdBWXx}Dw~+kz-NF#GFin%W#o{tkcb%u!D}OG%a3<InUhaN8NUmNUmj$c>DU
z{~|*6*a#CNBb@jm!nj@d9hD~kSGy{aDErHAw^xF?q&ym1p%3d+$P$hUcbNacTKt20
zp=(Jhnps28N}V&=h%$)==yb?wl|7DhX*nXw%ETW+WNpT2MFzal%owXYSQjb<@1>{=
zScP4rVLpX<a1+E`gyG~QXvx?-?3*m2Cvdhlu?fSw+7{e{9hkiV)#=O4>3&L+TfQB5
zreF6~DPO2b&y94oR?>J50Fmxn9*r`Uz?amQVw>=+TAoa5U!fuld_lKy>@U=AW<K38
z?m<1mpld>Mt7hD!Voe62;V?O1>ijxgHLNfkEDV%|uo2BB8+3z;<(d`V2xZ`KE37q4
zh)I1%*7y`8%fJ*DK>P>K2KqNQ^)5H}HaE9FdAjw(<=53W)z+<hT@B^uKOmA%e^jE2
zNGg2*7}U%eA#-Tp*8-Owp<OjgO#5|EzJ~T)a<pN9aBaC+7^aC?1|k)|{DcydN)$o#
z=;Pmk8l4*=%#bs`!a|ptf_Zhgb1d-r_u!@Aq6A`8^~R{O`6=*jP8fc`1U>Ik33vNj
z7Jf2LWcCuprSsFUgV8llA9gk$F;TZ%*6fu#4JdWs$Cmr^vE?q8a?x1T64DA8SDnDs
z=|;u=(n7y6neXtFG8B>?HhJ9py*sZtRK`~>W}d74Y@?XY_`p78u6lu8cj<LL118l7
zLIc^=Fvk06zBTIIM+>c^@B8AJ7p2WBdk^;Rw~9;c;!>x$v{Bg4pLzc4=2|Pi*v>C@
z@{1eUZW@u3@9@-HJoTd7#xor}(<K^C@2z(ce1_tKhRBbJwL3mU{n^H|9X#7ZT^s^p
dO`(2DtcOu%8_#v{T#S0<j6lsN)}bvX=`)P0hadm|

literal 0
HcmV?d00001

diff --git a/app/security/__pycache__/security.cpython-312.pyc b/app/security/__pycache__/security.cpython-312.pyc
index 478ebf91b7d38aad5160471364cf6fe85fab1e59..e26243900fa9b07b89f26433984ee19d6f0b4e12 100644
GIT binary patch
delta 319
zcmey)v5TAUG%qg~0}$ADT4Wk9Pvnzed@@me<HQ1SMc&nnAPEMB6wXwpG^P~37M9fz
z0fs29N`6g&jdzTg7*|f_XLe!~pB%(&An}<6DBmO@#aP9wpO>FmoT{6XT2hi)G<gM6
zSiK-vBpxE7mr;_NQzQmdUL*h_gn&db$U220VIX-+3R!V{S!Qu*VoqjNVo7FxUXc_~
zfe1*w3Xpig@S}m@3Ae~~Zq<w2sy770FUT2wU}oS^`^><^!}fuJiIweVkpxg7v!5pS
z<UVF!HgO=QNNVyOW+^U3AQNP1@zhByxdtDYm>JnVa4|3mUS|}!$S5)){xYK~Sa3!9
UCkCM0XJ!T_wT~cGMG8P&0N1`yQ2+n{

delta 119
zcmdnR{hfpFG%qg~0}w2%G0iMun#d=?xM8CDMwUumO}@<nj7Ch1nv<QGofyR?w=o;=
z6te(THc3b^`e|}aUdH09DhA}QWcUm+phy@<{Nk|5%}*)KNwq7I1#%gIxHx~ZENd>;
NM<!-Qwjvpz004hA8SMZ7

diff --git a/app/security/security.py b/app/security/security.py
index 932b287..e48dfa1 100644
--- a/app/security/security.py
+++ b/app/security/security.py
@@ -15,4 +15,10 @@ async def browser_local_cryptography_strength(request: Request):
 async def pigeonhole_principle_simulation(request: Request):
     return templates.TemplateResponse(
         request=request, name="pigeonhole.html"
+    )
+
+@security_router.get("/noise-letter")
+async def noise_letter_visualization(request: Request):
+    return templates.TemplateResponse(
+        request=request, name="noise_letter.html"
     )
\ No newline at end of file
diff --git a/app/static/js/noise_letter.js b/app/static/js/noise_letter.js
new file mode 100644
index 0000000..a97fe7d
--- /dev/null
+++ b/app/static/js/noise_letter.js
@@ -0,0 +1,180 @@
+
+async function loadFile(url) {
+    const res = await fetch(url);
+    return res.text();
+}
+
+function compileShader(gl, source, type) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+    }
+    return shader;
+}
+
+function createTexture(gl) {
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    // Set parameters so we can handle non-power-of-2 images if needed
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    return tex;
+}
+
+
+function updateCharTexture(gl, texture, text) {
+    const height = 256;
+    // Dynamic width based on text length, min 1
+    const chars = Math.max(1, text.length);
+    const width = 256 * chars;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = 'white';
+    ctx.font = 'bold 200px monospace';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, width / 2, height / 2);
+
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+
+    return chars; // Return aspect ratio (width/height)
+}
+
+async function main() {
+    const canvas = document.getElementById('glcanvas');
+    const gl = canvas.getContext('webgl');
+
+    if (!gl) {
+        alert('WebGL not supported');
+        return;
+    }
+
+    // Load Shaders
+    const vsSource = await loadFile('/static/shaders/vertex.glsl');
+    // Using simple Cache Busting for reloading shader during dev if needed, but not strictly necessary here
+    const fsSource = await loadFile('/static/shaders/fragment.glsl');
+
+    const vs = compileShader(gl, vsSource, gl.VERTEX_SHADER);
+    const fs = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
+
+    const program = gl.createProgram();
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error('Program link error:', gl.getProgramInfoLog(program));
+        return;
+    }
+
+    gl.useProgram(program);
+
+    // Quad Buffer
+    const verts = new Float32Array([
+        -1, -1,
+        1, -1,
+        -1, 1,
+        -1, 1,
+        1, -1,
+        1, 1,
+    ]);
+
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
+
+    const posLoc = gl.getAttribLocation(program, 'position');
+    gl.enableVertexAttribArray(posLoc);
+    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+
+    // Uniforms
+    const uTime = gl.getUniformLocation(program, 'u_time');
+    const uRes = gl.getUniformLocation(program, 'u_resolution');
+    const uCharPos = gl.getUniformLocation(program, 'u_charPos');
+    const uCharSize = gl.getUniformLocation(program, 'u_charSize');
+    // Texture uniform usually defaults to 0, which is fine
+
+    // State
+    const charTexture = createTexture(gl);
+
+    let charX = 0.5;
+    let charY = 0.5;
+    let charW = 0.5;
+    let charH = 0.5;
+
+    let currentAspect = 1.0;
+
+    // UI Handling
+    const input = document.getElementById('textInput');
+    const btn = document.getElementById('renderBtn');
+
+    function updateText() {
+        // Use placeholder or "A" if empty to avoid 0 size
+        let text = input.value.toUpperCase().substring(0, 12);
+        if (text.length === 0) return;
+
+        currentAspect = updateCharTexture(gl, charTexture, text);
+        resize(); // Recalculate size
+    }
+
+    btn.addEventListener('click', updateText);
+
+    // Initial Text
+    currentAspect = updateCharTexture(gl, charTexture, "HELLO");
+
+    function resize() {
+        // Look up container size
+        const container = canvas.parentElement;
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+        gl.viewport(0, 0, canvas.width, canvas.height);
+
+        // Adjust aspect ratio
+        const screenAspect = canvas.width / canvas.height;
+
+        // Target: charW / charH = currentAspect / screenAspect
+
+        // Try filling 60% of height
+        charH = 0.6;
+        charW = charH * currentAspect / screenAspect;
+
+        // Constrain width to 95%
+        if (charW > 0.95) {
+            charW = 0.95;
+            charH = charW * screenAspect / currentAspect;
+        }
+
+        charX = 0.5 - charW / 2;
+        charY = 0.5 - charH / 2;
+    }
+    window.addEventListener('resize', resize);
+    resize();
+
+    function render(time) {
+        time *= 0.001; // Seconds
+
+        gl.uniform1f(uTime, time);
+        gl.uniform2f(uRes, canvas.width, canvas.height);
+
+        gl.uniform2f(uCharPos, charX, charY); // uniform needs bottom-left
+        gl.uniform2f(uCharSize, charW, charH);
+
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        requestAnimationFrame(render);
+    }
+    requestAnimationFrame(render);
+}
+
+main();
diff --git a/app/static/shaders/fragment.glsl b/app/static/shaders/fragment.glsl
new file mode 100644
index 0000000..c475fa6
--- /dev/null
+++ b/app/static/shaders/fragment.glsl
@@ -0,0 +1,58 @@
+precision mediump float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform sampler2D u_charTexture;
+uniform vec2 u_charPos; // Normalized 0-1 (Bottom-Left)
+uniform vec2 u_charSize; // Normalized 0-1 (Width, Height)
+
+varying vec2 vUv;
+
+// reliable pseudo-random hash
+float random(vec2 p) {
+    vec3 p3  = fract(vec3(p.xyx) * .1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+}
+
+void main() {
+    // Correct UV for aspect ratio if needed, but here we work in screen space mostly
+    
+    // Background Noise
+    // Use floor to ensure we are sampling integer grid, making it purely pixel-noise
+    vec2 gridPos = floor(gl_FragCoord.xy);
+    float bgNoise = random(gridPos);
+    float val = step(0.5, bgNoise); 
+    
+    // Character Composition
+    vec2 charEnd = u_charPos + u_charSize;
+    bool inBox = (vUv.x >= u_charPos.x && vUv.x <= charEnd.x &&
+                  vUv.y >= u_charPos.y && vUv.y <= charEnd.y);
+                  
+    if (inBox) {
+        vec2 texUv = (vUv - u_charPos) / u_charSize;
+        texUv.y = 1.0 - texUv.y; 
+        
+        vec4 texColor = texture2D(u_charTexture, texUv);
+        
+        // Hard threshold to avoid any smooth edges revealing the shape
+        if (texColor.a > 0.5) {
+            // Inner Character Noise - Scrolls Down
+            float scrollSpeed = 200.0;
+            // Calculate scrolled position
+            vec2 scrollCoords = gl_FragCoord.xy;
+            scrollCoords.y += u_time * scrollSpeed;
+            
+            // IMPORTANT: Floor the scrolled coordinates! 
+            // This ensures the noise "pixels" look exactly like the background "pixels" in size and sharpness.
+            // If we don't floor, we get sub-pixel sampling which might look different (smooth/shimmering).
+            vec2 charGridPos = floor(scrollCoords);
+            
+            // Use different seed offset to distinguish content, but same distribution
+            float charNoise = random(charGridPos + vec2(42.0, 99.0)); 
+            val = step(0.5, charNoise);
+        }
+    }
+    
+    gl_FragColor = vec4(vec3(1.0 - val), 1.0);
+}
diff --git a/app/static/shaders/vertex.glsl b/app/static/shaders/vertex.glsl
new file mode 100644
index 0000000..48262e1
--- /dev/null
+++ b/app/static/shaders/vertex.glsl
@@ -0,0 +1,7 @@
+attribute vec2 position;
+varying vec2 vUv;
+
+void main() {
+    vUv = position * 0.5 + 0.5;
+    gl_Position = vec4(position, 0.0, 1.0);
+}
diff --git a/app/templates/noise_letter.html b/app/templates/noise_letter.html
new file mode 100644
index 0000000..ad80d66
--- /dev/null
+++ b/app/templates/noise_letter.html
@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+
+{% block title %}Noise Letter{% endblock %}
+
+{% block css %}
+<style>
+    .noise-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 80vh;
+        background-color: white;
+        color: black;
+        font-family: monospace;
+        padding: 20px;
+        margin-top: 20px;
+    }
+
+    #controls {
+        margin-bottom: 20px;
+        display: flex;
+        gap: 10px;
+        width: 100%;
+        max-width: 600px;
+        justify-content: center;
+    }
+
+    #container {
+        width: 100%;
+        max-width: 1200px;
+        height: 400px;
+        border: 1px solid #ccc;
+        background-color: white;
+    }
+
+    canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="noise-wrapper rounded-lg">
+    <div id="controls">
+        <input type="text" id="textInput" maxlength="12" placeholder="ENTER TEXT (MAX 12)"
+            class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 placeholder-gray-400">
+        <button id="renderBtn"
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+            RENDER
+        </button>
+    </div>
+    <div id="container">
+        <canvas id="glcanvas"></canvas>
+    </div>
+    <p class="mt-4 text-gray-600 text-sm">Visualizing text as noise signal</p>
+</div>
+{% endblock %}
+
+{% block js %}
+<script src="{{ url_for('static', path='js/noise_letter.js') }}"></script>
+{% endblock %}
\ No newline at end of file