71 lines
2.1 KiB
HTML
71 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/svg" href="../assets/favicon_open.svg" />
|
|
<!-- STYLE A IMPORTER EN 1ER -->
|
|
<link rel="stylesheet" href="/status/openStyle.css">
|
|
|
|
<link rel="stylesheet" href="../style/animation.css">
|
|
<title>Le LOL est Ouvert</title>
|
|
</head>
|
|
<body id="lolIsOpen">
|
|
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
|
|
<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;
|
|
// Current frame of first video with [data-cute-texture-video] attribute
|
|
uniform sampler2D uVideo;
|
|
// 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.25;
|
|
|
|
gl_FragColor = vec4(
|
|
0.0,
|
|
lum,
|
|
0.0,
|
|
1.0
|
|
);
|
|
|
|
gl_FragColor = vec4(
|
|
gl_FragColor.rgb * opacity,
|
|
1.0
|
|
);
|
|
|
|
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;
|
|
|
|
gl_FragColor = abs( (videoPix*1.2) - gl_FragColor );
|
|
|
|
gl_FragColor.xyz *= 0.9;
|
|
|
|
gl_FragColor.a = 1.0;
|
|
}
|
|
</script>
|
|
|
|
<script type="module">
|
|
import {initCuteTexture} from "../js/cuteTexture.js"
|
|
initCuteTexture()
|
|
</script>
|
|
</body>
|
|
</html>
|