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

edit: background animé réactif à l'ouverture

Browse Source
This commit is contained in:
Vega
2026-07-05 23:50:23 +02:00
parent 45b54193d6
commit b7a7583ad0
5 changed files with 185 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
background.webm
BIN
View File
Binary file not shown.
index.html
+2
View File
@@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<!--HORS VUE--> <!--HORS VUE-->
<canvas id="canvas"></canvas>
<video autoplay muted loop src="./background.webm" id="background"></video>
<div id="mainContainer"> <div id="mainContainer">
<div class="uiStyle" id="topBar"> <div class="uiStyle" id="topBar">
<div class="left"> <div class="left">
src/App.vue
+4
View File
@@ -60,6 +60,9 @@
<script> <script>
import { dataStorage } from './dataExchange.js' import { dataStorage } from './dataExchange.js'
import { cuteAndCyber } from './artAndTexture.js'
export default { export default {
name : 'App', name : 'App',
computed: { computed: {
@@ -92,6 +95,7 @@
} }
}, },
mounted(){ mounted(){
cuteAndCyber();
console.log("Vue root app is fully loaded!"); console.log("Vue root app is fully loaded!");
} }
}; };
src/artAndTexture.js
+147
View File
@@ -0,0 +1,147 @@
import { lolState } from './lolStatus.js'
const arr = []
for (let i = 0; i < 256; i++){
arr.push(i)
}
function createPermTable(){
let data = [...arr]
//console.log('base :', arr)
for (let i = data.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[data[i], data[j]] = [data[j], data[i]];
}
//console.log('result :', permutationTable)
return data
}
const perm = createPermTable();
const p = [...perm, ...perm];
const F2 = 0.5 * (Math.sqrt(3) - 1); // Skew factor for 2D
const G2 = (3 - Math.sqrt(3)) / 6; // Unskew factor for 2D
const scale = 0.7
const target = document.querySelector('#canvas');
const ctx = target.getContext('2d');
// 12 gradient vectors for 2D Simplex Noise
const grad3 = [
[1, 1], [-1, 1], [1, -1], [-1, -1],
[1, 0], [-1, 0], [0, 1], [0, -1],
[1, 2], [-1, 2], [2, 1], [-2, 1]
];
function simplex(x, y) {
// Step 1: Skew input coordinates to simplex grid
const s = (x + y) * F2; // Skew factor
const i = Math.floor(x + s); // Simplex grid i
const j = Math.floor(y + s); // Simplex grid j
// Step 2: Unskew to get (x0, y0) in Cartesian space (distance to (i,j))
const t = (i + j) * G2;
const x0 = x - (i - t); // Unskewed x in [0,1)
const y0 = y - (j - t); // Unskewed y in [0,1)
// Step 3: Determine which simplex (triangle) the point is in
let i1, j1; // Offsets for the other two simplex vertices
if (x0 > y0) {
i1 = 1; j1 = 0; // Lower triangle (x0 > y0)
} else {
i1 = 0; j1 = 1; // Upper triangle (x0 ≤ y0)
}
// Step 4: Coordinates of the other two simplex vertices
const x1 = x0 - i1 + G2; // Distance to (i+i1, j+j1)
const y1 = y0 - j1 + G2;
const x2 = x0 - 1 + 2 * G2; // Distance to (i+1, j+1)
const y2 = y0 - 1 + 2 * G2;
// Step 5: Hash indices for the 3 simplex vertices
const ii = i & 255;
const jj = j & 255;
const gi0 = p[ii + p[jj]] % 12; // (i,j) gradient index
const gi1 = p[ii + i1 + p[jj + j1]] % 12; // (i+i1,j+j1) gradient index
const gi2 = p[ii + 1 + p[jj + 1]] % 12; // (i+1,j+1) gradient index
// Step 6: Compute contributions from each vertex
let t0 = 0.5 - x0 * x0 - y0 * y0; // Falloff (t^4 fade)
const n0 = t0 < 0 ? 0 : Math.pow(t0, 4) * (grad3[gi0][0] * x0 + grad3[gi0][1] * y0);
let t1 = 0.5 - x1 * x1 - y1 * y1;
const n1 = t1 < 0 ? 0 : Math.pow(t1, 4) * (grad3[gi1][0] * x1 + grad3[gi1][1] * y1);
let t2 = 0.5 - x2 * x2 - y2 * y2;
const n2 = t2 < 0 ? 0 : Math.pow(t2, 4) * (grad3[gi2][0] * x2 + grad3[gi2][1] * y2);
// Step 7: Sum contributions and normalize (2D Simplex ranges ~[-1, 1])
return 70 * (n0 + n1 + n2); // 70 scales to ~[-1, 1]
}
function analogLikeNoise(){
let tH = target.height;
let tW = target.width;
//console.log('window dimensions :', tH, tW)
const img = ctx.createImageData(tW, tH);
let offset = 0;
let index = 0;
let brightness = 0;
for(let x = 0; x<tW; x++){
const sx = x * scale + offset
for(let y = 0; y<tH; y++){
let lum = Math.random()*200
//img.data[index++] = lum;
index++
img.data[index++] = lum;
img.data[index++] = lum;
img.data[index++] = 255;
}
}
ctx.putImageData(img, 0, 0);
offset ++;
if(offset>1024){
offset = 0;
}
}
let time = 0
function scanlines(){
time += 0.05;
let tH = target.height;
let tW = target.width;
//console.log('window dimensions :', tH, tW)
const img = ctx.createImageData(tW, tH);
let index = 0;
for(let y = 0; y<tH; y++){
for(let x = 0; x<tW; x++){
let lum = (Math.sin(y*2 - time *2) * 50) +128;
//img.data[index++] = lum;
index++;
img.data[index++] = lum + Math.random()*16;
//img.data[index++] = lum + Math.random()*32;
index++
img.data[index++] = 255;
}
}
ctx.putImageData(img, 0, 0);
}
export function cuteAndCyber(){
if(!(lolState.isOpen)){
document.querySelector('#background').style.visibility = 'hidden';
analogLikeNoise();
requestAnimationFrame(cuteAndCyber);
}else{
scanlines();
document.querySelector('#background').style.visibility = 'visible';
requestAnimationFrame(cuteAndCyber);
}
}
src/style.css
+32 -1
View File
@@ -138,6 +138,34 @@ html, body{
scrollbar-color: var(--back-color) var(--main-color); scrollbar-color: var(--back-color) var(--main-color);
scrollbar-width: thin; scrollbar-width: thin;
z-index: -33; z-index: -33;
}
#canvas{
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: screen;
z-index: -2;
opacity: .25;
}
#background{
position: fixed;
right: 0;
bottom: 0;
width: auto;
height: 200%;
overflow: hidden;
pointer-events: none;
z-index: -1;
opacity: 1;
visibility: hidden;
filter: contrast(200%) saturate(333%) grayscale();
transform: rotate(180deg);
mix-blend-mode: difference;
} }
#mainContainer{ #mainContainer{
@@ -169,6 +197,7 @@ html, body{
.textBtnStyle:hover{ .textBtnStyle:hover{
background-color: var(--main-color); background-color: var(--main-color);
color: var(--back-color); color: var(--back-color);
font-weight: bold;
} }
.iconBtnStyle{ .iconBtnStyle{
@@ -457,6 +486,7 @@ html, body{
line-height: 1em; line-height: 1em;
text-transform: uppercase; text-transform: uppercase;
padding-left: 13.12px; padding-left: 13.12px;
mix-blend-mode: exclusion;
#hackerLogo{ #hackerLogo{
width: 77px; width: 77px;
@@ -650,7 +680,7 @@ html, body{
#aboutText{ #aboutText{
width: 60%; width: 60%;
height: auto; height: auto;
padding-left: 4.44px; padding-left: 13.12px;
padding-right: 13.12px; padding-right: 13.12px;
padding-bottom: 13.12px; padding-bottom: 13.12px;
overflow-y: scroll; overflow-y: scroll;
@@ -660,6 +690,7 @@ html, body{
} }
@media(min-width: 1300px){ @media(min-width: 1300px){
height: 50vh; height: 50vh;
padding-left: 33px;
} }
p{ p{