// -------------------- Fonctions des outils -------------------- var listeFonctions = new Array() var listeCouleurs = new Array() var historique = new Array() var ctxT // Cette fonction permet d'effectuer un zoom. Elle change la valeur des inputs à gauche // qui définnissent la zone à afficher et actualise le graphique. function zoom(valeur){ var diffBornes = Math.abs(parseFloat(document.getElementById("borneXGauche").value) - parseFloat(document.getElementById("borneXDroite").value)) var ajouter = (diffBornes * valeur - diffBornes)/2 var nouvelleValeur = parseFloat(document.getElementById("borneXGauche").value) - ajouter if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) } if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) } if (nouvelleValeur == parseFloat(document.getElementById("borneXGauche").value) && valeur>1){ nouvelleValeur=nouvelleValeur-1 } if (nouvelleValeur == parseFloat(document.getElementById("borneXGauche").value) && valeur<1){ nouvelleValeur=nouvelleValeur+1 } document.getElementById("borneXGauche").value = nouvelleValeur var nouvelleValeur = parseFloat(document.getElementById("borneXDroite").value) + ajouter if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) } if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) } if (nouvelleValeur == parseFloat(document.getElementById("borneXDroite").value) && valeur>1){ nouvelleValeur=nouvelleValeur+1 } if (nouvelleValeur == parseFloat(document.getElementById("borneXDroite").value) && valeur<1){ nouvelleValeur=nouvelleValeur-1 } document.getElementById("borneXDroite").value = nouvelleValeur var diffBornes = Math.abs(parseFloat(document.getElementById("borneYGauche").value) - parseFloat(document.getElementById("borneYDroite").value)) var ajouter = (diffBornes * valeur - diffBornes)/2 var nouvelleValeur = parseFloat(document.getElementById("borneYGauche").value) - ajouter if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) } if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) } if (nouvelleValeur == parseFloat(document.getElementById("borneYGauche").value) && valeur>1){ nouvelleValeur=nouvelleValeur-1 } if (nouvelleValeur == parseFloat(document.getElementById("borneYGauche").value) && valeur<1){ nouvelleValeur=nouvelleValeur+1 } document.getElementById("borneYGauche").value = nouvelleValeur var nouvelleValeur = parseFloat(document.getElementById("borneYDroite").value) + ajouter if (nouvelleValeur < 0){ nouvelleValeur = Math.ceil(nouvelleValeur) } if (nouvelleValeur > 0){ nouvelleValeur = Math.floor(nouvelleValeur) } if (nouvelleValeur == parseFloat(document.getElementById("borneYDroite").value) && valeur>1){ nouvelleValeur=nouvelleValeur+1 } if (nouvelleValeur == parseFloat(document.getElementById("borneYDroite").value) && valeur<1){ nouvelleValeur=nouvelleValeur-1 } document.getElementById("borneYDroite").value = nouvelleValeur if(Math.abs(parseFloat(document.getElementById("borneXGauche").value) - parseFloat(document.getElementById("borneXDroite").value)) == 0){reinitialiserZoom(1)} if(Math.abs(parseFloat(document.getElementById("borneYGauche").value) - parseFloat(document.getElementById("borneYDroite").value)) == 0){reinitialiserZoom(1)} actualiserGraph() } // Permet de réinitialiser le zoom à la valeur donnée. function reinitialiserZoom(valeur){ document.getElementById("borneXGauche").value = -valeur document.getElementById("borneXDroite").value = valeur document.getElementById("borneYGauche").value = -valeur document.getElementById("borneYDroite").value = valeur angle = Math.PI/8 valeurZoom3D = 1 gauche3D = -6.5 droite3D = 6.5 precisionDroite3D = 0.02 precisionFonction3D = 0.2 document.getElementById("inputPrecision3D").value = 0.2 actualiserGraph() } // Ces fonctions permettent de déplacer le graphique sur l'axe "x" et "y" // Pour cela, elles redéfinissent la zone à afficher (à gauche dans les inputs) function deplacerY(valeur){ document.getElementById("borneYGauche").value = parseFloat(document.getElementById("borneYGauche").value) + valeur document.getElementById("borneYDroite").value = parseFloat(document.getElementById("borneYDroite").value) + valeur actualiserGraph() } function deplacerX(valeur){ document.getElementById("borneXGauche").value = parseFloat(document.getElementById("borneXGauche").value) + valeur document.getElementById("borneXDroite").value = parseFloat(document.getElementById("borneXDroite").value) + valeur if(fonction3D){ angle = angle + valeur * Math.PI/8 } actualiserGraph() } // Permet d'afficher la valeur en "y" pour un point donné en "x" function execute(fonction) { if(check(fonction)){ x = document.getElementById("inputX").value document.getElementById("outputX").innerHTML = " f(x) = "+eval(fonction)+"" //alert("Si x = "+x+" \nf(x) = "+eval(fonction)+"") } } // Ajoute la fonction mathématique se trouvant dans l'input en haut à une liste. // Ceci est utile à l'affichage de plusieurs fonctions simultanées. function menuFonctions(){ if(fonction3D){ afficherMenu('menuHistorique') } else{ afficherMenu('menuFonctions') } } function ajouterFonction(fct){ listeFonctions.push(fct) listeCouleurs.push("rgba(0,171,255,0.9)") actualiserListeFonctions() } function actualiserListeFonctions(){ var texteFctSupp = "" for(var i=0; i' texteFctSupp += ' ....
' } document.getElementById("fonctionsSupp").innerHTML = texteFctSupp actualiserGraph() } function actualiserHistorique(){ var texteHistorique = "" for(var i=0; i'+historique[i]+'
' } document.getElementById("spanHistorique").innerHTML = texteHistorique document.getElementById("divHistorique").scrollTop = 0 } // Permet de changer d'outil et de faire différentes actions lors du choix de l'outil function choixOutil(nom){ outil = nom if(outil == 'deplacement'){ document.getElementById("affichage").style.cursor = "move" document.getElementById("info").style.display = "none" } else{ document.getElementById("affichage").style.cursor = "auto" document.getElementById("info").style.display = "block" } if(outil == 'point'){ document.getElementById("point").style.display = "block" } else{ document.getElementById("point").style.display = "none" } if(outil == 'tangente'){ document.getElementById("tangente").innerHTML = '' ctxT = document.getElementById('canvasT').getContext('2d') } else{ document.getElementById("tangente").innerHTML = "" ctxT = null } } // Fonctions servant à gérer les événements de la souris function sourisDown(){ mouseDown = true posSourisXinit = posSourisX posSourisYinit = posSourisY } function sourisUp(){ mouseDown = false } function sourisMove(event){ posSourisX = event.clientX posSourisY = event.clientY if(mouseDown){ if(outil == "deplacement"){ var valeurX = (posSourisX-posSourisXinit)/multiplicateurX var valeurY = (posSourisYinit-posSourisY)/multiplicateurY if(Math.round(Math.abs(valeurX)) > 0){ deplacerX(-Math.round(2*valeurX)/2) posSourisXinit = posSourisX } if(Math.round(Math.abs(valeurY)) > 0){ deplacerY(-Math.round(2*valeurY)/2) posSourisYinit = posSourisY } //decalageX = posSourisX-posSourisXinit //decalageY = posSourisY-posSourisYinit //actualiserGraph() } } if(outil == "point"){ var position = Math.round((posSourisX-132)*(borneXDroite-borneXGauche)/(precision*500)) var positionX = pointX[position] var positionY = pointY[position] if(!isNaN(positionX) && !isNaN(positionY)){ document.getElementById("info").innerHTML = "("+Math.round((positionX/multiplicateurX+borneXGauche)*100)/100+";"+Math.round(-(positionY/multiplicateurY-borneYDroite)*100)/100+")" document.getElementById("point").style.left = (positionX+130-4)+"px" document.getElementById("point").style.top = (positionY+53-10)+"px" } } if(outil == "tangente"){ var position = Math.round((posSourisX-129)/multiplicateurX/precision) var positionX = pointX[position] var positionY = pointY[position] var valeurPente = ((hauteur-pente[position])/multiplicateurY+borneYGauche) //hauteur - (((y-y1)/precision - borneYGauche)* multiplicateurY) document.getElementById("info").innerHTML = "("+Math.round(valeurPente*100)/100+")" ctxT.clearRect(0,0,largeur*2,hauteur*2) if(!isNaN(positionX) && !isNaN(positionY)){ ctxT.fillStyle = "white" ctxT.fillRect (positionX-1, positionY-2, 6, 6) ctxT.strokeStyle = "white" ctxT.lineWidth = 2 ctxT.beginPath() valeurPente = valeurPente * (hauteur/largeur) * (borneXDroite-borneXGauche)/(borneYDroite-borneYGauche) ctxT.moveTo(0+4, positionY+positionX*valeurPente+1) ctxT.lineTo(largeur+4, positionY+positionX*valeurPente-largeur*valeurPente+1) ctxT.stroke() } } //document.getElementById("info").innerHTML = " "+ (posSourisX-120) + ";" + (posSourisY-43) } function doubleClick(ctrlKey){ if(ctrlKey){ zoom(1.25) zoom3D(1.25) } else{ zoom(0.8) zoom3D(0.8) } } // Evènements du clavier function keyPress(event){ switch(event.keyCode){ case 27: reset() break case 37: if(event.ctrlKey){ deplacerX(-1) } break case 38: if(event.ctrlKey){ deplacerY(1) } break case 39: if(event.ctrlKey){ deplacerX(1) } break case 40: if(event.ctrlKey){ deplacerY(-1) } break default: //alert(event.keyCode+" ; "+event.ctrlKey) } } // ---- Fonctions de test ---- function testSVG(){ document.getElementById("affichage").innerHTML = ' ' } function testCanvas(){ document.getElementById("affichage").innerHTML = '' ctx = document.getElementById('canvas').getContext('2d') var lingrad = ctx.createLinearGradient(100,100,largeur-100,hauteur-100) lingrad.addColorStop(0, 'rgba(0,50,255,1)') lingrad.addColorStop(1, 'rgba(0,255,255,1)') ctx.fillStyle = lingrad ctx.textAlign = "center" ctx.font = "72px bold" ctx.fillText("Canvas", largeur/2, hauteur/2-1) } function testXPM(){ document.getElementById("affichage").innerHTML = '' } // ---- Aire sous la fonction (intégrale) ---- function AireSousFct(fct, a, b, n){ var aire, largeurRect, gaucheRect, droiteRect, millieuRect, hauteurRect, aireRect; var f = function(x){ return eval(fct); }; aire = 0; largeurRect = (b-a)/n; for(var i=0; i