From c10ce7e8d70a0b43338124e49769c9afd76b4956 Mon Sep 17 00:00:00 2001
From: EpicKiwi <me@epickiwi.fr>
Date: Mon, 20 Apr 2026 16:16:22 +0200
Subject: [PATCH 1/5] =?UTF-8?q?Fix=20vid=C3=A9o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v1-com-officielle/src/indieComponents/VideoPannel.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/v1-com-officielle/src/indieComponents/VideoPannel.vue b/v1-com-officielle/src/indieComponents/VideoPannel.vue
index 3e044a8..9b74e8a 100644
--- a/v1-com-officielle/src/indieComponents/VideoPannel.vue
+++ b/v1-com-officielle/src/indieComponents/VideoPannel.vue
@@ -21,9 +21,7 @@
         </button>
       </div>
       <div class="windowContent" id="visualizerContent">
-        <video controls autoplay id="displayedImgStyle">
-          <source :src="selectedVideo.src" :type="selectedVideo.format">
-        </video>
+        <video controls id="displayedImgStyle" :src="selectedVideo.src"></video>
         <div class="reactBar">
           <p class="reactStatStyle">{{selectedVideo.like}}</p>
           <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">

From f1229866d1975c36ea57adb64e42a99c12a7c9d9 Mon Sep 17 00:00:00 2001
From: EpicKiwi <me@epickiwi.fr>
Date: Mon, 20 Apr 2026 19:00:08 +0200
Subject: [PATCH 2/5] Creation de la base du glitcher

---
 v1-com-officielle/glitcher/glitcher.css    |  55 +++++
 v1-com-officielle/glitcher/glitcher.js     |  28 +++
 v1-com-officielle/glitcher/index.html      |  25 +++
 v1-com-officielle/glitcher/lib/base.frag   |   6 +
 v1-com-officielle/glitcher/lib/base.vert   |   9 +
 v1-com-officielle/glitcher/lib/glitcher.js | 221 +++++++++++++++++++++
 v1-com-officielle/package-lock.json        |  13 ++
 v1-com-officielle/package.json             |   1 +
 v1-com-officielle/vite.config.js           |  12 +-
 9 files changed, 368 insertions(+), 2 deletions(-)
 create mode 100644 v1-com-officielle/glitcher/glitcher.css
 create mode 100644 v1-com-officielle/glitcher/glitcher.js
 create mode 100644 v1-com-officielle/glitcher/index.html
 create mode 100644 v1-com-officielle/glitcher/lib/base.frag
 create mode 100644 v1-com-officielle/glitcher/lib/base.vert
 create mode 100644 v1-com-officielle/glitcher/lib/glitcher.js

