From 5abb0c9c71554c847ce9af401a017592509bcc48 Mon Sep 17 00:00:00 2001 From: Valentin DUPONT Date: Fri, 8 May 2026 12:21:16 +0000 Subject: [PATCH] =?UTF-8?q?bon=20=C3=A7a=20marche=20pas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 24 ++++++++++ script2 copy.js | 80 ++++++++++++++++++++++++++++++++ script2.js | 118 ++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 77 +++++++++++++++++++++++++++++++ 4 files changed, 299 insertions(+) create mode 100644 index.html create mode 100644 script2 copy.js create mode 100644 script2.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..2d5c2ec --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + Photolallalalala + + + + + + + + + + \ No newline at end of file diff --git a/script2 copy.js b/script2 copy.js new file mode 100644 index 0000000..a9084ca --- /dev/null +++ b/script2 copy.js @@ -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 + ); + } + } +}); \ No newline at end of file diff --git a/script2.js b/script2.js new file mode 100644 index 0000000..20186c2 --- /dev/null +++ b/script2.js @@ -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 + ); + } + } +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0df9272 --- /dev/null +++ b/styles.css @@ -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; +} */