120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
let canvas = document.querySelector('#scene');
|
|
|
|
canvas.width = document.body.clientWidth;
|
|
canvas.height = document.body.clientHeight;
|
|
|
|
let ctx = canvas.getContext('2d');
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
|
|
|
|
// les fonctions
|
|
function degToRad(deg) {
|
|
return deg * (Math.PI / 180.0);
|
|
}
|
|
|
|
// les animations
|
|
// une loop ne peut pas fonctionner car l'image ne se rafraîchit pas entre les iteration de boucle
|
|
// for (let index = 0; index < array.length; index++) {
|
|
// }
|
|
// Une classe est un object que l'on va cloner, on va créer des instances de bidule
|
|
// https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
|
|
class Bidule {
|
|
// le constructeur est appelé une fois au moment de new Bidule
|
|
constructor(x, y) {
|
|
// on definie les valeur de départ propre a chauqe instance
|
|
// 'this' correpsond à l'instance, autant de 'this' que d'instance
|
|
this.x = x;
|
|
this.y = y;
|
|
this.a = 360;
|
|
this.vitesse = {
|
|
x:-20+Math.random()*100,
|
|
y:-20+Math.random()*100
|
|
}
|
|
}
|
|
// les methodes sont comme des fonctions mais propres à chaque instance
|
|
bouge(){
|
|
if (this.x <= 0 || this.x >= canvas.width) {
|
|
this.vitesse.x *= -1;
|
|
}
|
|
if (this.y <= 0 || this.y >= canvas.height) {
|
|
this.vitesse.y *= -1;
|
|
}
|
|
this.x += this.vitesse.x;
|
|
this.y += this.vitesse.y;
|
|
this.dessine();
|
|
}
|
|
dessine(){
|
|
}
|
|
}
|
|
|
|
// https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes#cr%C3%A9er_une_sous-classe_avec_extends
|
|
class BiduleRond extends Bidule{
|
|
constructor(r, x, y){
|
|
super(x, y); // appelle le constructeur parent avec le paramètre
|
|
this.r = r;
|
|
// h -> teinte, entre 0° et 360°
|
|
//https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/07-color/img/cercle-colorimetrique.gif
|
|
this.h = Math.random()*360;
|
|
// s -> saturation entre 0% et 100%
|
|
this.s = 80 + Math.random()*20;
|
|
// l -> luminosité entre 0% et 100%
|
|
this.l = 40 + Math.random()*20;
|
|
|
|
this.vs = 0.5;
|
|
}
|
|
|
|
dessine(){
|
|
this.h++;
|
|
if (this.h>360) {
|
|
this.h = 0;
|
|
}
|
|
this.s += this.vs;
|
|
if (this.s <= 0 || this.s >= 100) {
|
|
this.vs *= -1;
|
|
}
|
|
ctx.beginPath();
|
|
ctx.fillStyle = `hsl(${this.h},${this.s}%,${this.l}%)`;
|
|
ctx.arc(this.x, this.y, this.r, 0, degToRad(this.a));
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
}
|
|
}
|
|
|
|
class BiduleCarre extends Bidule{
|
|
|
|
constructor(c, x, y){
|
|
super(x, y); // appelle le constructeur parent avec le paramètre
|
|
this.c = c;
|
|
}
|
|
|
|
dessine(){
|
|
ctx.beginPath();
|
|
ctx.fillStyle = 'black';
|
|
ctx.rect(this.x-this.c/2, this.y-this.c/2, this.c, this.c);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
let mesBidules = [];
|
|
for (let i = 0; i < 100; i++) {
|
|
if (Math.random()>0.5) {
|
|
mesBidules.push(new BiduleRond(2 + Math.random()*18, Math.random()*canvas.width, Math.random()*canvas.height));
|
|
} else {
|
|
mesBidules.push(new BiduleCarre(2 + Math.random()*4, Math.random()*canvas.width, Math.random()*canvas.height));
|
|
}
|
|
}
|
|
|
|
let monAnime = function(){
|
|
// ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
mesBidules.forEach(bidule => {
|
|
bidule.bouge();
|
|
});
|
|
|
|
window.requestAnimationFrame(monAnime);
|
|
}
|
|
|
|
|
|
monAnime(); |