134 lines
2.3 KiB
JavaScript
134 lines
2.3 KiB
JavaScript
|
|
let canvas = document.getElementById('scene');
|
|
console.log(canvas);
|
|
canvas.height = canvas.clientHeight;
|
|
canvas.width = canvas.clientWidth;
|
|
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
|
|
// function mafunction(){
|
|
// }
|
|
|
|
// let mafunction = function(){}
|
|
|
|
// let mafonction = () => {}
|
|
|
|
// la taille de nos carres
|
|
let cote = 5;
|
|
|
|
class Point {
|
|
constructor() {
|
|
this.pos = {
|
|
x: Math.random()*canvas.width,
|
|
y: Math.random()*canvas.height
|
|
}
|
|
this.vitesse = {
|
|
x: -5 + Math.random()*10,
|
|
y: -5 + Math.random()*10
|
|
}
|
|
};
|
|
bouger(){
|
|
// teste bord canvas x
|
|
if (this.pos.x < 0 || this.pos.x > canvas.width) {
|
|
this.vitesse.x *= -1;
|
|
}
|
|
// on bouge en x
|
|
this.pos.x = this.pos.x + this.vitesse.x;
|
|
|
|
// teste bord canvas y
|
|
if (this.pos.y < 0 || this.pos.y > canvas.width) {
|
|
this.pos.y *= -1;
|
|
}
|
|
// on bouge en y
|
|
this.pos.y = this.pos.y + this.vitesse.y;
|
|
};
|
|
}
|
|
|
|
class Carre extends Point{
|
|
constructor(){
|
|
super()
|
|
this.cote = 5 + Math.random()*5;
|
|
}
|
|
bouger(){
|
|
super.bouger();
|
|
this.dessiner();
|
|
}
|
|
|
|
dessiner(){
|
|
// console.log("Point, dessiner", this);
|
|
ctx.fillRect(
|
|
this.pos.x-cote/2,
|
|
this.pos.y-cote/2,
|
|
cote,
|
|
cote
|
|
)
|
|
};
|
|
}
|
|
|
|
|
|
class Triangle extends Point{
|
|
constructor(){
|
|
super()
|
|
this.arrete = 5 + Math.random()*5;
|
|
}
|
|
bouger(){
|
|
super.bouger();
|
|
this.dessiner();
|
|
}
|
|
dessiner(){
|
|
// console.log("Point, dessiner", this);
|
|
|
|
};
|
|
}
|
|
|
|
class Rond extends Point{
|
|
constructor(){
|
|
super()
|
|
this.rayon = 5 + Math.random()*5;
|
|
}
|
|
bouger(){
|
|
super.bouger();
|
|
this.dessiner();
|
|
}
|
|
dessiner(){
|
|
// console.log("Point, dessiner", this);
|
|
|
|
};
|
|
}
|
|
|
|
|
|
// 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++) {
|
|
let r =Math.random();
|
|
if (r > 0.7) {
|
|
mespoints.push(new Carre)
|
|
}else if(r > 0.3){
|
|
mespoints.push(new Triangle)
|
|
}else{
|
|
mespoints.push(new Rond)
|
|
}
|
|
|
|
}
|
|
console.log('mespoints', mespoints);
|
|
|
|
|
|
// on anime (dessine et bouge)
|
|
function monAnimationKawaii(){
|
|
ctx.clearRect(0,0, canvas.width, canvas.height)
|
|
|
|
for (let i = 0; i < mespoints.length; i++) {
|
|
mespoints[i].bouger();
|
|
}
|
|
|
|
window.requestAnimationFrame(monAnimationKawaii);
|
|
}
|
|
|
|
|
|
window.requestAnimationFrame(monAnimationKawaii);
|
|
|
|
|
|
|