edit: animation avec js possible mtn, à régler mieux pour plus de précision

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);
+}

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');