From dc2f0013b04b8dfb38ebaa4f6bc9c949b45afa34 Mon Sep 17 00:00:00 2001 From: EpicKiwi Date: Sun, 2 Aug 2026 15:28:53 +0200 Subject: [PATCH] Ajout du shader d'ouverture sur la page d'accueil --- index.html | 1 + js/cuteTexture.js | 34 ++++++++++++++++++---------------- js/main.js | 14 ++++++++++---- js/status.js | 14 ++++++-------- status/index.fermé.html | 2 +- status/index.ouvert.html | 2 +- style/main.css | 13 ++----------- 7 files changed, 39 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index 848c3dc..e8c9450 100644 --- a/index.html +++ b/index.html @@ -160,6 +160,7 @@ + diff --git a/js/cuteTexture.js b/js/cuteTexture.js index 85adc8e..d503688 100644 --- a/js/cuteTexture.js +++ b/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"), @@ -343,4 +341,8 @@ 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 } \ No newline at end of file diff --git a/js/main.js b/js/main.js index fbd0dd0..10b2a25 100644 --- a/js/main.js +++ b/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 diff --git a/js/status.js b/js/status.js index 908f38f..e3cbaa8 100644 --- a/js/status.js +++ b/js/status.js @@ -1,10 +1,12 @@ -import { statusProxy } from './main.js' +import { getDocumentShaderSource } from './cuteTexture.js'; export async function loadStatus(){ let res = await fetch('/status/index.html'); let html_text = await res.text() let html = new DOMParser().parseFromString(html_text, "text/html"); + + let shaderSource = getDocumentShaderSource(html); let target = document.querySelector('#statuSection'); @@ -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 }; } diff --git a/status/index.fermé.html b/status/index.fermé.html index 48eea8b..17be483 100644 --- a/status/index.fermé.html +++ b/status/index.fermé.html @@ -45,7 +45,7 @@ void main() { rotatedColor.x*opacity, rotatedColor.y*opacity, rotatedColor.z*opacity, - opacity + 1.0 ); } diff --git a/status/index.ouvert.html b/status/index.ouvert.html index 4eb5b6e..2416098 100644 --- a/status/index.ouvert.html +++ b/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; diff --git a/style/main.css b/style/main.css index f578d06..69f08fd 100644 --- a/style/main.css +++ b/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; }