114 lines
2.5 KiB
JavaScript
114 lines
2.5 KiB
JavaScript
//Prend l'éléménet Canva
|
|
let canvas = document.getElementById('scene');
|
|
//Dit que la scène est en 2D
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
//modifie la taille
|
|
let resizeCanvas = () => {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
//Applique la modification
|
|
resizeCanvas()
|
|
|
|
let onResize = (envent) => {
|
|
resizeCanvas()
|
|
}
|
|
|
|
window.addEventListener("resize", onResize);
|
|
|
|
//class = majuscule / En gros défini les fonctions des boules unique
|
|
class Boule {
|
|
constructor(x,y,s){
|
|
this.pos = {
|
|
x: x,
|
|
y: y
|
|
}
|
|
this.size = s
|
|
this.vx = -5+Math.random()*10;
|
|
this.vy = -5+Math.random()*10;
|
|
|
|
//j'ai pas compris les ||
|
|
// Collision avec les bords du canvas
|
|
if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
|
|
this.vx *= -1; // inverse la direction horizontale
|
|
}
|
|
|
|
if (this.pos.y + this.size > canvas.height || this.pos.y - this.size < 0) {
|
|
this.vy *= -1; // inverse la direction verticale
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
draw(){
|
|
|
|
var randomColor = getRandomColor();
|
|
|
|
ctx.beginPath();
|
|
//cercle
|
|
ctx.arc(this.pos.x, this.pos.y, this.size, -10+Math.random()*20, 2 * Math.PI);
|
|
//randomcolor
|
|
ctx.fillStyle = randomColor;
|
|
ctx.fill();
|
|
ctx.strokeStyle = randomColor;
|
|
ctx.stroke();
|
|
}
|
|
|
|
move(){
|
|
this.pos.x += this.vx;
|
|
this.pos.y += this.vy;
|
|
|
|
// Collision avec les bords du canvas
|
|
if (this.pos.x + this.size > canvas.width || this.pos.x - this.size < 0) {
|
|
this.vx *= -1;
|
|
}
|
|
|
|
if (this.pos.y + this.size > canvas.height || this.pos.y - this.size < 0) {
|
|
this.vy *= -1;
|
|
}
|
|
|
|
|
|
this.draw();
|
|
}
|
|
}
|
|
|
|
let boules = [];
|
|
let maboule;
|
|
for (let index = 0; index < 10000; index++) {
|
|
maboule = new Boule(
|
|
//dans quelle zone ça spawn
|
|
Math.random()*canvas.width,
|
|
Math.random()*canvas.height,
|
|
//taille
|
|
2+Math.random()*10
|
|
);
|
|
maboule.draw();
|
|
boules.push(maboule);
|
|
|
|
}
|
|
|
|
let anime = () => {
|
|
ctx.clearRect(0,0, canvas.width, canvas.height)
|
|
boules.forEach((boule) => {
|
|
boule.move();
|
|
|
|
})
|
|
window.requestAnimationFrame(anime);
|
|
}
|
|
|
|
//fonction randomcolor
|
|
function getRandomColor() {
|
|
var letters = '0123456789ABCDEF';
|
|
var color = '#';
|
|
for (var i = 0; i < 6; i++) {
|
|
color += letters[Math.floor(Math.random() * 80 )];
|
|
}
|
|
return color;
|
|
}
|
|
|
|
window.requestAnimationFrame(anime);
|
|
|
|
|