rendu/user/themes/steak/js/alien.js

let canvas = document.getElementById('scene');
let ctx = canvas.getContext("2d");


let resizeCanvas = () => {
  canvas.width = 1275;
  canvas.height = 300;  
}
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
    }
    this.img = new Image();
    this.img.src = "/user/pages/01.home/point.png";

  }

  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();
    // ctx.closePath();

    // this.img.onload = () => {
    //   // console.log('img, x, y', this.img, this.pos.x, this.pos.y);
      ctx.drawImage(this.img, this.pos.x, this.pos.y, 3*this.size, 5*this.size);
    // }
    
    

  }

  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 / 2, // Math.random()*canvas.height,
    10+Math.random()*30
  );
  maboule.draw();
  boules.push(maboule);
}

// for (let index = 0; index < 10000; index++) {
  // createBoule();  
// }

setInterval(()=>{
  createBoule();
}, 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;
  });
}



var greetings = [ "Essaye plus tard", 
"Ma femme me manque", 
"Essaye encore", 
"Pas d'avis", 
"C'est ton destin", 
"Le sort en est jeté", 
"Une chance sur deux", 
"Repose ta question", 
"D'après moi oui", 
"C'est certain",
"Oui absolument", 
"Tu peux compter dessus", 
"Sans aucun doute", 
"Très probable", 
"Oui", 
"C'est bien parti", 
"C'est non",
"Peu probable", 
"Faut pas rêver", 
"N'y compte pas ", 
"Impossible", 
"Je n'ai plus d'espoir", 
"Je suis un steak haché", 
"Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée… Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie… je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi… "
];


//setInterval(changeText, 2000);


//function changeText() 
//{
//    var greeting_id = Math.floor(Math.random() * greetings.length);
//    document.getElementById('speech').innerHTML = greetings[greeting_id];
//    console.log(greeting_id)
//}


//function clickHandler() {
//  const caca = document.getElementById('caca');
//  window.onload = function() {
//    var el = document.getElementById('speech');
//    el.textContent = greetings[greeting_id]
//  }
//}

//function changeText() {
//  document.getElementById("speech").innerHTML = "Text Changed!";
//}



function changeText() {
  const randomIndex = Math.floor(Math.random() * greetings.length);
  const speechDiv = document.getElementById("speech");
  speechDiv.textContent = greetings[randomIndex];
}

document.getElementById("caca").addEventListener("click", () => {
  changeText();
});