louise.guedin/clubinfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

premierCommit

Browse Source
This commit is contained in:
Louise GUEDIN 2025-11-14 18:35:31 +01:00
commit a9b6097373
14 changed files with 686 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
bases-js copie/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 id="body">
<script src="script.js"></script>
</body>
</html>

158
bases-js copie/script.js Normal file
View File

@ -0,0 +1,158 @@
console.log('Salut :)');
// Les variables
// fonction d'une droite
// y = ax + b
// x et y sont des variables
// variable type number
let x = 3;
let a = 2;
let b = 23;
let y;
y = a*x + b;
console.log(y);
console.log(outerHeight);
// variable string (chaine de charactères)
let leprenomdelours = "hubert";
console.log(leprenomdelours);
let leprenomduloup = "maurice";
console.log(leprenomduloup);
// concatenation
let letritredemacomptine = leprenomdelours + " & " + leprenomduloup;
console.log(letritredemacomptine);
console.log(a + letritredemacomptine);
// boolean (vrai ou faux)
// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique)
let jesuisunevache = false;
let youaregreat = true;
console.log(jesuisunevache, youaregreat);
// comparaison
let lalignedescend = a < 0;
console.log("lalignedescend", lalignedescend);
// random (Aleatoire)
let unnombrealeatoire = 50 + Math.random() * 50;
// Array (tableau)
let malistedecourses = [
"beurre",
"salade",
"glace",
10,
true
];
console.log("malistedecourses", malistedecourses[0]);
// Object (objet)
let malistedecourseencoremieux = {
"biocoop": "l'adresse de biocoop",
"intermarcher": 99,
"salut": false
}
console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop);
// nested (imbriquer)
let objectarraynested = {
"biocoop":[
{'beurre':1},
{'yahourt':10}
],
'leclerc':[
{'essence':10}
]
}
console.log("objectarraynested", objectarraynested);
// comment afficher des trucs
// créer un element html virtuel
console.log('document', document);
let body = document.getElementById('body');
console.log('body', body);
let h = Math.random()*360;
let s = Math.random()*100;
let l = Math.random()*100;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;
// Les boucles
let boules = [];
for (let index = 0; index < 250; index=index+2) {
boules[index] = document.createElement('div');
boules[index].classList.add('boule');
// boules[index].style.backgroundColor = 'rgb(255,0,255)';
// HSL Hue Saturation Luminosity
//boules[index].style.backgroundColor = 'hsl(180 50 50)';
//boules[index].style.backgroundColor = 'hsl(180 50 '+index+')';
boules[index].style.backgroundColor = `hsl(65 50 ${index})`;
//boules[index].style.backgroundColor = `hsl(180 ${index} 50)`;
//boules[index].style.backgroundColor = `hsl(${index*3.6} 50 50)`;
boules[index].style.top = Math.random()*700+"px";
boules[index].style.left = Math.random()*1500+"px";
//let rayon = 20 + Math.random()*15;
let boc = 20 + Math.random()*20;
boules[index].style.width = boc+"px";
boules[index].style.height = boc+"px";
boules[index].style.borderRadius = (boc/2)+"px"
body.append(boules[index]);
}
console.log('boules', boules);
let monanime = () => {
let i = 0;
boules.forEach((boule) => {
let impair = i%2;
let vitesse_x;
let vitesse_y;
if (impair) {
vitesse_x = vitesse_y = -1.5;
} else {
vitesse_x = vitesse_y = -1;
}
boule.style.bottom = (boule.offsetBottom+vitesse_x)+"px";
boule.style.top = (boule.offsetTop+vitesse_y)+"px";
i++;
});
window.requestAnimationFrame(monanime);
}
console.log('boules[0]', boules[0]);
window.requestAnimationFrame(monanime);

35
bases-js copie/styles.css Normal file
View File

