girault/WIM
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ajout

Browse Source
This commit is contained in:
girault
2022-05-17 12:35:25 +02:00
parent 8e1ed459d1
commit aa1b224c56
6 changed files with 275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
WIM4.1/tp/tp4/ex2/ballon.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="./ballon.js">
</script>
</body>
</html>

107
WIM4.1/tp/tp4/ex2/ballon.js Normal file
View File

@@ -0,0 +1,107 @@
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const c = canvas.getContext('2d')
const circlesCount = 300
const maxRadius = 40
const circleArray = []
let areaMouse = new Array();
let aura = 150;
const colorArray = [
'#046975',
'#2EA1D4',
'#3BCC2A',
'#FFDF59',
'#FF1D47'
]
const init = () => {
circleArray.length = 0
for (let i = 0; i < circlesCount; i++) {
const radius = Math.random() *maxRadius +1 ;
const x = Math.random() * (innerWidth - radius * 2) + radius
const y = Math.random() * (innerHeight - radius * 2) + radius
const dx = (Math.random() - 0.5) * 2
const dy = (Math.random() - 0.5) * 2
circleArray.push(new Circle(x, y, dx, dy, radius))
}
}
const Circle = function(x, y, dx, dy, radius) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.radius = radius
this.minRadius = radius
this.color = colorArray[Math.floor(Math.random() * colorArray.length)]
this.draw = function() {
// A completer
c.fillStyle = this.color;
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
c.fill();
c.stroke();
c.closePath()
}
this.update = function() {
// A completer
this.x += dx;
this.y += dy;
if( this.x <= areaMouse["Xmax"] && this.x >= areaMouse["Xmin"] // vérifie si l'élément est autour de la souris
&& this.y <= areaMouse["Ymax"] && this.y >= areaMouse["Ymin"] )
{
this.radius = maxRadius;
}
else {
this.radius = this.minRadius;
}
if(this.x+this.radius >= canvas.width|| this.x <= this.radius) { // vérifie si on touche les murs sur les côtés
dx *= -1;
}
if(this.y+this.radius >= canvas.height || this.y <=this.radius) { // vérifie si on touche le sol ou le plafond
dy *= -1;
}
this.draw();
}
}
const animate = () => {
c.clearRect(0, 0, innerWidth, innerHeight)
for (let i = 0; i < circleArray.length; i++) {
circleArray[i].update()
}
requestAnimationFrame(animate)
}
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
areaMouse["Xmin"] = event.clientX - aura;
areaMouse["Xmax"] = event.clientX + aura;
areaMouse["Ymin"] = event.clientY - aura;
areaMouse["Ymax"] = event.clientY + aura;
}
init()
animate()

62
WIM4.1/tp/tp4/ex2/ballon.tmp.js Normal file
View File

@@ -0,0 +1,62 @@
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const c = canvas.getContext('2d')
const circlesCount = 300
const maxRadius = 40
const circleArray = []
const colorArray = [
'#046975',
'#2EA1D4',
'#3BCC2A',
'#FFDF59',
'#FF1D47'
]
const init = () => {
circleArray.length = 0
for (let i = 0; i < circlesCount; i++) {
const radius = Math.random() *maxRadius +1 ;
const x = Math.random() * (innerWidth - radius * 2) + radius
const y = Math.random() * (innerHeight - radius * 2) + radius
const dx = (Math.random() - 0.5) * 2
const dy = (Math.random() - 0.5) * 2
circleArray.push(new Circle(x, y, dx, dy, radius))
}
}
const Circle = function(x, y, dx, dy, radius) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.radius = radius
this.minRadius = radius
this.color = colorArray[Math.floor(Math.random() * colorArray.length)]
this.draw = function() {
// A completer
}
this.update = function() {
// A completer
this.draw()
}
}
const animate = () => {
c.clearRect(0, 0, innerWidth, innerHeight)
for (let i = 0; i < circleArray.length; i++) {
circleArray[i].update()
}
requestAnimationFrame(animate)
}
init()
animate()