Ajout du shader d'ouverture sur la page d'accueil

index.html

@@ -160,6 +160,7 @@
                </article>
             </section>
       </section>
+      <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
       <canvas class="cute-texture"></canvas>
     </main>
 

js/cuteTexture.js

@@ -110,7 +110,9 @@ const DEFAULT_FRAGMENT_SHADER = `
 /**
  * Initialise un canvas d'arrière plan "CuteTexture" avec les options données
  */
-export function initCuteTexture(){
+export function initCuteTexture(options){
+  let shaderSourceOption = options?.shaderSource;
+
   /** @type {HTMLCanvasElement} */
   const targetCanvas = document.querySelector("canvas[data-cute-texture]") || document.querySelector("canvas.cute-texture") || document.querySelector("canvas");
   if(!targetCanvas)
@@ -128,7 +130,9 @@ export function initCuteTexture(){
   if(ctx == null)
     throw new Error("WebGL n'ext pas supporté sur votre machine")
 
-  let mainShader = initMainShader(ctx)
+  let mainShader = initMainShader(ctx, {
+    shaderSource: shaderSourceOption
+  })
   console.log("Shader CuteTexture initialisé", mainShader)
   
   const initTime = Date.now()
@@ -153,7 +157,9 @@ export function initCuteTexture(){
 /**
  * @param {WebGLRenderingContext} ctx 
  */
-function initMainShader(ctx, oldShader=null){
+function initMainShader(ctx, options){
+  let fragmentShaderCode = options?.shaderSource;
+
   const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
   ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
   ctx.compileShader(vertexShader)
@@ -164,11 +170,11 @@ function initMainShader(ctx, oldShader=null){
     return null
   }
 
-  let fragmentShaderCode;
-  let fragmentShaderCodeElement = document.querySelector(`script[type="x-shader/glsl+fragment"]`);
-  if(fragmentShaderCodeElement){
-    fragmentShaderCode = fragmentShaderCodeElement.innerHTML
-  } else {
+  if(!fragmentShaderCode){
+    fragmentShaderCode = getDocumentShaderSource(document);
+  }
+
+  if(!fragmentShaderCode){
     fragmentShaderCode = DEFAULT_FRAGMENT_SHADER
   }
 
@@ -229,13 +235,6 @@ function initMainShader(ctx, oldShader=null){
     }
   }
 
-  if(oldShader){
-    ctx.deleteProgram(oldShader.program)
-    ctx.deleteShader(oldShader.vertexShader)
-    ctx.deleteShader(oldShader.fragmentShader)
-    ctx.deleteBuffer(oldShader.vertexIndexBuffer)
-  }
-
   const vertexIndexBuffer = ctx.createBuffer()
   ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexIndexBuffer)
   ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([0, 1, 2]), ctx.STATIC_DRAW)
@@ -244,7 +243,6 @@ function initMainShader(ctx, oldShader=null){
     program: shaderProgram,
     vertexShader,
     fragmentShader,
-    fragmentShaderElement: fragmentShaderCodeElement,
     videoElement,
     videoTexture,
     aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"),
@@ -344,3 +342,7 @@ function renderCuteTexture(target, mainShader, initTime){
   
   ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3);
 }
+
+export function getDocumentShaderSource(doc=document){
+  return doc.querySelector(`script[type="x-shader/glsl+fragment"]`)?.innerHTML
+}

js/main.js

@@ -2,12 +2,18 @@ import { loadEvents } from './events.js'
 import { loadStatus } from './status.js'
 import { initCuteTexture } from './cuteTexture.js'
 
-// =================================== background texture
-initCuteTexture()
-
 // ======================================== events & statut d'ouverture
 loadEvents();
-loadStatus();
+loadStatus()
+  .then((status) => {
+    console.log("Status actuel du LOL", status);
+
+    let cuteTexture = initCuteTexture({
+      shaderSource: status.shaderSource
+    });
+
+    cuteTexture.target.style.visibility = "visible"
+  });
 
 // ======================================== floating event window
 

js/status.js

@@ -1,4 +1,4 @@
-import { statusProxy } from './main.js'
+import { getDocumentShaderSource } from './cuteTexture.js';
 
 export async function loadStatus(){
   let res = await fetch('/status/index.html');
@@ -6,6 +6,8 @@ export async function loadStatus(){
   let html_text = await res.text()
   let html = new DOMParser().parseFromString(html_text, "text/html");
   
+  let shaderSource = getDocumentShaderSource(html);
+
   let target = document.querySelector('#statuSection');
 
   let hiddenBtn = target.querySelector('a');
@@ -15,13 +17,7 @@ export async function loadStatus(){
   let status = html.querySelector('#lolStatus');
   console.log('current status:', status.innerText);
 
-
-  if (status.innerText.includes('ouvert')){
-    statusProxy.lolStatus = true;
-  }else{
-    statusProxy.lolStatus = false;
-  }
-
+  let isOpen = status.innerText.includes('ouvert');
 
   let icon = html.querySelector('link[rel="icon"]');
   let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
@@ -31,4 +27,6 @@ export async function loadStatus(){
   document.head.append(style);
 
   target.appendChild(status);
+
+  return { open: isOpen, shaderSource };
 }

status/index.fermé.html

@@ -45,7 +45,7 @@ void main() {
         rotatedColor.x*opacity,
         rotatedColor.y*opacity,
         rotatedColor.z*opacity,
-        opacity
+        1.0
     );
 }
     </script>

status/index.ouvert.html

@@ -52,7 +52,7 @@ void main() {
         1.0
     );
 
-    highp vec2 videoCoords = vTextureCoord.xy / 2.0 + vec2(0, 0.45);
+    highp vec2 videoCoords = (vTextureCoord.xy / 1.5) + vec2(0, 0.25);
     highp vec4 videoPix = clamp(( grayscale(texture2D(uVideo, videoCoords), 1.0) * 2.0 ), vec4(0), vec4(1));
     videoPix *= 0.777;
 

style/main.css

@@ -104,12 +104,7 @@ video{
   width: auto;
   position: absolute;
   inset: 0;
-  z-index: -30;
-}
-
-.closedBackground{
-  opacity: .5;
-  mix-blend-mode: exclusion;
+  z-index: -32;
 }
 
 .openBackground{
@@ -505,9 +500,5 @@ canvas{
   width: auto;
   position: absolute;
   inset: 0;
-  z-index: -32;
-
-  opacity: .5;
-  filter: hue-rotate(13.12deg);
-  mix-blend-mode: multiply;
+  z-index: -30;
 }