@ -0,0 +1,35 @@
body{
background-color: aqua;
}
h1{
font-weight: 900;
font-size: 240px;
}
div.balle{
position: absolute;
width: 20px;
height:20px;
border-radius: 10px;
background-color: black;
}
div.boule{
position: absolute;
width: 10px;
height:200px;
border-radius: 10px;
background-color: red;
opacity: 0.9;
}
div.carre{
position: absolute;
width: 10px;
height:200px;
border-radius: 10px;
background-color: red;
opacity: 0.6;
}

14
bases-js/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 id="body">
<script src="script.js"></script>
</body>
</html>

121
bases-js/script.js Normal file
View File

@ -0,0 +1,121 @@
console.log('Salut :)');
// Les variables
// fonction d'une droite
// y = ax + b
// x et y sont des variables
// variable type number
let x = 3;
let a = 2;
let b = 23;
let y;
y = a*x + b;
console.log(y);
console.log(outerHeight);
// variable string (chaine de charactères)
let leprenomdelours = "hubert";
console.log(leprenomdelours);
let leprenomduloup = "maurice";
console.log(leprenomduloup);
// concatenation
let letritredemacomptine = leprenomdelours + " & " + leprenomduloup;
console.log(letritredemacomptine);
console.log(a + letritredemacomptine);
// boolean (vrai ou faux)
// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique)
let jesuisunevache = false;
let youaregreat = true;
console.log(jesuisunevache, youaregreat);
// comparaison
let lalignedescend = a < 0;
console.log("lalignedescend", lalignedescend);
// random (Aleatoire)
let unnombrealeatoire = 50 + Math.random() * 50;
// Array (tableau)
let malistedecourses = [
"beurre",
"salade",
"glace",
10,
true
];
console.log("malistedecourses", malistedecourses[0]);
// Object (objet)
let malistedecourseencoremieux = {
"biocoop": "l'adresse de biocoop",
"intermarcher": 99,
"salut": false
}
console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop);
// nested (imbriquer)
let objectarraynested = {
"biocoop":[
{'beurre':1},
{'yahourt':10}
],
'leclerc':[
{'essence':10}
]
}
console.log("objectarraynested", objectarraynested);
// comment afficher des trucs
// créer un element html virtuel
console.log('document', document);
let body = document.getElementById('body');
console.log('body', body);
let h = Math.random()*360;
let s = Math.random()*100;
let l = Math.random()*100;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;
let balle = document.createElement('div');
balle.classList.add('balle');
body.prepend(balle);
// Les boucles
let boules = [];
for (let index = 0; index < 100; index=index+1) {
boules[index] = document.createElement('div');
boules[index].classList.add('boule');
// boules[index].style.backgroundColor = 'rgb(255,0,255)';
// HSL Hue Saturation Luminosity
// boules[index].style.backgroundColor = 'hsl(180 50 50)';
// boules[index].style.backgroundColor = 'hsl(180 50 '+index+')';
// boules[index].style.backgroundColor = `hsl(180 50 ${index})`;
// boules[index].style.backgroundColor = `hsl(180 ${index} 50)`;
boules[index].style.backgroundColor = `hsl(${index*3.6} 50 50)`;
boules[index].style.top = Math.random()*700+"px";
boules[index].style.left = Math.random()*700+"px";
let rayon = 20 + Math.random()*30;
boules[index].style.width = rayon+"px";
boules[index].style.height = rayon+"px";
boules[index].style.borderRadius = (rayon/2)+"px"
body.append(boules[index]);
}
console.log('boules', boules);

23
bases-js/styles.css Normal file
View File

@ -0,0 +1,23 @@
body{
background-color: aqua;
}
h1{
font-weight: 900;
font-size: 240px;
}
div.balle{
width: 20px;
height:20px;
border-radius: 10px;
background-color: black;
}
div.boule{
position: absolute;
width: 10px;
height:10px;
border-radius: 10px;
background-color: red;
}

BIN
oop copie/image/transparent2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
oop copie/image/transparent3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

15
oop copie/index.html Normal file
View File

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

171
oop copie/script.js Normal file
View File

