79 lines
1.3 KiB
JavaScript
79 lines
1.3 KiB
JavaScript
let canvas = document.getElementById('scene');
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
|
|
let resizeCanvas = () => {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas()
|
|
|
|
|
|
let onResize = (event) => {
|
|
resizeCanvas()
|
|
}
|
|
|
|
window.addEventListener('resize', onResize);
|
|
|
|
// ctx.fillStyle = "green";
|
|
// ctx.fillRect(300, 300, 100, 100);
|
|
|
|
|
|
|
|
|
|
class Boule {
|
|
constructor(x, y, s) {
|
|
// this.x = x;
|
|
// this.y = y;
|
|
this.pos = {
|
|
x: x,
|
|
y: y
|
|
}
|
|
this.size = s
|
|
this.vx = -2+Math.random()*4;
|
|
this.vy = -2+Math.random()*4;
|
|
}
|
|
|
|
draw(){
|
|
// console.log('draw', this);
|
|
ctx.beginPath();
|
|
ctx.fillStyle = 'red';
|
|
ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
|
|
// ctx.fillRect(300, 300, 100, 100);
|
|
ctx.fill();
|
|
}
|
|
|
|
move(){
|
|
this.pos.x += this.vx;
|
|
this.pos.y += this.vy;
|
|
this.draw();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
let boules = [];
|
|
let maboule;
|
|
for (let index = 0; index < 10000; index++) {
|
|
maboule = new Boule(
|
|
Math.random()*canvas.width,
|
|
Math.random()*canvas.height,
|
|
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);
|
|
}
|
|
|
|
window.requestAnimationFrame(anime); |