valentin.dupont/Pixel_Plante
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bon ça marche pas

Browse Source
This commit is contained in:
Valentin DUPONT 2026-05-08 12:21:16 +00:00
commit 5abb0c9c71
4 changed files with 299 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photolallalalala</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- <div class="fond">
<img src="./img/test_fond.jpg">
</div> -->
<!-- <div class="opa"></div>
<div class="img">
<img src="./img/test_remplacement.jpg">
</div> -->
<canvas id="canva"></canvas>
<!-- <img src="./img/JV01.jpg" class="remplacement-img" id="remplacement-img">
<div class="divBase">
</div> -->
<script src="script2.js"></script>
</body>
</html>

80
script2 copy.js Normal file
View File

@ -0,0 +1,80 @@
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
);
}
}
});

118
script2.js Normal file
View File

@ -0,0 +1,118 @@
//Importer canva
const canvas = document.getElementById("canva");
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);
// 1. Définir la liste des images
const allImages = [
"./img/001.JPG",
"./img/JV01.jpg",
"./img/real01.jpg",
"./img/rdrd2.jpg",
"./img/real02.JPG",
"./img/Cyberpunk_01.png",
"./img/rdrd3.jpg",
"./img/Fleur_02.JPG",
"./img/Fleur_08.JPG",
"./img/rdrd4.jpg",
"./img/Forêt_2.JPG"
];
// 2. Pré-charger toutes les images
const loadedImages = [];
let imagesLoaded = 0;
allImages.forEach(src => {
const img = new Image();
img.src = src;
img.onload = () => {
loadedImages.push(img);
imagesLoaded++;
if (imagesLoaded === allImages.length) {
startAnimation();
}
};
});
let currentImageIndex = 0; // image de base (fond)
let tps = 0;
let lastTime = 0;
function startAnimation() {
requestAnimationFrame(update);
}
function update(currentTime) {
const deltaTime = currentTime - lastTime;
lastTime = currentTime;
tps += (-0.00 + Math.random() * 0.01) * deltaTime;
tps = Math.max(0, Math.min(100, tps));
draw(tps);
// Quand tps atteint 100, passer à l'image suivante
if (tps >= 100 && currentImageIndex < allImages.length - 1) {
currentImageIndex++;
tps = 0;
// Boucle infinie : si on est à la dernière image, revenir à la première
if (currentImageIndex >= allImages.length - 1) {
currentImageIndex = 0;
}
}
requestAnimationFrame(update);
}
function draw(tps) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 1. Dessiner le FOND (image actuelle : allImages[currentImageIndex])
const backgroundImg = loadedImages[currentImageIndex];
ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);
// 2. Dessiner les carrés avec l'image SUIVANTE (allImages[currentImageIndex + 1])
const nextImageIndex = currentImageIndex + 1;
if (nextImageIndex < loadedImages.length) {
const nextImg = loadedImages[nextImageIndex];
const cols = 100;
const rows = 100;
const cellWidth = canvas.width / cols;
const cellHeight = canvas.height / rows;
const fillCount = Math.floor((tps / 100) * cols * rows);
const positions = [];
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
positions.push({ x, y });
}
}
// Mélanger
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 avec l'image suivante
for (let i = 0; i < fillCount; i++) {
const { x, y } = positions[i];
const posX = x * cellWidth;
const posY = y * cellHeight;
ctx.drawImage(
nextImg,
posX, posY, cellWidth, cellHeight,
posX, posY, cellWidth, cellHeight
);
}
}
}

77
styles.css Normal file
View File

@ -0,0 +1,77 @@
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
background-image: url("./img/001.JPG");
}
/*
.remplacement-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0;
}
.divBase {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.x_div {
width: 10%;
height: 10%;
margin: 0;
position: absolute;
background-color: transparent;
mix-blend-mode: screen;
display: flex;
overflow: hidden;
} */
/* .x_div.filled {
background-color: black;
mix-blend-mode: screen;
opacity: 1; */
/* mask-image: url("./img/test_remplacement.jpg");
mask-size: cover;
mask-position: center; */
/* } */
/* .img {
margin: 0;
position: relative;
width: 100vw;
height: 100vh;
} */
/* .img img {
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
} */
/* .opa {
position: absolute;
width: 100vw;
height: 100vh;
} */
/* .grid-div {
margin: 0;
position: absolute;
width: 1%;
height: 1%;
box-sizing: border-box;
display: flex;
pointer-events: none;
background-image: url(./img/test_fond.jpg);
background-size: 10000% 10000%;
background-repeat: no-repeat;
} */