diff --git a/v1-com-officielle/glitcher/glitcher.css b/v1-com-officielle/glitcher/glitcher.css
new file mode 100644
index 0000000..07f1fd5
--- /dev/null
+++ b/v1-com-officielle/glitcher/glitcher.css
@@ -0,0 +1,55 @@
+/*=============Typo*/
+@font-face {
+  font-family: 'lineal';
+  src: url('../typo/Lineal-Heavy.ttf');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('../typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('../typo/Velvelyne-Light.ttf') format('truetype');
+  font-weight:lighter;
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*============General*/
+
+body, html {
+    padding: 0;
+    margin: 0;
+}
+
+:root {
+    --back-color: black;
+    --main-color: white;
+    --accent-color: #3CFF00;
+    --neon-color: #3CFF00;
+
+    color: var(--main-color);
+    font-size: 1rem;
+    background: var(--back-color);
+    font-family: 'velvelyne', sans-serif;
+    font-weight: bold;
+}
+
+h1 {
+    font-family: 'lineal', sans-serif;
+    font-weight: bolder;
+}
+
+#ui-canvas {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100vw;
+  max-height: 100vh;
+}
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/glitcher.js b/v1-com-officielle/glitcher/glitcher.js
new file mode 100644
index 0000000..f7ad40b
--- /dev/null
+++ b/v1-com-officielle/glitcher/glitcher.js
@@ -0,0 +1,28 @@
+import { Glitcher } from "./lib/glitcher";
+
+const UI_GLITCHER = new Glitcher(document.getElementById("ui-canvas"))
+const FORM = document.getElementById("glitcher-form")
+
+async function updateFromForm(){
+    let data = new FormData(FORM)
+    
+    let image = data.get("image")
+    if(image){
+        await UI_GLITCHER.setImage(image)
+    } else {
+        UI_GLITCHER.clearImage()
+    }
+
+    UI_GLITCHER.render()
+}
+
+for(let el of FORM.elements){
+    el.addEventListener("change", () => FORM.requestSubmit())
+}
+
+FORM.addEventListener("submit", e => {
+        e.preventDefault()
+        updateFromForm()
+    })
+
+updateFromForm()
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/index.html b/v1-com-officielle/glitcher/index.html
new file mode 100644
index 0000000..df9a2d5
--- /dev/null
+++ b/v1-com-officielle/glitcher/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="glitcher.css">
+    <title>Drags&Nerds Glitcher</title>
+</head>
+<body>
+
+    <form id="glitcher-form">
+        <div id="welcome-panel">
+            <h1>Glitcher</h1>
+            <p>Séléctionne un photo pour la glitcher</p>
+
+            <input type="file" name="image" accept="image/jpg, image/jpeg,image/png,image/webp" />
+        </div>
+        <div id="glitch-panel">
+            <canvas id="ui-canvas"></canvas>
+        </div>
+    </form>
+
+    <script type="module" src="glitcher.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/lib/base.frag b/v1-com-officielle/glitcher/lib/base.frag
new file mode 100644
index 0000000..a5db85e
--- /dev/null
+++ b/v1-com-officielle/glitcher/lib/base.frag
@@ -0,0 +1,6 @@
+varying highp vec2 vTextureCoord;
+uniform sampler2D uImageSampler;
+
+void main() {
+    gl_FragColor = texture2D(uImageSampler, vTextureCoord);
+}
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/lib/base.vert b/v1-com-officielle/glitcher/lib/base.vert
new file mode 100644
index 0000000..395c746
--- /dev/null
+++ b/v1-com-officielle/glitcher/lib/base.vert
@@ -0,0 +1,9 @@
+attribute vec4 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+varying highp vec2 vTextureCoord;
+
+void main() {
+    gl_Position = aVertexPosition;
+    vTextureCoord = aTextureCoord;
+}
diff --git a/v1-com-officielle/glitcher/lib/glitcher.js b/v1-com-officielle/glitcher/lib/glitcher.js
new file mode 100644
index 0000000..798e69a
--- /dev/null
+++ b/v1-com-officielle/glitcher/lib/glitcher.js
@@ -0,0 +1,221 @@
+import resizeToFit from 'intrinsic-scale';
+import baseVertSource from "./base.vert?raw"
+import baseFragSource from "./base.frag?raw"
+
+export class Glitcher {
+
+    /** @type {HTMLCanvasElement} */
+    canvas
+
+    /**
+     * @param {HTMLCanvasElement} canvas
+     */
+    constructor(canvas) {
+        this.canvas = canvas
+        this.init()
+    }
+
+    init(){
+        this.ctx = this.canvas.getContext("webgl")
+        if(!this.ctx){
+            throw new Error("WebGL isn't supported")
+        }
+
+        let baseVertShader = this.ctx.createShader(this.ctx.VERTEX_SHADER)
+        this.ctx.shaderSource(baseVertShader, baseVertSource)
+        this.ctx.compileShader(baseVertShader)
+
+        if (!this.ctx.getShaderParameter(baseVertShader, this.ctx.COMPILE_STATUS)) {
+            throw new Error(`failed to compile base.vert: ${this.ctx.getShaderInfoLog(baseVertShader)}`)
+        }
+
+        let baseFragShader = this.ctx.createShader(this.ctx.FRAGMENT_SHADER)
+        this.ctx.shaderSource(baseFragShader, baseFragSource)
+        this.ctx.compileShader(baseFragShader)
+
+        if (!this.ctx.getShaderParameter(baseFragShader, this.ctx.COMPILE_STATUS)) {
+            throw new Error(`failed to compile base.frag: ${this.ctx.getShaderInfoLog(baseFragShader)}`)
+        }
+
+        let baseShaderProgram = this.ctx.createProgram()
+        this.ctx.attachShader(baseShaderProgram, baseVertShader)
+        this.ctx.attachShader(baseShaderProgram, baseFragShader)
+        this.ctx.linkProgram(baseShaderProgram)
+
+        if (!this.ctx.getProgramParameter(baseShaderProgram, this.ctx.LINK_STATUS)) {
+            throw new Error(`failed to link base shaders: ${this.ctx.getProgramInfoLog(baseShaderProgram)}`)
+        }
+
+        this.baseProgram = baseShaderProgram;
+        this.aVertexPosition = this.ctx.getAttribLocation(baseShaderProgram, "aVertexPosition")
+        this.aTextureCoord = this.ctx.getAttribLocation(baseShaderProgram, "aTextureCoord")
+        this.uImageSampler = this.ctx.getUniformLocation(baseShaderProgram, "uImageSampler")
+
+        let panelPositionBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelPositionBuffer)
+        const positions = [
+              -1.0,  1.0,
+               1.0,  1.0,
+              -1.0, -1.0,
+               1.0, -1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(positions), this.ctx.STATIC_DRAW)
+        this.panelPositionsBuffer = panelPositionBuffer
+
+        let panelUVBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelUVBuffer)
+        const uv = [
+              0.0, 0.0,
+              1.0, 0.0,
+              0.0, 1.0,
+              1.0, 1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(uv), this.ctx.STATIC_DRAW)
+        this.panelUVBuffer = panelUVBuffer
+
+        let imageTexture = this.ctx.createTexture()
+        this.imageTexture = imageTexture;
+        this.clearImage();
+    }
+
+    clearImage(){
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            1, 1,
+            0,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            new Uint8Array([0, 0, 0, 0])
+        )
+    }
+
+    /**
+     * @param {File} imageFile 
+     */
+    async setImage(imageFile){
+        if(imageFile == this.currentImageFile){
+            return
+        }
+
+        if(this.currentImage){
+            URL.revokeObjectURL(this.currentImage.src)
+        }
+
+        let image = new Image()
+        const loadProm = new Promise((res, rej) => {
+            function ok(){
+                image.removeEventListener("error", nok)
+                res()
+            }
+
+            function nok(){
+                image.removeEventListener("load", ok)
+                rej()
+            }
+
+            image.addEventListener("load", ok)
+            image.addEventListener("error", nok)
+        })
+        image.src = URL.createObjectURL(imageFile)
+
+        try {
+            await loadProm
+        } catch(e) {
+            URL.revokeObjectURL(image.src)
+            throw e
+        }
+        this.resize(image.width, image.height)
+
+        this.currentImageFile = imageFile
+        this.currentImage = image
+
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            this.currentImage
+        )
+
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
+    }
+
+    resize(width, height){
+        let computedStyle = window.getComputedStyle(this.canvas)
+        let maxWidth = parseFloat(computedStyle["max-width"])
+        let maxHeight = parseFloat(computedStyle["max-height"])
+        
+        if(window.devicePixelRatio){
+            maxWidth *= window.devicePixelRatio
+            maxHeight *= window.devicePixelRatio
+        }
+
+        if(Number.isNaN(maxWidth)){
+            maxWidth = width
+        }
+
+        if(Number.isNaN(maxHeight)){
+            maxHeight = height
+        }
+
+        let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
+
+        this.canvas.width = resize.width
+        this.canvas.height = resize.height
+        this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    render(){
+        if(!this.ctx){
+            throw new Error("Glitcher not initialized, please run init()")
+        }
+
+        this.ctx.clearColor(0.0, 0.0, 0.0, 0.0)
+        this.ctx.clearDepth(1.0)
+        this.ctx.enable(this.ctx.DEPTH_TEST)
+        this.ctx.enable(this.ctx.LEQUAL)
+
+        this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT)
+
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelPositionsBuffer)
+        this.ctx.vertexAttribPointer(
+            this.aVertexPosition,
+            2, // N components per iteration
+            this.ctx.FLOAT,
+            false, //Normalize,
+            0, // (stride) how many bytes to get from one set of values to the next
+            0, // Start offset
+        )
+        this.ctx.enableVertexAttribArray(this.aVertexPosition)
+        
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelUVBuffer)
+        this.ctx.vertexAttribPointer(
+            this.aTextureCoord,
+            2,
+            this.ctx.FLOAT,
+            false,
+            0,
+            0,
+        )
+        this.ctx.enableVertexAttribArray(this.aTextureCoord)
+
+        this.ctx.activeTexture(this.ctx.TEXTURE0)
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
+        this.ctx.uniform1i(this.uImageSampler, 0)
+
+        this.ctx.useProgram(this.baseProgram)
+        
+        this.ctx.drawArrays(
+            this.ctx.TRIANGLE_STRIP,
+            0, // Vertex offset
+            4, // Total vertex
+        );
+    }
+}
\ No newline at end of file
diff --git a/v1-com-officielle/package-lock.json b/v1-com-officielle/package-lock.json
index 2204690..5bfe706 100644
--- a/v1-com-officielle/package-lock.json
+++ b/v1-com-officielle/package-lock.json
@@ -8,6 +8,7 @@
       "name": "v1-com-officielle",
       "version": "0.0.0",
       "dependencies": {
+        "intrinsic-scale": "^5.0.0",
         "vite-svg-loader": "^5.1.1",
         "vue": "^3.5.25",
         "vue3-clipboard": "^1.0.0",
@@ -1442,6 +1443,18 @@
         "delegate": "^3.1.2"
       }
     },
