bsc/clubinfo-2024-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: b.soussi-chiadmi:e55d00a0a5af35149bd006a0bd8c52ec24b44988
Branches Tags
b.soussi-chiadmi:master
..
compare: b.soussi-chiadmi:724b7008902f13fe5412ee244942da5cd80cf650
Branches Tags
b.soussi-chiadmi:master

4 Commits
e55d00a0a5 ... 724b700890

Author SHA1 Message Date
bach
724b700890 oop 2024-12-06 16:29:59 +01:00
bach
e29a2b96c1 canvas & requestanimationframe MORE 2024-12-06 15:52:07 +01:00
bach
826c811e48 canvas & requestanimationframe 2024-12-06 15:15:42 +01:00
bach
cd00950b2c hsla 2024-12-06 15:15:21 +01:00
4 changed files with 89 additions and 1 deletions
Show Stats Expand all files Collapse all files

9
cours_vanilla_js/script.js
View File

@ -141,7 +141,14 @@ for (let i = 0; i < nbr_rond; i++) {
// l -> luminosité entre 0% et 100% // l -> luminosité entre 0% et 100%
let l = 40 + Math.random()*20; let l = 40 + Math.random()*20;
monrond.style.backgroundColor = `hsl(${h},${s}%,${l}%)`; // monrond.style.backgroundColor = `hsl(${h},${s}%,${l}%)`;
// et avec une transparence (alpha)
// hsla
// a -> alpha entre 0 (trensparent) et 1 (opaque)
let a = (5 + Math.random()*5)/10; // alpha entre 0.5 et 1
monrond.style.backgroundColor = `hsla(${h},${s}%,${l}%,${a})`; // /!\ hsla pas hsl
body.append(monrond); body.append(monrond);
} }

14
oop/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="scene"></canvas>
<script src="script.js"></script>
</body>
</html>

62
oop/script.js Normal file
View File

@ -0,0 +1,62 @@
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
class Bidule {
// le constructeur est appeler une fois au moment de new Bidule
constructor(r, x, y) {
// on definie les valeur de départ propre a chauqe instance
// 'this' correpsond a l'instance, autant de 'this' que d'instance
this.r = r;
this.x = x;
this.y = y;
this.a = 360;
this.vitesse = {
x:-2+Math.random()*4,
y:-2+Math.random()*4
}
}
// les methodes sont comme des fonction mais propre a chaque instance
bouge(){
this.x += this.vitesse.x;
this.y += this.vitesse.y;
this.dessine();
}
dessine(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, degToRad(this.a));
ctx.fill();
}
}
let mesBidules = [];
for (let i = 0; i < 2000; i++) {
mesBidules.push(new Bidule(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();

5
oop/styles.css Normal file
View File

@ -0,0 +1,5 @@
body{
margin: 0;
width:100vw;
height:100vh;
}