From 81f39a62a25d26f9a0a19debf669f0c2a5daab08 Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Thu, 30 Jul 2026 21:24:37 +0200
Subject: [PATCH] =?UTF-8?q?edit:=20animation=20avec=20js=20possible=20mtn,?=
 =?UTF-8?q?=20=C3=A0=20r=C3=A9gler=20mieux=20pour=20plus=20de=20pr=C3=A9ci?=
 =?UTF-8?q?sion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html        |  1 +
 js/cuteTexture.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++
 js/main.js        | 20 +++++++++++++
 readMe.MD         |  2 ++
 style/main.css    | 11 ++++++++
 5 files changed, 105 insertions(+)
 create mode 100644 js/cuteTexture.js

diff --git a/index.html b/index.html
index 44452a1..195f569 100644
--- a/index.html
+++ b/index.html
@@ -483,6 +483,7 @@
       <video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
       <video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
       <video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
+      <canvas></canvas>
     </main>
 
     <section class="floatingWindow" id="posterWindow">
diff --git a/js/cuteTexture.js b/js/cuteTexture.js
new file mode 100644
index 0000000..5a1c95e
--- /dev/null
+++ b/js/cuteTexture.js
@@ -0,0 +1,71 @@
+const target = document.querySelector('canvas');
+
+const ctx = target.getContext('2d');
+
+export let lolState = false;
+
+let scale = 0.7;
+
+function analogLikeNoise(){
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let offset = 0;
+  let index = 0;
+  let brightness = 0;
+
+  for(let x = 0; x<tW; x++){
+    const sx = x * scale + offset
+    for(let y = 0; y<tH; y++){
+      let lum = Math.random()*161
+
+      //img.data[index++] = lum*150/255;
+      index++
+      img.data[index++] = lum;
+      img.data[index++] = lum;
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+
+  offset ++;
+  if(offset>1024){
+    offset = 0;
+  }
+}
+
+let time = 0
+
+function scanlines(){
+  time += 0.05;
+  let tH = target.height;
+  let tW = target.width;
+  //console.log('window dimensions :', tH, tW)
+  const img = ctx.createImageData(tW, tH);
+  let index = 0;
+
+  for(let y = 0; y<tH; y++){
+    for(let x = 0; x<tW; x++){
+      let lum = (Math.sin(y*2 - time*3.1415) * 44) + 77;
+
+      //img.data[index++] = lum;
+      index++;
+      img.data[index++] = lum;
+      //img.data[index++] = lum + Math.random()*32;
+      index++
+      img.data[index++] = 255;
+      }
+    }
+  ctx.putImageData(img, 0, 0);
+}
+
+export function scanlinesAnimation(){
+    scanlines();
+    requestAnimationFrame(scanlinesAnimation);
+}
+
+export function noiseAnimation(){
+    analogLikeNoise();
+    requestAnimationFrame(noiseAnimation);
+}
diff --git a/js/main.js b/js/main.js
index ca42fe1..5ce4fa9 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,8 +1,28 @@
 import { loadEvents } from './events.js'
 import { loadStatus } from './status.js'
+import { scanlinesAnimation } from './cuteTexture.js'
+import { noiseAnimation } from './cuteTexture.js'
 
 loadEvents();
 loadStatus();
+/*
+// =================================== background texture
+ let textureVideo = document.querySelectorAll('main > #texture');
+
+for (let video of textureVideo){
+  video.style.visibility = 'collapse';
+}
+
+let textureCanvas = document.querySelector('main > canvas');
+textureCanvas.style.visibility = 'visible';
+
+console.log(textureCanvas);
+
+//console.log(textureVideo)
+
+scanlinesAnimation();
+// ======================================== stops here !
+*/
 
 let target = document.querySelector('#posterWindow');
 
diff --git a/readMe.MD b/readMe.MD
index d532ff6..2bf3fe5 100644
--- a/readMe.MD
+++ b/readMe.MD
@@ -13,3 +13,5 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont
 >(***) mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire)
         modifier le lien vers le dossier au lieu de ''index.ouvert.html' dans la page principale
         changer le fetch dans status.js
+
+> problème de gestion des évènement tactiles, rien ne marche ...
diff --git a/style/main.css b/style/main.css
index 162c8a0..5e222d1 100644
--- a/style/main.css
+++ b/style/main.css
@@ -537,3 +537,14 @@ main{
   align-items: center;
   justify-content: space-around;
 }
+
+canvas{
+  visibility: collapse;
+  height: 110%;
+  width: auto;
+  position: absolute;
+  inset: 0;
+  z-index: -32;
+
+  opacity: 1;
+}