first commit :D
This commit is contained in:
commit
13e6f240a3
14
club-info/base-js/base.html
Normal file
14
club-info/base-js/base.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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>
|
||||
78
club-info/base-js/script.js
Normal file
78
club-info/base-js/script.js
Normal file
@ -0,0 +1,78 @@
|
||||
console.log('hello');
|
||||
|
||||
let x = 5
|
||||
let a = 10
|
||||
let b = 2
|
||||
let y;
|
||||
|
||||
y = a*x + b;
|
||||
console.log(y);
|
||||
|
||||
console.log(outerHeight);
|
||||
|
||||
let leprenomdelours = 'hubert';
|
||||
console.log(leprenomdelours);
|
||||
let leprenomduloup = 'maurice';
|
||||
console.log (leprenomduloup);
|
||||
|
||||
let letitredemacomptine = leprenomdelours + "&" + leprenomduloup;
|
||||
console.log(letitredemacomptine);
|
||||
|
||||
|
||||
console.log('document',document);
|
||||
|
||||
let balle = document.createElement('div');
|
||||
balle.classList.add('balle');
|
||||
body.prepend(balle);
|
||||
|
||||
let boules = [];
|
||||
for (let index = 0; index < 200; index=index+1) {
|
||||
boules[index] = document.createElement('div');
|
||||
boules[index].classList.add('boule');
|
||||
|
||||
boules[index].style.backgroundColor = 'hsl(150 30 60)';
|
||||
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"} 80 80)';
|
||||
|
||||
|
||||
boules[index].style.top = Math.random()*850+"px";
|
||||
boules[index].style.left = Math.random()*1650+"px";
|
||||
|
||||
let rayon = 40 + Math.random()*60;
|
||||
boules[index].style.witdh = rayon+'px';
|
||||
boules[index].style.height = rayon+'px';
|
||||
boules[index].style.borderRadius = (rayon/12)+'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 = 3;
|
||||
} else {
|
||||
vitesse_x = vitesse_y = -3;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
19
club-info/base-js/styles.css
Normal file
19
club-info/base-js/styles.css
Normal file
@ -0,0 +1,19 @@
|
||||
body {background-color: rebeccapurple
|
||||
}
|
||||
|
||||
div.balle{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 70px;
|
||||
background-color: rgba(194, 65, 65, 0.863);
|
||||
}
|
||||
div.boule{
|
||||
position:absolute;
|
||||
width: 70px;
|
||||
height: 500px;
|
||||
border-radius: 10px;
|
||||
background-color: rosybrown;
|
||||
opacity: 0.7;
|
||||
|
||||
|
||||
}
|
||||
16
club-info/canva/index.html
Normal file
16
club-info/canva/index.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OOP</title>
|
||||
<link rel="stylesheet" href="styles.css"
|
||||
</head>
|
||||
<body>
|
||||
<h1>hii</h1>
|
||||
|
||||
<canvas id="scene"> </canvas>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
151
club-info/canva/script.js
Normal file
151
club-info/canva/script.js
Normal file
@ -0,0 +1,151 @@
|
||||
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);
|
||||
|
||||
|
||||
class Boule {
|
||||
constructor (x,y,s) {
|
||||
this.pos = {
|
||||
x:x,
|
||||
y:y,
|
||||
}
|
||||
this.size = s
|
||||
this.vx = -2+Math.random()*4;
|
||||
this.vy = -2+Math.random()*4;
|
||||
this.color = {
|
||||
h:360,
|
||||
s:50,
|
||||
l:50
|
||||
}
|
||||
}
|
||||
|
||||
draw(){
|
||||
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.fill();
|
||||
/*ctx.fillStyle = "red";
|
||||
ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
|
||||
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,
|
||||
canvas.height / 2,
|
||||
2+Math.random()*10
|
||||
);
|
||||
maboule.draw();
|
||||
boules.push(maboule);
|
||||
}
|
||||
|
||||
setInterval(()=>{
|
||||
createBoule();
|
||||
},100)
|
||||
|
||||
let anime = () =>{
|
||||
ctx.clearRect(0,0, canvas.width, canvas.height)
|
||||
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)
|
||||
);
|
||||
|
||||
if(dist < boule_a.size+boule_b.size){
|
||||
|
||||
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);
|
||||
|
||||
|
||||
/*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
club-info/canva/styles.css
Normal file
16
club-info/canva/styles.css
Normal file
@ -0,0 +1,16 @@
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 10em;
|
||||
}
|
||||
|
||||
canvas#scene{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/*width: 100%;
|
||||
height: 100%;*/
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user