From 9b2b05c41688aa7509dc46589538b614d58e0278 Mon Sep 17 00:00:00 2001
From: noe <git@kat.cafe>
Date: Thu, 21 Mar 2024 23:47:19 -0400
Subject: [PATCH] add pfp thingo

---
 -~-/pfp/index.html  | 335 ++++++++++++++++++++++++++++++++++++++++++++
 -~-/pfp/noegram.png | Bin 0 -> 2693 bytes
 2 files changed, 335 insertions(+)
 create mode 100644 -~-/pfp/index.html
 create mode 100644 -~-/pfp/noegram.png
diff --git a/-~-/pfp/index.html b/-~-/pfp/index.html
new file mode 100644
index 0000000..4fe6dbf
--- /dev/null
+++ b/-~-/pfp/index.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<title>noe pfp generator</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap"
+  rel="stylesheet"
+/>
+<script
+  src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js"
+  referrerpolicy="no-referrer"
+></script>
+<style>
+  :root {
+    font-family: "Atkinson Hyperlegible", sans-serif;
+    background-color: black;
+    color: #efefef;
+  }
+
+  a {
+    color: gold;
+  }
+
+  section {
+    padding: 2em;
+  }
+
+  #error {
+    color: pink;
+  }
+
+  #draw {
+    border: 3px solid grey;
+  }
+
+  .num {
+    width: 4em;
+  }
+</style>
+
+<main>
+  <p id="error"></p>
+  <noscript>this tool uses webgl, so js must be enabled. sorry!</noscript>
+  <section>
+    albedo <input type="file" id="albedo" accept="image/*" /><br />
+    x power
+    <input type="number" class="num" id="x-pow" value="1" step="0.1" /> y power
+    <input type="number" class="num" id="y-pow" value="1" step="0.1" /><br />
+    <button id="run-frame">Run Frame</button>
+  </section>
+  <section>
+    <canvas width="256" height="256" id="draw" />
+  </section>
+  <section>
+    <p>This tool is what it uses to generate its profile pictures.</p>
+    <p>
+      In short, it takes the "albedo" texture that you upload, applies the "<a
+        href="/-~-/pfp/noegram.png"
+        >noegram </a
+      >" pattern over the top, where the overlay switches to a random UV offset
+      per line, causing a glitch-like effect.
+    </p>
+    <p>
+      <img
+        src="/-~-/pfp/noegram.png"
+        id="noegram"
+        width="256"
+        height="256"
+        alt="noegram"
+      />
+    </p>
+  </section>
+</main>
+
+<script type="text/x-vertex-shader" id="vertexShader">
+  in vec4 a_vertex;
+  in vec2 a_uv0;
+
+  uniform mat4 u_model_view;
+  uniform mat4 u_projection;
+
+  out vec2 uv0;
+
+  void main() {
+    gl_Position = u_projection * u_model_view * a_vertex;
+    uv0 = a_uv0;
+  }
+</script>
+<script type="text/x-fragment-shader" id="fragmentShader">
+  uniform vec2 u_noe_power;
+  uniform vec2 u_noise_offset;
+
+  uniform sampler2D u_texture_0; // albedo
+  uniform sampler2D u_texture_1; // noegram
+  uniform sampler2D u_texture_2; // noise
+
+  in vec2 uv0;
+
+  out vec4 fragColor;
+
+  void main() {
+    vec4 noegram = texture(u_texture_1, uv0);
+
+    vec4 albedo = texture(u_texture_0, uv0 + (noegram.r * 0.5) / 2.0);
+
+    fragColor = vec4(albedo.rgb, 1.0);
+  }
+</script>
+
+<script defer async>
+  (() => {
+    const { mat4, vec2 } = glMatrix;
+
+    const xPowEl = document.querySelector("#x-pow");
+    const yPowEl = document.querySelector("#y-pow");
+
+    const getPower = () => {
+      return [xPowEl.value, yPowEl.value];
+    };
+
+    const canvasEl = document.querySelector("#draw");
+    const albedoEl = document.querySelector("#albedo");
+    const renderEl = document.querySelector("#run-frame");
+
+    const gl = canvasEl.getContext("webgl2");
+    if (gl === null) {
+      document.querySelector("#error").innerHTML = "WebGL2 context failed.";
+    }
+
+    const makeTexture = async (blob, texture) => {
+      const image = await createImageBitmap(blob, {
+        imageOrientation: "flipY",
+      });
+
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        image.width,
+        image.height,
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        image
+      );
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); // configurable?
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    };
+
+    const albedoTex = gl.createTexture();
+
+    let noegramOk = false;
+    const noegramEl = document.querySelector("#noegram");
+    const noegramTex = gl.createTexture();
+    noegramEl.onload = async () => {
+      await makeTexture(noegramEl, noegramTex);
+      noegramOk = true;
+    };
+
+    gl.getExtension("EXT_texture_filter_anisotropic");
+
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+
+    const projectionMatrix = mat4.create();
+    mat4.perspective(projectionMatrix, 45, 1, 0.1, 100);
+
+    const modelViewMatrix = mat4.create();
+    mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -1.79]);
+
+    const clear = () => {
+      gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+      gl.clearDepth(1.0); // Clear everything
+      gl.enable(gl.DEPTH_TEST); // Enable depth testing
+      gl.depthFunc(gl.LEQUAL); // Near things obscure far things
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    };
+
+    const initBuffer = (array) => {
+      const buffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
+
+      return buffer;
+    };
+
+    // Plane
+    const vertexPositions = initBuffer(
+      new Float32Array([-1.0, -1.0, +1.0, -1.0, -1.0, +1.0, +1.0, +1.0])
+    );
+    const textureCoords = initBuffer(
+      new Float32Array([0, 0, 1, 0, 0, 1, 1, 1])
+    );
+
+    // Shaders
+    const program = gl.createProgram();
+
+    const addShader = (type, source) => {
+      const shader = gl.createShader(type);
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        throw new Error(
+          "An error occurred compiling the shaders: " +
+            gl.getShaderInfoLog(shader)
+        );
+      }
+
+      gl.attachShader(program, shader);
+    };
+
+    addShader(
+      gl.VERTEX_SHADER,
+      `#version 300 es\nprecision highp float;\n${
+        document.querySelector("#vertexShader").innerHTML
+      }`
+    );
+    addShader(
+      gl.FRAGMENT_SHADER,
+      `#version 300 es\nprecision highp float;\n${
+        document.querySelector("#fragmentShader").innerHTML
+      }`
+    );
+
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw new Error(
+        "Unable to initialize the shader program: " +
+          gl.getProgramInfoLog(program)
+      );
+    }
+
+    const bindAttrib = (buffer, attribute) => {
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.vertexAttribPointer(
+        gl.getAttribLocation(program, attribute),
+        2,
+        gl.FLOAT,
+        false,
+        0,
+        0
+      );
+      gl.enableVertexAttribArray(gl.getAttribLocation(program, attribute));
+    };
+
+    bindAttrib(vertexPositions, "a_vertex");
+    bindAttrib(textureCoords, "a_uv0");
+
+    const renderFrame = () => {
+      clear();
+
+      gl.bindVertexArray(vao);
+
+      // Shader activation
+      gl.useProgram(program);
+      gl.uniformMatrix4fv(
+        gl.getUniformLocation(program, "u_model_view"),
+        false,
+        modelViewMatrix
+      );
+      gl.uniformMatrix4fv(
+        gl.getUniformLocation(program, "u_projection"),
+        false,
+        projectionMatrix
+      );
+
+      // Verts and UVs
+      gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositions);
+      gl.vertexAttribPointer(
+        gl.getAttribLocation(program, "a_vertex"),
+        2,
+        gl.FLOAT,
+        false,
+        0,
+        0
+      );
+      gl.enableVertexAttribArray(gl.getAttribLocation(program, "a_vertex"));
+
+      gl.bindBuffer(gl.ARRAY_BUFFER, textureCoords);
+      gl.vertexAttribPointer(
+        gl.getAttribLocation(program, "a_uv0"),
+        2,
+        gl.FLOAT,
+        false,
+        0,
+        0
+      );
+      gl.enableVertexAttribArray(gl.getAttribLocation(program, "a_uv0"));
+
+      // Textures
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, albedoTex);
+      gl.uniform1i(gl.getUniformLocation(program, "u_texture_0"), 0);
+
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, noegramTex);
+      gl.uniform1i(gl.getUniformLocation(program, "u_texture_1"), 1);
+
+      gl.activeTexture(gl.TEXTURE2);
+      gl.bindTexture(gl.TEXTURE_2D, noegramTex); // TODO: replace with noise
+      gl.uniform1i(gl.getUniformLocation(program, "u_texture_2"), 2);
+
+      // draw!
+      gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositions);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+      const err = gl.getError();
+      if (err !== 0) {
+        console.log({ err });
+        throw new Error(`webgl failure: ${err}`);
+      }
+    };
+
+    renderEl.addEventListener("click", async () => {
+      if (albedoEl.files.length === 0) {
+        console.warn("cannot render, albedo not loaded yet");
+        return;
+      }
+
+      await makeTexture(albedoEl.files[0], albedoTex);
+
+      if (!noegramOk) {
+        console.warn("cannot render, noegram.png not loaded yet");
+        return;
+      }
+
+      console.log("running frame");
+      renderFrame();
+    });
+  })();
+</script>
diff --git a/-~-/pfp/noegram.png b/-~-/pfp/noegram.png
new file mode 100644
index 0000000000000000000000000000000000000000..e97a38a1892fb2d9f578f47ef6105b2d40548419
GIT binary patch
literal 2693
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

literal 0
HcmV?d00001

