167 lines
3.5 KiB
JavaScript
167 lines
3.5 KiB
JavaScript
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
|
|
}
|
|
this.img = new Image();
|
|
this.img.src = "images/clement.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;
|
|
});
|
|
}
|
|
|
|
window.addEventListener('mousemove', onMouseMove); |