76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
|
|
let canvas = document.getElementById('scene');
|
|
console.log(canvas);
|
|
canvas.height = canvas.clientHeight;
|
|
canvas.width = canvas.clientWidth;
|
|
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
// la taille de nos carres
|
|
let cote = 5;
|
|
|
|
// Je crée ma liste (tableau) de point
|
|
let mespoints = [];
|
|
// j'utilise une boucle pour créer N points
|
|
for (let j = 0; j < 100; j++) {
|
|
// dans chaque boucle je crée un point,
|
|
// un objet {} avec 4 propriétés
|
|
// x position en x de depart
|
|
// y position en y de depart
|
|
// vx vitesse de deplacement en x
|
|
// vy vitesse de deplacement en y
|
|
let p = {
|
|
x: Math.random()*canvas.width,
|
|
y: Math.random()*canvas.height,
|
|
vx: -5 + Math.random()*10,
|
|
vy: -5 + Math.random()*10
|
|
};
|
|
// je rejoute le point dans ma liste (tableau)
|
|
mespoints.push(p)
|
|
}
|
|
|
|
// la fonction qui dessine
|
|
function dessiner(){
|
|
for (let i = 0; i < mespoints.length; i++) {
|
|
|
|
let monpoint = mespoints[i];
|
|
|
|
// teste bord canvas x
|
|
if (monpoint.x < 0 || monpoint.x > canvas.width) {
|
|
monpoint.vx *= -1;
|
|
}
|
|
// on bouge en x
|
|
monpoint.x = monpoint.x + monpoint.vx;
|
|
|
|
// teste bord canvas y
|
|
if (monpoint.y < 0 || monpoint.y > canvas.width) {
|
|
monpoint.vy *= -1;
|
|
}
|
|
// on bouge en y
|
|
monpoint.y = monpoint.y + monpoint.vy;
|
|
|
|
|
|
// on dessine dan le canvas
|
|
ctx.fillRect(
|
|
monpoint.x-cote/2,
|
|
monpoint.y-cote/2,
|
|
cote,
|
|
cote
|
|
)
|
|
}
|
|
}
|
|
|
|
// on anime (dessine et bouge)
|
|
function monAnimationKawaii(){
|
|
ctx.clearRect(0,0, canvas.width, canvas.height)
|
|
dessiner();
|
|
|
|
window.requestAnimationFrame(monAnimationKawaii);
|
|
}
|
|
|
|
|
|
window.requestAnimationFrame(monAnimationKawaii);
|
|
|
|
|
|
|