160 lines
4.2 KiB
JavaScript
160 lines
4.2 KiB
JavaScript
console.log("SCRIPT CHARG2");
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
const canvas = document.getElementById("scene");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// tout l'écran
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener("resize", resize);
|
|
|
|
// img
|
|
const imageSources = [
|
|
"images/img1.jpg",
|
|
"images/img2.jpg",
|
|
"images/img3.jpg",
|
|
"images/img4.jpg",
|
|
"images/img5.jpg",
|
|
"images/img6.jpg",
|
|
"images/img7.jpg",
|
|
"images/img8.jpg",
|
|
"images/img9.jpg",
|
|
"images/img10.jpg",
|
|
"images/img11.jpg",
|
|
"images/img12.jpg",
|
|
"images/img13.jpg",
|
|
"images/img14.jpg",
|
|
"images/img15.jpg",
|
|
"images/img16.jpg",
|
|
"images/img17.jpg",
|
|
"images/img18.jpg",
|
|
"images/img19.jpg",
|
|
"images/img21.jpg",
|
|
"images/img22.jpg",
|
|
"images/img24.jpg",
|
|
"images/img25.jpg",
|
|
"images/img26.jpg",
|
|
"images/img27.jpg",
|
|
"images/img28.jpg",
|
|
"images/img29.jpg"
|
|
];
|
|
|
|
const images = {};
|
|
imageSources.forEach(src => {
|
|
const img = new Image();
|
|
img.src = src;
|
|
images[src] = img;
|
|
});
|
|
|
|
// points
|
|
const nodes = Array.from({ length: 100 }).map(() => ({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
r: 20 + Math.random() * 6, // taille aléatoire
|
|
image: imageSources[Math.floor(Math.random() * imageSources.length)]
|
|
}));
|
|
|
|
// variabes globales
|
|
let mouse = { x: -1000, y: -1000 };
|
|
let activeNode = null;
|
|
let lastActiveImage = null;
|
|
let transition = 0;
|
|
let movingImages = [];
|
|
|
|
// pour détecter la souris
|
|
canvas.addEventListener("mousemove", e => {
|
|
mouse.x = e.clientX;
|
|
mouse.y = e.clientY;
|
|
});
|
|
|
|
// quand on survole un point
|
|
function detectHover() {
|
|
activeNode = null;
|
|
|
|
nodes.forEach(n => {
|
|
const dx = mouse.x - n.x;
|
|
const dy = mouse.y - n.y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < n.r + 20) activeNode = n;
|
|
});
|
|
|
|
if (activeNode) {
|
|
// souris sur un point : réinitialiser images
|
|
lastActiveImage = images[activeNode.image];
|
|
if (movingImages.length === 0) {
|
|
// création d'images flottantes
|
|
movingImages = Array.from({ length: 5 }).map(() => ({
|
|
img: lastActiveImage,
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
dx: (Math.random() - 0.5) * 2,
|
|
dy: (Math.random() - 0.5) * 2,
|
|
scale: 0.1 + Math.random() * 0.2
|
|
}));
|
|
}
|
|
} else {
|
|
// souris pas sur point : tout disparaît
|
|
lastActiveImage = null;
|
|
movingImages = [];
|
|
transition = 0;
|
|
}
|
|
}
|
|
|
|
// points invisibles
|
|
function drawNodes() {
|
|
nodes.forEach(n => {
|
|
ctx.beginPath();
|
|
ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = (n === activeNode) ? "black" : "rgba(0,0, 0, 0)";
|
|
ctx.fill();
|
|
});
|
|
}
|
|
|
|
// image cebtrale
|
|
function drawTraversal() {
|
|
if (!lastActiveImage) return;
|
|
|
|
transition += 0.02;
|
|
const img = lastActiveImage;
|
|
if (!img.complete) return;
|
|
|
|
const scale = 1 + transition * 2;
|
|
ctx.globalAlpha = 1;
|
|
ctx.drawImage(
|
|
img,
|
|
canvas.width / 2 - (img.width * scale) / 2,
|
|
canvas.height / 2 - (img.height * scale) / 2,
|
|
img.width * scale,
|
|
img.height * scale
|
|
);
|
|
}
|
|
|
|
// images flottantes
|
|
function drawMovingImages() {
|
|
movingImages.forEach(m => {
|
|
m.x += m.dx;
|
|
m.y += m.dy;
|
|
|
|
if (m.x < 0 || m.x > canvas.width - m.img.width * m.scale) m.dx *= -1;
|
|
if (m.y < 0 || m.y > canvas.height - m.img.height * m.scale) m.dy *= -1;
|
|
|
|
ctx.drawImage(m.img, m.x, m.y, m.img.width * m.scale, m.img.height * m.scale);
|
|
});
|
|
}
|
|
|
|
// boucle d'anim
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
detectHover();
|
|
drawNodes();
|
|
drawTraversal();
|
|
drawMovingImages();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
}); |