+    "node_modules/intrinsic-scale": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/intrinsic-scale/-/intrinsic-scale-5.0.0.tgz",
+      "integrity": "sha512-NJY7170uG8gYkaGGV0ddakq5VAWSvM2FKhARgXj8OQwod1hQFRBWCXn7dk35bGd+vsRYYnJQw/Qpebk8MWp4dg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
     "node_modules/keycode": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
diff --git a/v1-com-officielle/package.json b/v1-com-officielle/package.json
index e11f394..f96e110 100644
--- a/v1-com-officielle/package.json
+++ b/v1-com-officielle/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "intrinsic-scale": "^5.0.0",
     "vite-svg-loader": "^5.1.1",
     "vue": "^3.5.25",
     "vue3-clipboard": "^1.0.0",
diff --git a/v1-com-officielle/vite.config.js b/v1-com-officielle/vite.config.js
index 57a0efa..aee2945 100644
--- a/v1-com-officielle/vite.config.js
+++ b/v1-com-officielle/vite.config.js
@@ -6,13 +6,21 @@ import svgLoader from 'vite-svg-loader'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue(), svgLoader()],
-  server:{
+  server: {
     host: '0.0.0.0',
-    port:8080
+    port: 8080
   },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src')
     }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: path.resolve(import.meta.dirname, 'index.html'),
+        glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
+      },
+    },
   }
 })

From 3d5bef4153f49768dd34ca5081148a19d1957666 Mon Sep 17 00:00:00 2001
From: EpicKiwi <me@epickiwi.fr>
Date: Mon, 20 Apr 2026 23:11:05 +0200
Subject: [PATCH 3/5] =?UTF-8?q?Ajout=20d'entit=C3=A9s=20"glitch"=20a=20la?=
 =?UTF-8?q?=20scene?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v1-com-officielle/glitcher/glitcher.js     |  62 +++++-
 v1-com-officielle/glitcher/lib/base.vert   |   4 +-
 v1-com-officielle/glitcher/lib/glitch.frag |   3 +
 v1-com-officielle/glitcher/lib/glitch.vert |  17 ++
 v1-com-officielle/glitcher/lib/glitcher.js | 214 ++++++++++++++-------
 5 files changed, 231 insertions(+), 69 deletions(-)
 create mode 100644 v1-com-officielle/glitcher/lib/glitch.frag
 create mode 100644 v1-com-officielle/glitcher/lib/glitch.vert

diff --git a/v1-com-officielle/glitcher/glitcher.js b/v1-com-officielle/glitcher/glitcher.js
index f7ad40b..17a9e49 100644
--- a/v1-com-officielle/glitcher/glitcher.js
+++ b/v1-com-officielle/glitcher/glitcher.js
@@ -1,14 +1,16 @@
 import { Glitcher } from "./lib/glitcher";
 
