80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const canvas = document.getElementById("myCanvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// Redimensionner le canvas à la taille de l'écran
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener("resize", resizeCanvas);
|
|
|
|
// Charger l'image de remplacement
|
|
const replacementImg = new Image();
|
|
replacementImg.src = "./img/JV01.jpg";
|
|
replacementImg.onload = () => {
|
|
// Lancer l'animation une fois l'image chargée
|
|
let tps = 0;
|
|
let lastTime = 0;
|
|
|
|
function update(currentTime) {
|
|
const deltaTime = currentTime - lastTime;
|
|
lastTime = currentTime;
|
|
|
|
tps += (-0.03 + Math.random() * 0.08) * deltaTime * 0.5;
|
|
tps = Math.max(0, Math.min(100, tps));
|
|
|
|
draw(tps);
|
|
requestAnimationFrame(update);
|
|
}
|
|
requestAnimationFrame(update);
|
|
};
|
|
|
|
function draw(tps) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Dessiner l'image de fond (optionnel)
|
|
// ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);
|
|
|
|
// Calculer le nombre de carrés
|
|
const cols = 100; // Nombre de colonnes
|
|
const rows = 100; // Nombre de lignes
|
|
const cellWidth = canvas.width / cols;
|
|
const cellHeight = canvas.height / rows;
|
|
|
|
// Nombre de carrés à remplir
|
|
const fillCount = Math.floor((tps / 100) * cols * rows);
|
|
|
|
// Créer une liste de positions et les mélanger
|
|
const positions = [];
|
|
for (let y = 0; y < rows; y++) {
|
|
for (let x = 0; x < cols; x++) {
|
|
positions.push({ x, y });
|
|
}
|
|
}
|
|
// Mélanger les positions
|
|
for (let i = positions.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[positions[i], positions[j]] = [positions[j], positions[i]];
|
|
}
|
|
|
|
// Dessiner les carrés remplis
|
|
for (let i = 0; i < fillCount; i++) {
|
|
const { x, y } = positions[i];
|
|
const posX = x * cellWidth;
|
|
const posY = y * cellHeight;
|
|
|
|
// Dessiner un rectangle noir (ou l'image)
|
|
ctx.fillStyle = "black";
|
|
ctx.fillRect(posX, posY, cellWidth, cellHeight);
|
|
|
|
// Dessiner l'image de remplacement dans le carré
|
|
ctx.drawImage(
|
|
replacementImg,
|
|
posX, posY, cellWidth, cellHeight,
|
|
posX, posY, cellWidth, cellHeight
|
|
);
|
|
}
|
|
}
|
|
}); |