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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
WIM4.1/tp/tp4/ex1/data.json Normal file
View File

@ -0,0 +1,6 @@
let data=[
{"label":"C","value":50},
{"label":"C++","value":100},
{"label":"Java","value":20},
{"label":"PHP","value":60}
];

23
WIM4.1/tp/tp4/ex1/main.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<style>
canvas {background-color: red;}
</style>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas></canvas>
</body>
<script src="./data.json"></script>
<script src="./main.js"></script>
</html>

55
WIM4.1/tp/tp4/ex1/main.js Normal file
View File

@ -0,0 +1,55 @@
let color = ["#F00", "#0F0", "#00F", "#FF0", "#F0F", "#0FF"];
let height= 150
let witdh = 70;
let rayon = 50;
let valueMax = 0;
function name(argument) {
return 1;
}
data.forEach(el => valueMax += el.value);
window.onload = (()=> {
let ctx = document
.querySelector("canvas")
.getContext("2d");
let precedent_value = 0;
ctx.moveTo(witdh, height);
for (var i = 0; i<1; i++ ) {
ctx.fillStyle = color[i];
ctx.save();
ctx.beginPath();
ctx.lineTo(0, rayon);
ctx.arc(0, 0, rayon, 0, (Math.PI*2) *(data[i].value/valueMax), false);
ctx.restore();
ctx.rotate((Math.PI*2) *(data[i].value/valueMax));
ctx.lineTo(0, rayon);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
}
})

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()