diff --git a/WIM4.1/tp/tp4/ex1/data.json b/WIM4.1/tp/tp4/ex1/data.json new file mode 100644 index 0000000..14f0b13 --- /dev/null +++ b/WIM4.1/tp/tp4/ex1/data.json @@ -0,0 +1,6 @@ +let data=[ +{"label":"C","value":50}, +{"label":"C++","value":100}, +{"label":"Java","value":20}, +{"label":"PHP","value":60} +]; diff --git a/WIM4.1/tp/tp4/ex1/main.html b/WIM4.1/tp/tp4/ex1/main.html new file mode 100644 index 0000000..6d352fa --- /dev/null +++ b/WIM4.1/tp/tp4/ex1/main.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WIM4.1/tp/tp4/ex1/main.js b/WIM4.1/tp/tp4/ex1/main.js new file mode 100644 index 0000000..1be88c9 --- /dev/null +++ b/WIM4.1/tp/tp4/ex1/main.js @@ -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(); + } + + + +}) \ No newline at end of file diff --git a/WIM4.1/tp/tp4/ex2/ballon.html b/WIM4.1/tp/tp4/ex2/ballon.html new file mode 100644 index 0000000..890e313 --- /dev/null +++ b/WIM4.1/tp/tp4/ex2/ballon.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + diff --git a/WIM4.1/tp/tp4/ex2/ballon.js b/WIM4.1/tp/tp4/ex2/ballon.js new file mode 100644 index 0000000..ebcc795 --- /dev/null +++ b/WIM4.1/tp/tp4/ex2/ballon.js @@ -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() + + diff --git a/WIM4.1/tp/tp4/ex2/ballon.tmp.js b/WIM4.1/tp/tp4/ex2/ballon.tmp.js new file mode 100644 index 0000000..b9e46ef --- /dev/null +++ b/WIM4.1/tp/tp4/ex2/ballon.tmp.js @@ -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()