-const UI_GLITCHER = new Glitcher(document.getElementById("ui-canvas"))
+const CANVAS = document.getElementById("ui-canvas")
+const UI_GLITCHER = new Glitcher(CANVAS)
 const FORM = document.getElementById("glitcher-form")
 
 async function updateFromForm(){
     let data = new FormData(FORM)
     
     let image = data.get("image")
-    if(image){
+    if(image.size > 0){
         await UI_GLITCHER.setImage(image)
+        UI_GLITCHER.clearGlitch()
     } else {
         UI_GLITCHER.clearImage()
     }
@@ -25,4 +27,60 @@ FORM.addEventListener("submit", e => {
         updateFromForm()
     })
 
+CANVAS.addEventListener("pointerdown", e => {
+    let pointerId = e.pointerId;
+
+    let lastX = undefined;
+    let lastY = undefined;
+    let lastCommit = null;
+
+    function applyGlitch(e){
+        if(e.pointerId != pointerId){
+            return
+        }
+
+        let canvasRect = CANVAS.getBoundingClientRect()
+        let x = e.clientX - canvasRect.left
+        let y = e.clientY - canvasRect.top
+
+        let now = Date.now()
+
+        if(lastCommit === null || now - lastCommit > 100){
+            let width = 20;
+            if(e.pointerType == "touch"){
+                width *= 2
+            }
+            
+            let deltaX = lastX !== undefined ? x - lastX : 0
+            let deltaY = lastY !== undefined ? y - lastY : 0
+
+            width += Math.max(Math.abs(deltaX), Math.abs(deltaY))
+
+            //UI_GLITCHER.addGlitch(x + (Math.random() * width) - width/2, y + (Math.random() * width) - width/2, width)
+            UI_GLITCHER.addGlitch(x, y, width)
+            UI_GLITCHER.render()
+
+            lastCommit = now
+        }
+
+        lastX = x
+        lastY = y
+    }
+
+    function endGlitch(e){
+        if(e.pointerId != pointerId){
+            return
+        }
+
+        window.removeEventListener("pointermove", applyGlitch)
+        window.removeEventListener("pointerup", endGlitch)
+    }
+
+    window.addEventListener("pointerup", endGlitch)
+    window.addEventListener("pointermove", applyGlitch)
+
+    applyGlitch(e)
+})
+
+
 updateFromForm()
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/lib/base.vert b/v1-com-officielle/glitcher/lib/base.vert
index 395c746..cc2aaff 100644
--- a/v1-com-officielle/glitcher/lib/base.vert
+++ b/v1-com-officielle/glitcher/lib/base.vert
@@ -1,9 +1,9 @@
-attribute vec4 aVertexPosition;
+attribute vec2 aVertexPosition;
 attribute vec2 aTextureCoord;
 
 varying highp vec2 vTextureCoord;
 
 void main() {
-    gl_Position = aVertexPosition;
+    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
     vTextureCoord = aTextureCoord;
 }
diff --git a/v1-com-officielle/glitcher/lib/glitch.frag b/v1-com-officielle/glitcher/lib/glitch.frag
new file mode 100644
index 0000000..45da7f3
--- /dev/null
+++ b/v1-com-officielle/glitcher/lib/glitch.frag
@@ -0,0 +1,3 @@
+void main() {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+}
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/lib/glitch.vert b/v1-com-officielle/glitcher/lib/glitch.vert
new file mode 100644
index 0000000..847dc61
--- /dev/null
+++ b/v1-com-officielle/glitcher/lib/glitch.vert
@@ -0,0 +1,17 @@
+attribute vec4 aVertexPosition;
+
+uniform vec2 uGlitchPosition;
+uniform float uGlitchWidth;
+uniform vec2 uImageRatio;
+
+void main() {
+    vec2 vertex = aVertexPosition.xy;
+
+    vertex *= uImageRatio;
+    vertex *= 0.001;
+    vertex *= uGlitchWidth;
+    vertex += uGlitchPosition;
+
+    gl_Position = vec4(vertex, -1.0, 1.0);
+}
+
diff --git a/v1-com-officielle/glitcher/lib/glitcher.js b/v1-com-officielle/glitcher/lib/glitcher.js
index 798e69a..4ead33d 100644
--- a/v1-com-officielle/glitcher/lib/glitcher.js
+++ b/v1-com-officielle/glitcher/lib/glitcher.js
@@ -1,12 +1,18 @@
-import resizeToFit from 'intrinsic-scale';
+import resizeToFit from 'intrinsic-scale'
+
 import baseVertSource from "./base.vert?raw"
 import baseFragSource from "./base.frag?raw"
 
+import glitchVertSource from "./glitch.vert?raw"
+import glitchFragSource from "./glitch.frag?raw"
+
 export class Glitcher {
 
     /** @type {HTMLCanvasElement} */
     canvas
 
+    gliches = []
+
     /**
      * @param {HTMLCanvasElement} canvas
      */
@@ -21,35 +27,7 @@ export class Glitcher {
             throw new Error("WebGL isn't supported")
         }
 
-        let baseVertShader = this.ctx.createShader(this.ctx.VERTEX_SHADER)
-        this.ctx.shaderSource(baseVertShader, baseVertSource)
-        this.ctx.compileShader(baseVertShader)
-
-        if (!this.ctx.getShaderParameter(baseVertShader, this.ctx.COMPILE_STATUS)) {
-            throw new Error(`failed to compile base.vert: ${this.ctx.getShaderInfoLog(baseVertShader)}`)
-        }
-
-        let baseFragShader = this.ctx.createShader(this.ctx.FRAGMENT_SHADER)
-        this.ctx.shaderSource(baseFragShader, baseFragSource)
-        this.ctx.compileShader(baseFragShader)
-
-        if (!this.ctx.getShaderParameter(baseFragShader, this.ctx.COMPILE_STATUS)) {
-            throw new Error(`failed to compile base.frag: ${this.ctx.getShaderInfoLog(baseFragShader)}`)
-        }
-
-        let baseShaderProgram = this.ctx.createProgram()
-        this.ctx.attachShader(baseShaderProgram, baseVertShader)
-        this.ctx.attachShader(baseShaderProgram, baseFragShader)
-        this.ctx.linkProgram(baseShaderProgram)
-
-        if (!this.ctx.getProgramParameter(baseShaderProgram, this.ctx.LINK_STATUS)) {
-            throw new Error(`failed to link base shaders: ${this.ctx.getProgramInfoLog(baseShaderProgram)}`)
-        }
-
-        this.baseProgram = baseShaderProgram;
-        this.aVertexPosition = this.ctx.getAttribLocation(baseShaderProgram, "aVertexPosition")
-        this.aTextureCoord = this.ctx.getAttribLocation(baseShaderProgram, "aTextureCoord")
-        this.uImageSampler = this.ctx.getUniformLocation(baseShaderProgram, "uImageSampler")
+        let baseProgram = createProgram(this.ctx, baseVertSource, baseFragSource);
 
         let panelPositionBuffer = this.ctx.createBuffer()
         this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelPositionBuffer)
@@ -60,7 +38,6 @@ export class Glitcher {
                1.0, -1.0,
         ]
         this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(positions), this.ctx.STATIC_DRAW)
-        this.panelPositionsBuffer = panelPositionBuffer
 
         let panelUVBuffer = this.ctx.createBuffer()
         this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelUVBuffer)
@@ -71,11 +48,41 @@ export class Glitcher {
               1.0, 1.0,
         ]
         this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(uv), this.ctx.STATIC_DRAW)
-        this.panelUVBuffer = panelUVBuffer
 
         let imageTexture = this.ctx.createTexture()
-        this.imageTexture = imageTexture;
+
+        this.base = {
+            program: baseProgram,
+            aVertexPosition: this.ctx.getAttribLocation(baseProgram, "aVertexPosition"),
+            aTextureCoord: this.ctx.getAttribLocation(baseProgram, "aTextureCoord"),
+            uImageSampler: this.ctx.getUniformLocation(baseProgram, "uImageSampler"),
+            imageTexture: imageTexture,
+            panelUVBuffer: panelUVBuffer,
+            panelPositionsBuffer: panelPositionBuffer
+        }
         this.clearImage();
