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