You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
17 KiB
308 lines
17 KiB
|
|
// -------------------- 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<listeFonctions.length; i++){ |
|
texteFctSupp += 'f(x)='+listeFonctions[i]+' <input type="button" value="-" onclick="listeFonctions.splice('+i+', 1); actualiserListeFonctions()"/>' |
|
texteFctSupp += ' <span id="FctSupp'+i+'" title="listeCouleurs['+i+']" class="boutonCouleur" onclick="colorPicker(this.id); afficherMenu(\'menuCouleur\')">....</span><br/>' |
|
} |
|
document.getElementById("fonctionsSupp").innerHTML = texteFctSupp |
|
actualiserGraph() |
|
} |
|
|
|
function actualiserHistorique(){ |
|
var texteHistorique = "" |
|
for(var i=0; i<historique.length; i++){ |
|
texteHistorique += '<span class="survol" onclick="document.getElementById(\'inputEq\').value = ' |
|
texteHistorique += "'"+historique[i]+"'"+'; actualiserGraph()">'+historique[i]+'</span> <br/>' |
|
} |
|
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 = '<canvas id="canvasT" width="'+largeur+'" height="'+hauteur+'"></canvas>' |
|
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 = '<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg:line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg:svg> ' |
|
} |
|
function testCanvas(){ |
|
document.getElementById("affichage").innerHTML = '<canvas id="canvas" width="'+largeur+'" height="'+hauteur+'"></canvas>' |
|
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 = '<img src='+"'"+'data:image/xpm;ASCII,/* XPM */static char * text_xpm[] = {"100 50 2 1"," c None",". c #000000"," "," "," "," "," "," "," "," "," "," "," ..... ..... ............... ....... ....... "," ..... ..... .................. ....... ....... "," .... ..... ................... ........ ........ "," ..... ..... .................... ........ ........ "," ..... ..... .... ....... ........ ........ "," .... ..... .... ..... ......... ......... "," ..... ..... .... .... .... .... .... .... "," ..... ..... .... ..... .... ..... ..... .... "," .... ..... .... .... .... .... .... .... "," ..... ..... .... .... .... .... .... .... "," ..... ..... .... .... .... ..... ..... .... "," ..... ..... .... .... .... .... .... .... "," ......... .... ..... .... .... .... .... "," ........ .... .... .... .... .... .... "," ....... .... ..... .... .... .... .... "," ..... .... ....... .... ..... ..... .... "," ...... .................... .... .... .... .... "," ....... ................... .... .... .... .... "," ........ .................. .... ..... ..... .... "," .......... ............... .... .... .... .... "," ..... ..... .... .... ..... ..... .... "," .... ..... .... .... .... .... .... "," ..... .... .... .... ......... .... "," ..... ..... .... .... ......... .... "," ..... ..... .... .... ....... .... "," ..... .... .... .... ....... .... "," ..... ..... .... .... ..... .... "," ..... ..... .... .... ..... .... "," ..... .... .... .... .... "," ..... ..... .... .... .... "," ..... ..... .... .... .... "," ..... .... .... .... .... "," ..... ..... .... .... .... "," ..... ..... .... .... .... "," "," "," "," "," "," "};'+"'"+'width="500" height="330"/>' |
|
} |
|
|
|
|
|
// ---- 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<n; i++){ |
|
gaucheRect = a + i*largeurRect; |
|
droiteRect = a + (i+1)*largeurRect; |
|
millieuRect = (gaucheRect+droiteRect) / 2; |
|
hauteurRect = f(millieuRect); |
|
aireRect = largeurRect * hauteurRect; |
|
aire = aire + aireRect; |
|
} |
|
//alert("a="+a+";b="+b+";n="+n+";A="+aire) |
|
return aire; |
|
} |
|
|
|
function calculerAire(){ |
|
var fonction = document.getElementById("inputEq").value |
|
if(check(fonction)){ |
|
var a = parseInt(document.getElementById("aireG").value); |
|
var b = parseInt(document.getElementById("aireD").value); |
|
var n = 50; |
|
var arrondi = Math.round(AireSousFct(fonction, a, b, n)*1000)/1000; |
|
document.getElementById("outputAire").innerHTML = "A = " + arrondi; |
|
} |
|
actualiserGraph(); |
|
} |