+
+
+        let glitchPositionBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, glitchPositionBuffer)
+        const glitchPosition = [
+            -1.0,  1.0,
+            1.0,  1.0,
+            -1.0, -1.0,
+            1.0, -1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(glitchPosition), this.ctx.STATIC_DRAW)
+
+        let glitchProgram = createProgram(this.ctx, glitchVertSource, glitchFragSource)
+
+        this.glitch = {
+            program: glitchProgram,
+            aVertexPosition: this.ctx.getAttribLocation(glitchProgram, "aVertexPosition"),
+            uGlitchPosition: this.ctx.getUniformLocation(glitchProgram, "uGlitchPosition"),
+            uGlitchWidth: this.ctx.getUniformLocation(glitchProgram, "uGlitchWidth"),
+            uImageRatio: this.ctx.getUniformLocation(glitchProgram, "uImageRatio"),
+            glitchPositionBuffer: glitchPositionBuffer
+        }
     }
 
     clearImage(){
@@ -92,6 +99,22 @@ export class Glitcher {
         )
     }
 
+    clearGlitch(){
+        this.glitches = []
+    }
+
+    addGlitch(x, y, width=1){
+        let computedStyle = window.getComputedStyle(this.canvas)
+        let clientWidth = parseFloat(computedStyle.width)
+        let clientHeight = parseFloat(computedStyle.height)
+
+        this.glitches.push({
+            x: ((x*2)/clientWidth)-1,
+            y: (((y*2)/clientHeight)-1)*-1,
+            width
+        })
+    }
+
     /**
      * @param {File} imageFile 
      */
@@ -132,7 +155,7 @@ export class Glitcher {
         this.currentImageFile = imageFile
         this.currentImage = image
 
-        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
         this.ctx.texImage2D(
             this.ctx.TEXTURE_2D,
             0,
@@ -184,38 +207,99 @@ export class Glitcher {
 
         this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT)
 
-        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelPositionsBuffer)
-        this.ctx.vertexAttribPointer(
-            this.aVertexPosition,
-            2, // N components per iteration
-            this.ctx.FLOAT,
-            false, //Normalize,
-            0, // (stride) how many bytes to get from one set of values to the next
-            0, // Start offset
-        )
-        this.ctx.enableVertexAttribArray(this.aVertexPosition)
-        
-        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.panelUVBuffer)
-        this.ctx.vertexAttribPointer(
-            this.aTextureCoord,
-            2,
-            this.ctx.FLOAT,
-            false,
-            0,
-            0,
-        )
-        this.ctx.enableVertexAttribArray(this.aTextureCoord)
+        { // Base rendering
+            this.ctx.useProgram(this.base.program)
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.base.panelPositionsBuffer)
+            this.ctx.vertexAttribPointer(
+                this.base.aVertexPosition,
+                2, // N components per iteration
+                this.ctx.FLOAT,
+                false, //Normalize,
+                0, // (stride) how many bytes to get from one set of values to the next
+                0, // Start offset
+            )
+            this.ctx.enableVertexAttribArray(this.base.aVertexPosition)
+            
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.base.panelUVBuffer)
+            this.ctx.vertexAttribPointer(
+                this.base.aTextureCoord,
+                2,
+                this.ctx.FLOAT,
+                false,
+                0,
+                0,
+            )
+            this.ctx.enableVertexAttribArray(this.base.aTextureCoord)
 
-        this.ctx.activeTexture(this.ctx.TEXTURE0)
-        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
-        this.ctx.uniform1i(this.uImageSampler, 0)
+            this.ctx.activeTexture(this.ctx.TEXTURE0)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
+            
+            this.ctx.uniform1i(this.base.uImageSampler, 0)
+            
+            this.ctx.drawArrays(
+                this.ctx.TRIANGLE_STRIP,
+                0, // Vertex offset
+                4, // Total vertex
+            );
+        }
 
-        this.ctx.useProgram(this.baseProgram)
-        
-        this.ctx.drawArrays(
-            this.ctx.TRIANGLE_STRIP,
-            0, // Vertex offset
-            4, // Total vertex
-        );
+        { // Glitch rendering
+            this.ctx.useProgram(this.glitch.program)
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.glitch.glitchPositionBuffer)
+            this.ctx.vertexAttribPointer(
+                this.glitch.glitchPositionBuffer,
+                2, // N components per iteration
+                this.ctx.FLOAT,
+                false, //Normalize,
+                0, // (stride) how many bytes to get from one set of values to the next
+                0, // Start offset
+            )
+            
+            this.ctx.enableVertexAttribArray(this.glitch.aVertexPosition)
+            if(this.canvas.width > this.canvas.height){
+                this.ctx.uniform2f(this.glitch.uImageRatio, 1.0, this.canvas.width/this.canvas.height)
+            } else {
+                this.ctx.uniform2f(this.glitch.uImageRatio, this.canvas.height/this.canvas.width, 1.0)
+            }
+
+            for(let glitch of this.glitches) {
+                this.ctx.uniform2f(this.glitch.uGlitchPosition, glitch.x, glitch.y)
+                this.ctx.uniform1f(this.glitch.uGlitchWidth, glitch.width)
+                this.ctx.drawArrays(
+                    this.ctx.TRIANGLE_STRIP,
+                    0, // Vertex offset
+                    4, // Total vertex
+                );
+            }
+        }
     }
+}
+
+function createProgram(gl, vertSource, fragSource){
+        let vertShader = gl.createShader(gl.VERTEX_SHADER)
+        gl.shaderSource(vertShader, vertSource)
+        gl.compileShader(vertShader)
+
+        if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
+            throw new Error(`failed to compile vertex: ${gl.getShaderInfoLog(vertShader)}`)
+        }
+
+        let fragShader = gl.createShader(gl.FRAGMENT_SHADER)
+        gl.shaderSource(fragShader, fragSource)
+        gl.compileShader(fragShader)
+
+        if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
+            throw new Error(`failed to compile fragment: ${gl.getShaderInfoLog(fragShader)}`)
+        }
+
+        let program = gl.createProgram()
+        gl.attachShader(program, vertShader)
+        gl.attachShader(program, fragShader)
+        gl.linkProgram(program)
+
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(`failed to link shader: ${gl.getProgramInfoLog(program)}`)
+        }
+
+        return program
 }
