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">

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

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 ...

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