@ -0,0 +1,171 @@
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;
// this.color = 'hsl(360, 50%, 50%)'
this.color = {
h:360,
s:50,
l:50
}
}
draw(){
// console.log('draw', this);
ctx.beginPath();
ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
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;
if(this.pos.x >= canvas.width || this.pos.x <= 0){
this.vx *= -1;
}
if(this.pos.y >= canvas.height || this.pos.y <= 0){
this.vy *= -1;
}
this.draw();
}
}
let boules = [];
let maboule;
function createBoule(){
maboule = new Boule(
canvas.width / 2, // Math.random()*canvas.width,
canvas.height / 5, // Math.random()*canvas.height,
2+Math.random()*10
);
maboule.draw();
boules.push(maboule);
}
function createBoule2(){
maboule = new Boule(
canvas.width / 6, // Math.random()*canvas.width,
canvas.height /6, // Math.random()*canvas.height,
2+Math.random()*10
);
maboule.draw();
boules.push(maboule);
}
// for (let index = 0; index < 10000; index++) {
// createBoule();
// }
setInterval(()=>{
createBoule();
createBoule2();
}, 1000)
let anime = () => {
ctx.clearRect(0,0, canvas.width, canvas.height)
// boules.forEach((boule_a) => {
for (let i = 0; i < boules.length; i++) {
let boule_a = boules[i];
for (let j = i+1; j < boules.length; j++) {
let boule_b = boules[j];
// distance entre les centre des boules
let dist = Math.sqrt(
Math.pow(boule_b.pos.x - boule_a.pos.x, 2) +
Math.pow(boule_b.pos.y - boule_a.pos.y, 2)
);
// console.log('dist', dist);
if(dist < boule_a.size+boule_b.size){
// console.log('ça touche');
// distance inferieure a la somme des deux rayons
// ça touche
// boule_a.vx *= -1;
// boule_a.vy *= -1;
// boule_b.vx *= -1;
// boule_b.vy *= -1;
nx = (boule_b.pos.x - boule_a.pos.x)/dist;
ny = (boule_b.pos.y - boule_a.pos.y)/dist;
vA_n = boule_a.vx*nx + boule_a.vy*ny
vB_n = boule_b.vx*nx + boule_b.vy*ny
boule_a.vx += (vB_n - vA_n) * nx
boule_a.vy += (vB_n - vA_n) * ny
boule_b.vx += (vA_n - vB_n) * nx
boule_b.vy += (vA_n - vB_n) * ny
boule_a.move();
boule_b.move();
}
}
boule_a.move();
}
window.requestAnimationFrame(anime);
}
window.requestAnimationFrame(anime);
let onMouseMove = (event) => {
// console.log('event', event);
// h 0 -> 360
// x 0 -> canvas.width
let h = 360 * (event.x / canvas.width);
//console.log('h', h);
let s = 100 * (event.y / canvas.height)
//console.log('s', s);
boules.forEach(boule => {
boule.color.h = h;
boule.color.s = s;
});
}
window.addEventListener('mousemove', onMouseMove);

26
oop copie/styles.css Normal file
View File

@ -0,0 +1,26 @@
body{
margin: 0;
background-color: blue;
}
h1{
font-size: 18em;
}
canvas#scene{
position: absolute;
z-index: 10;
top:0;
left:0;
/* width: 100%;
height:100%; */
}
#animation {
background-repeat: no-repeat;
height: 102px;
width: 140px;
}

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>OOP</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- <h1>Salut</h1> -->
<canvas id="scene"></canvas>
<script src="script.js"></script>
</body>
</html>

79
oop/script.js Normal file
View File

@ -0,0 +1,79 @@
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);

16
oop/styles.css Normal file
View File

@ -0,0 +1,16 @@
body{
margin: 0;
}
h1{
font-size: 18em;
}
canvas#scene{
position: absolute;
z-index: 10;
top:0;
left:0;
/* width: 100%;
height:100%; */
}