\ No newline at end of file

From 4a1c77121be1b358813d7853384b4bac025c0ae5 Mon Sep 17 00:00:00 2001
From: EpicKiwi <me@epickiwi.fr>
Date: Tue, 21 Apr 2026 01:08:11 +0200
Subject: [PATCH 4/5] Ajout du noise

---
 v1-com-officielle/glitcher/glitcher.js     |  12 ++-
 v1-com-officielle/glitcher/lib/base.frag   |   1 +
 v1-com-officielle/glitcher/lib/glitch.frag |   9 +-
 v1-com-officielle/glitcher/lib/glitch.vert |   7 +-
 v1-com-officielle/glitcher/lib/glitcher.js | 105 +++++++++++++++++++--
 v1-com-officielle/glitcher/noise-power.png | Bin 0 -> 10552 bytes
 6 files changed, 121 insertions(+), 13 deletions(-)
 create mode 100644 v1-com-officielle/glitcher/noise-power.png

diff --git a/v1-com-officielle/glitcher/glitcher.js b/v1-com-officielle/glitcher/glitcher.js
index 17a9e49..99bd0dc 100644
--- a/v1-com-officielle/glitcher/glitcher.js
+++ b/v1-com-officielle/glitcher/glitcher.js
@@ -14,7 +14,7 @@ async function updateFromForm(){
     } else {
         UI_GLITCHER.clearImage()
     }
-
+    
     UI_GLITCHER.render()
 }
 
