edit: background animé réactif à l'ouverture
This commit is contained in:
Binary file not shown.
@@ -8,6 +8,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<!--HORS VUE-->
|
||||
<canvas id="canvas"></canvas>
|
||||
<video autoplay muted loop src="./background.webm" id="background"></video>
|
||||
<div id="mainContainer">
|
||||
<div class="uiStyle" id="topBar">
|
||||
<div class="left">
|
||||
|
||||
@@ -60,6 +60,9 @@
|
||||
|
||||
<script>
|
||||
import { dataStorage } from './dataExchange.js'
|
||||
|
||||
import { cuteAndCyber } from './artAndTexture.js'
|
||||
|
||||
export default {
|
||||
name : 'App',
|
||||
computed: {
|
||||
@@ -92,6 +95,7 @@
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
cuteAndCyber();
|
||||
console.log("Vue root app is fully loaded!");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
+32
-1
@@ -138,6 +138,34 @@ html, body{
|
||||
scrollbar-color: var(--back-color) var(--main-color);
|
||||
scrollbar-width: thin;
|
||||
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{
|
||||
@@ -169,6 +197,7 @@ html, body{
|
||||
.textBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.iconBtnStyle{
|
||||
@@ -457,6 +486,7 @@ html, body{
|
||||
line-height: 1em;
|
||||
text-transform: uppercase;
|
||||
padding-left: 13.12px;
|
||||
mix-blend-mode: exclusion;
|
||||
|
||||
#hackerLogo{
|
||||
width: 77px;
|
||||
@@ -650,7 +680,7 @@ html, body{
|
||||
#aboutText{
|
||||
width: 60%;
|
||||
height: auto;
|
||||
padding-left: 4.44px;
|
||||
padding-left: 13.12px;
|
||||
padding-right: 13.12px;
|
||||
padding-bottom: 13.12px;
|
||||
overflow-y: scroll;
|
||||
@@ -660,6 +690,7 @@ html, body{
|
||||
}
|
||||
@media(min-width: 1300px){
|
||||
height: 50vh;
|
||||
padding-left: 33px;
|
||||
}
|
||||
|
||||
p{
|
||||
|
||||
Reference in New Issue
Block a user