club_info_yeahhh/base_JS/script.js

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 cube = document.createElement('div');
cube.classList.add('cube');
//cube.style.color = `hsl(${index*3.6} 50 50)`;
//cube.style.top =  200+ Math.random()*400+"px";
//cubestyle.left = 200 + Math.random()*400+"px";
body.append(cube);



//  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()*1200+"px";
  boules[index].style.left = Math.random()*2500+"px";

  let rayon = 20 + Math.random()*50;
  boules[index].style.width = rayon+"px";
  boules[index].style.height = rayon+"px";
  boules[index].style.borderRadius = (rayon/2)+"px";
  //boules[index].style.mixBlendMode = "screen";
  //boules[index].style.backgroundBlendMode = "screen"    
  body.append(boules[index]);boules;
}


//  version carré mo
let carré = [];
for (let index = 0; index < 50; index=index+1) {
  carré[index] = document.createElement('div');
  carré[index].classList.add('carré');
  carré[index].style.backgroundColor = `hsl(${index*2.0} 50 50)`;

  carré[index].style.top =  200+ Math.random()*400+"px";
  carré[index].style.left = 200 + Math.random()*400+"px";

  carré[index].style.width = Math.random()*200+"px";
  carré[index].style.height = Math.random()*200+"px";
  carré[index].style.mixBlendMode = "screen";
  carré[index].style.opacity = Math.random()*100+"%"; 
  //carré[index].style.backgroundBlendMode = "screen"    
  body.append(carré[index]);
}
console.log('carré', carré);


// une fonction
// function unefunctiontest(){
// } 
// c'est pareille que :
// let unefunctiontest = function() {
// }
// la version moderne

let unefunctiontest = (test, unautre) => {
  // entre les deux accolades : le block de code executer a chaque fois que la function est appelée
  console.log('test: ',test);
  console.log('unautre: ',unautre);
};
// on appele la function avec des arguments
unefunctiontest(45, 'babar');


// let fonctionpourchaqueboule = (boule) => {    
// }
// boules.forEach(fonctionpourchaqueboule);

let monanime = () => {
  // console.log('frame');
  let i = 0;
  boules.forEach((boule) => {
    // console.log('boule',boule);
    let impair = i%2;

    let vitesse_x;
    let vitesse_y;
    let haut;
    if (impair) {
      //vitesse_x = vitesse_y = 1 + Math.random()*i;
      vitesse_x = vitesse_y = 1;
      //boules.style.mixBlendMode = "screen";
    } else {
      //vitesse_x = vitesse_y = -1 - Math.random()*-i;
      vitesse_x = vitesse_y = -1;
      //boules.style.mixBlendMode = "lunminosity";
    }

    boule.style.left = (boule.offsetLeft+vitesse_x)+"px";  
    boule.style.top = (boule.offsetTop+vitesse_y)+"px";  

    i++;
  });


  
  window.requestAnimationFrame(monanime);
}
console.log('boules[0]', boules[0]);
 
window.requestAnimationFrame(monanime);