@@ -46,7 +46,7 @@ CANVAS.addEventListener("pointerdown", e => {
         let now = Date.now()
 
         if(lastCommit === null || now - lastCommit > 100){
-            let width = 20;
+            let width = 50;
             if(e.pointerType == "touch"){
                 width *= 2
             }
@@ -55,8 +55,8 @@ CANVAS.addEventListener("pointerdown", e => {
             let deltaY = lastY !== undefined ? y - lastY : 0
 
             width += Math.max(Math.abs(deltaX), Math.abs(deltaY))
+            width += Math.random()*2
 
-            //UI_GLITCHER.addGlitch(x + (Math.random() * width) - width/2, y + (Math.random() * width) - width/2, width)
             UI_GLITCHER.addGlitch(x, y, width)
             UI_GLITCHER.render()
 
@@ -82,5 +82,11 @@ CANVAS.addEventListener("pointerdown", e => {
     applyGlitch(e)
 })
 
+/*function startRendering(){
+    UI_GLITCHER.render()
+    requestAnimationFrame(startRendering)
+}
+startRendering()*/
 
+setInterval(() => UI_GLITCHER.render(), 500)
 updateFromForm()
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/lib/base.frag b/v1-com-officielle/glitcher/lib/base.frag
index a5db85e..b497e6e 100644
--- a/v1-com-officielle/glitcher/lib/base.frag
+++ b/v1-com-officielle/glitcher/lib/base.frag
@@ -1,5 +1,6 @@
 varying highp vec2 vTextureCoord;
 uniform sampler2D uImageSampler;
+uniform highp vec2 uWindowSize;
 
 void main() {
     gl_FragColor = texture2D(uImageSampler, vTextureCoord);
diff --git a/v1-com-officielle/glitcher/lib/glitch.frag b/v1-com-officielle/glitcher/lib/glitch.frag
index 45da7f3..7d89115 100644
--- a/v1-com-officielle/glitcher/lib/glitch.frag
+++ b/v1-com-officielle/glitcher/lib/glitch.frag
@@ -1,3 +1,10 @@
+uniform highp vec2 uWindowSize;
+uniform sampler2D uVideoSampler;
+uniform sampler2D uNoiseSampler;
+uniform lowp vec4 uRandom;
+
 void main() {
-    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    gl_FragColor = texture2D(uVideoSampler, gl_FragCoord.xy/uWindowSize.xy)
+        + (texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.zw) - 0.75)
+        * texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.xw);
 }
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/lib/glitch.vert b/v1-com-officielle/glitcher/lib/glitch.vert
index 847dc61..52b3582 100644
--- a/v1-com-officielle/glitcher/lib/glitch.vert
+++ b/v1-com-officielle/glitcher/lib/glitch.vert
@@ -1,9 +1,13 @@
-attribute vec4 aVertexPosition;
+attribute vec2 aVertexPosition;
+attribute vec2 aTextureCoord;
 
 uniform vec2 uGlitchPosition;
 uniform float uGlitchWidth;
+uniform lowp vec4 uRandom;
 uniform vec2 uImageRatio;
 
+varying highp vec2 vTextureCoord;
+
 void main() {
     vec2 vertex = aVertexPosition.xy;
 
@@ -11,6 +15,7 @@ void main() {
     vertex *= 0.001;
     vertex *= uGlitchWidth;
     vertex += uGlitchPosition;
+    vertex += uRandom.xy*0.01;
 
     gl_Position = vec4(vertex, -1.0, 1.0);
 }
diff --git a/v1-com-officielle/glitcher/lib/glitcher.js b/v1-com-officielle/glitcher/lib/glitcher.js
index 4ead33d..fbfb691 100644
--- a/v1-com-officielle/glitcher/lib/glitcher.js
+++ b/v1-com-officielle/glitcher/lib/glitcher.js
@@ -1,5 +1,7 @@
 import resizeToFit from 'intrinsic-scale'
 
+import noiseUrl from "../noise-power.png"
+
 import baseVertSource from "./base.vert?raw"
 import baseFragSource from "./base.frag?raw"
 
@@ -11,17 +13,25 @@ export class Glitcher {
     /** @type {HTMLCanvasElement} */
     canvas
 
-    gliches = []
+    glitches = []
 
     /**
      * @param {HTMLCanvasElement} canvas
      */
     constructor(canvas) {
         this.canvas = canvas
+        this.videoCanvas = new OffscreenCanvas(10, 10);
+        this.video = document.createElement("video")
         this.init()
     }
 
     init(){
+        this.video.muted = true
+        this.video.loop = true
+        this.video.autoplay = true
+        this.video.src = "/background.webm"
+        this.video.addEventListener("canplay", e => this.video.play())
+
         this.ctx = this.canvas.getContext("webgl")
         if(!this.ctx){
             throw new Error("WebGL isn't supported")
@@ -56,13 +66,13 @@ export class Glitcher {
             aVertexPosition: this.ctx.getAttribLocation(baseProgram, "aVertexPosition"),
             aTextureCoord: this.ctx.getAttribLocation(baseProgram, "aTextureCoord"),
             uImageSampler: this.ctx.getUniformLocation(baseProgram, "uImageSampler"),
+            uWindowSize: this.ctx.getUniformLocation(baseProgram, "uWindowSize"),
             imageTexture: imageTexture,
             panelUVBuffer: panelUVBuffer,
-            panelPositionsBuffer: panelPositionBuffer
+            panelPositionsBuffer: panelPositionBuffer,
         }
         this.clearImage();
 
-
         let glitchPositionBuffer = this.ctx.createBuffer()
         this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, glitchPositionBuffer)
         const glitchPosition = [
@@ -72,8 +82,41 @@ export class Glitcher {
             1.0, -1.0,
         ]
         this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(glitchPosition), this.ctx.STATIC_DRAW)
-
+        
         let glitchProgram = createProgram(this.ctx, glitchVertSource, glitchFragSource)
+        let videoFrameTexture = this.ctx.createTexture()
+
+        let noiseTexture = this.ctx.createTexture()
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, noiseTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            1, 1,
+            0,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            new Uint8Array([0, 0, 0, 0])
+        )
+
+        let noiseImage = new Image()
+        noiseImage.addEventListener("load", () => {
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
+            this.ctx.texImage2D(
+                this.ctx.TEXTURE_2D,
+                0,
+                this.ctx.RGBA,
+                this.ctx.RGBA,
+                this.ctx.UNSIGNED_BYTE,
+                noiseImage
+            )
+
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
+        })
+        noiseImage.src = noiseUrl
 
         this.glitch = {
             program: glitchProgram,
@@ -81,12 +124,20 @@ export class Glitcher {
             uGlitchPosition: this.ctx.getUniformLocation(glitchProgram, "uGlitchPosition"),
             uGlitchWidth: this.ctx.getUniformLocation(glitchProgram, "uGlitchWidth"),
             uImageRatio: this.ctx.getUniformLocation(glitchProgram, "uImageRatio"),
-            glitchPositionBuffer: glitchPositionBuffer
+            uWindowSize: this.ctx.getUniformLocation(glitchProgram, "uWindowSize"),
+            uVideoSampler: this.ctx.getUniformLocation(glitchProgram, "uVideoSampler"),
+            uNoiseSampler: this.ctx.getUniformLocation(glitchProgram, "uNoiseSampler"),
+            uRandom: this.ctx.getUniformLocation(glitchProgram, "uRandom"),
+            glitchPositionBuffer: glitchPositionBuffer,
+            videoFrameTexture: videoFrameTexture,
+            noiseTexture: noiseTexture
         }
+
+        console.log(this.glitch)
     }
 
     clearImage(){
-        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
         this.ctx.texImage2D(
             this.ctx.TEXTURE_2D,
             0,
@@ -192,14 +243,39 @@ export class Glitcher {
 
         this.canvas.width = resize.width
         this.canvas.height = resize.height
+        this.videoCanvas.width = this.canvas.width
+        this.videoCanvas.height = this.canvas.height
         this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);
     }
 
+    updateVideoTexture(){
+        let vctx = this.videoCanvas.getContext("2d")
+        vctx.clearRect(0, 0, this.videoCanvas.width, this.videoCanvas.height)
+        vctx.drawImage(this.video, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
+
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            this.videoCanvas
+        )
+
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.LINEAR);
+    }
+
     render(){
         if(!this.ctx){
             throw new Error("Glitcher not initialized, please run init()")
         }
 
+        this.updateVideoTexture()
+
         this.ctx.clearColor(0.0, 0.0, 0.0, 0.0)
         this.ctx.clearDepth(1.0)
         this.ctx.enable(this.ctx.DEPTH_TEST)
@@ -233,7 +309,8 @@ export class Glitcher {
 
             this.ctx.activeTexture(this.ctx.TEXTURE0)
             this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
-            
+
+            this.ctx.uniform2f(this.base.uWindowSize, this.canvas.width, this.canvas.height)
             this.ctx.uniform1i(this.base.uImageSampler, 0)
             
             this.ctx.drawArrays(
@@ -254,8 +331,17 @@ export class Glitcher {
                 0, // (stride) how many bytes to get from one set of values to the next
                 0, // Start offset
             )
-            
             this.ctx.enableVertexAttribArray(this.glitch.aVertexPosition)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE0)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
+            this.ctx.uniform1i(this.glitch.uVideoSampler, 0)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE1)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
+            this.ctx.uniform1i(this.glitch.uNoiseSampler, 1)
+
+            this.ctx.uniform2f(this.glitch.uWindowSize, this.canvas.width, this.canvas.height)
             if(this.canvas.width > this.canvas.height){
                 this.ctx.uniform2f(this.glitch.uImageRatio, 1.0, this.canvas.width/this.canvas.height)
             } else {
@@ -263,6 +349,9 @@ export class Glitcher {
             }
 
             for(let glitch of this.glitches) {
+                this.ctx.uniform4f(this.glitch.uRandom,
+                    Math.random(), Math.random(), Math.random(), Math.random()
+                )
                 this.ctx.uniform2f(this.glitch.uGlitchPosition, glitch.x, glitch.y)
                 this.ctx.uniform1f(this.glitch.uGlitchWidth, glitch.width)
                 this.ctx.drawArrays(
diff --git a/v1-com-officielle/glitcher/noise-power.png b/v1-com-officielle/glitcher/noise-power.png
new file mode 100644
index 0000000000000000000000000000000000000000..47a02c51e1a2bea31b03045517679efb4b9e6ef8
GIT binary patch
literal 10552
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

literal 0
HcmV?d00001


From 13df9c06016b4c751d7817b8f3b1108bf669a990 Mon Sep 17 00:00:00 2001
From: EpicKiwi <me@epickiwi.fr>
Date: Tue, 21 Apr 2026 01:50:53 +0200
Subject: [PATCH 5/5] Ajustement pour une interface minimale

---
 v1-com-officielle/glitcher/glitcher.css    | 21 +++++++-
 v1-com-officielle/glitcher/glitcher.js     | 24 ++++++++-
 v1-com-officielle/glitcher/index.html      |  6 ++-
 v1-com-officielle/glitcher/lib/glitcher.js | 62 +++++++++++++++-------
 4 files changed, 88 insertions(+), 25 deletions(-)

diff --git a/v1-com-officielle/glitcher/glitcher.css b/v1-com-officielle/glitcher/glitcher.css
index 07f1fd5..c11813c 100644
--- a/v1-com-officielle/glitcher/glitcher.css
+++ b/v1-com-officielle/glitcher/glitcher.css
@@ -28,6 +28,12 @@ body, html {
     margin: 0;
 }
 
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
 :root {
     --back-color: black;
     --main-color: white;
@@ -41,6 +47,17 @@ body, html {
     font-weight: bold;
 }
 
+body > *{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+#welcome-panel {
+  text-align: center;
+}
+
 h1 {
     font-family: 'lineal', sans-serif;
     font-weight: bolder;
@@ -48,8 +65,8 @@ h1 {
 
 #ui-canvas {
   display: block;
+  max-width: calc(100vw - 30px);
+  max-height: calc(100vh - 30px);
   margin-left: auto;
   margin-right: auto;
-  max-width: 100vw;
-  max-height: 100vh;
 }
\ No newline at end of file
diff --git a/v1-com-officielle/glitcher/glitcher.js b/v1-com-officielle/glitcher/glitcher.js
index 99bd0dc..df39c63 100644
--- a/v1-com-officielle/glitcher/glitcher.js
+++ b/v1-com-officielle/glitcher/glitcher.js
@@ -9,11 +9,16 @@ async function updateFromForm(){
     
     let image = data.get("image")
     if(image.size > 0){
-        await UI_GLITCHER.setImage(image)
-        UI_GLITCHER.clearGlitch()
+        if(UI_GLITCHER.currentImageFile != image){
+            await UI_GLITCHER.setImage(image)
+            UI_GLITCHER.clearGlitch()
+        }
     } else {
         UI_GLITCHER.clearImage()
     }
+
+    document.getElementById("welcome-panel").hidden = image.size > 0
+    document.getElementById("glitch-panel").hidden = image.size == 0
     
     UI_GLITCHER.render()
 }
@@ -27,6 +32,21 @@ FORM.addEventListener("submit", e => {
         updateFromForm()
     })
 
+FORM.addEventListener("reset", e => {
+        FORM.elements["image"].value = ""
+        updateFromForm()
+    })
+
+document.getElementById("download-btn").addEventListener("click", async e => {
+    e.preventDefault();
+    let data = await UI_GLITCHER.toBlob("image/jpeg", 0.9);
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(data)
+    a.download = UI_GLITCHER.currentImageFile.name
+    a.click()
+    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+})
+
 CANVAS.addEventListener("pointerdown", e => {
     let pointerId = e.pointerId;
 
diff --git a/v1-com-officielle/glitcher/index.html b/v1-com-officielle/glitcher/index.html
index df9a2d5..a5ac87a 100644
--- a/v1-com-officielle/glitcher/index.html
+++ b/v1-com-officielle/glitcher/index.html
@@ -15,8 +15,12 @@
 
             <input type="file" name="image" accept="image/jpg, image/jpeg,image/png,image/webp" />
         </div>
-        <div id="glitch-panel">
+        <div id="glitch-panel" hidden>
             <canvas id="ui-canvas"></canvas>
+            <nav>
+                <button type="reset">Reset</button>
+                <button type="button" id="download-btn">Télécharger</button>
+            </nav>
         </div>
     </form>
 
diff --git a/v1-com-officielle/glitcher/lib/glitcher.js b/v1-com-officielle/glitcher/lib/glitcher.js
index fbfb691..9c83ea7 100644
--- a/v1-com-officielle/glitcher/lib/glitcher.js
+++ b/v1-com-officielle/glitcher/lib/glitcher.js
@@ -221,28 +221,50 @@ export class Glitcher {
         this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
     }
 
-    resize(width, height){
-        let computedStyle = window.getComputedStyle(this.canvas)
-        let maxWidth = parseFloat(computedStyle["max-width"])
-        let maxHeight = parseFloat(computedStyle["max-height"])
-        
-        if(window.devicePixelRatio){
-            maxWidth *= window.devicePixelRatio
-            maxHeight *= window.devicePixelRatio
+    async toBlob(type, quality) {
+        this.resize(this.currentImage.width, this.currentImage.height, true)
+        this.render()
+        let blob = await new Promise((res, rej) => this.canvas.toBlob((imageBlob) => {
+            if(imageBlob){
+                res(imageBlob)
+            } else {
+                rej()
+            }
+        }, type, quality))
+        this.resize(this.currentImage.width, this.currentImage.height, false)
+        return blob
+    }
+
+    resize(width, height, force=false){
+        if(!force){
+
+            let computedStyle = window.getComputedStyle(this.canvas)
+            let maxWidth = parseFloat(computedStyle["max-width"])
+            let maxHeight = parseFloat(computedStyle["max-height"])
+            
+            if(window.devicePixelRatio){
+                maxWidth *= window.devicePixelRatio
+                maxHeight *= window.devicePixelRatio
+            }
+
+            if(Number.isNaN(maxWidth)){
+                maxWidth = width
+            }
+
+            if(Number.isNaN(maxHeight)){
+                maxHeight = height
+            }
+
+            let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
+
+            this.canvas.width = resize.width
+            this.canvas.height = resize.height
+
+        } else {
+            this.canvas.width = width
+            this.canvas.height = height
         }
 
-        if(Number.isNaN(maxWidth)){
-            maxWidth = width
-        }
-
-        if(Number.isNaN(maxHeight)){
-            maxHeight = height
-        }
-
-        let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
-
-        this.canvas.width = resize.width
-        this.canvas.height = resize.height
         this.videoCanvas.width = this.canvas.width
         this.videoCanvas.height = this.canvas.height
         this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);