Ajout d'entités "glitch" a la scene

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()