vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Première version GPU des effets de fond

Browse Source
This commit is contained in:
epickiwi
2026-08-02 15:31:55 +02:00
parent 9f67c28bc0
commit 3e7c9475e5
7 changed files with 363 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
status/closedStyle.css
+16 -1
View File
@@ -4,13 +4,28 @@
}
/*======================= Page Statut LOL fermé ===*/
#lolIsClosed{
#lolIsClosed {
position: relative;
top: 0;
left: 0;
margin: 0;
width: 100vw;
height: 100vh;
background-color: var(--main-color);
#closedContainer {
padding: 15px;
box-sizing: border-box;
}
.cute-texture {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
}
#closedContainer{
status/index.fermé.html
+37
View File
@@ -10,11 +10,48 @@
<title>Le LOL est Fermé ...</title>
</head>
<body id="lolIsClosed">
<canvas data-cute-texture class="cute-texture"></canvas>
<main id="closedContainer">
<section>
<p>Le LOL est actuellement</p>
<h3 id="lolStatus">fermé ...</h3>
</section>
</main>
<script type="x-shader/glsl+fragment">
// Some random values computed for each frame
uniform highp vec4 uRandom;
// Size (in logical pixel) of current CuteTexture canvas
uniform highp vec2 uCanvasSize;
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
varying highp vec2 vTextureCoord;
void main() {
highp float pixelSize = 50.0;
highp vec2 coords = floor((uCanvasSize.xy * vTextureCoord.xy) / pixelSize);
highp float lum = (noise1(uRandom.yz+coords) * 0.631372549);
lowp float opacity = 0.5;
highp vec3 baseColor = vec3(
0.0,
lum,
lum
);
highp vec3 rotatedColor = hue_rotate(baseColor, 13.12);
gl_FragColor = vec4(
rotatedColor.x*opacity,
rotatedColor.y*opacity,
rotatedColor.z*opacity,
opacity
);
}
</script>
<script type="module">
import {initCuteTexture} from "../js/cuteTexture.js"
initCuteTexture()
</script>
</body>
</html>
status/index.ouvert.html
+39
View File
@@ -11,11 +11,50 @@
<title>Le LOL est Ouvert</title>
</head>
<body id="lolIsOpen">
<canvas data-cute-texture class="cute-texture"></canvas>
<main id="openContainer">
<section>
<p>Le LOL est actuellement</p>
<h3 id="lolStatus">ouvert !</h3>
</section>
</main>
<script type="x-shader/glsl+fragment">
// Some random values computed for each frame
uniform highp vec4 uRandom;
// Size (in logical pixel) of current CuteTexture canvas
uniform highp vec2 uCanvasSize;
// Number of seconds since canvas was initialized
uniform lowp float uTime;
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
varying highp vec2 vTextureCoord;
void main() {
highp float waveSize = 10.0;
highp vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize;
highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
lowp float opacity = 0.5;
highp vec3 baseColor = vec3(
0.0,
lum,
0.0
);
highp vec3 rotatedColor = hue_rotate(baseColor, 13.12);
gl_FragColor = vec4(
rotatedColor.x*opacity,
rotatedColor.y*opacity,
rotatedColor.z*opacity,
opacity
);
}
</script>
<script type="module">
import {initCuteTexture} from "../js/cuteTexture.js"
initCuteTexture()
</script>
</body>
</html>
status/openStyle.css
+17 -1
View File
@@ -29,13 +29,29 @@
}
/*======================= Page Statut LOL ouvert ===*/
#lolIsOpen{
#lolIsOpen {
position: relative;
top: 0;
left: 0;
margin: 0;
width: 100vw;
height: 100vh;
background-color: var(--main-color);
#openContainer {
padding: 15px;
box-sizing: border-box;
}
.cute-texture, .cute-texture-video {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
}
#openContainer{