Traceur de courbe en coordonnées cartésiennes (maj)
Soyez le premier à donner votre avis sur cette source.
Vue 9 266 fois - Téléchargée 1 019 fois
Description
C'est une amélioration du grapheur proposé par dyris le 21/01/2004 :
- la taille de l'image dépend des valeurs mini et maxi sur x et sur y,
- choix d'unités sur les deux axes (effet zoom),
- ajout d'un quadrillage de 50 pixels de côté (fixe quelque soit l'échelle),
- ajout des unités sur les deux axes,
- courbe plus épaisse avec pixels joints (plus de points espacés, on obtient une ligne continue),
- fléchage des axes,
- suppession de la marge et ajout d'une bordure
- la taille de l'image dépend des valeurs mini et maxi sur x et sur y,
- choix d'unités sur les deux axes (effet zoom),
- ajout d'un quadrillage de 50 pixels de côté (fixe quelque soit l'échelle),
- ajout des unités sur les deux axes,
- courbe plus épaisse avec pixels joints (plus de points espacés, on obtient une ligne continue),
- fléchage des axes,
- suppession de la marge et ajout d'une bordure
Source / Exemple :
donnees.html:
<HTML>
<HEAD>
<TITLE>Programmes de mathématiques en ligne.</TITLE>
<SCRIPT language="javascript">
function verifier() {
var vx1=document.donnees.x1.value;
var vx2=document.donnees.x2.value;
var vy1=document.donnees.y1.value;
var vy2=document.donnees.y2.value;
vx1=vx1*1;
vx2=vx2*1;
vy1=vy1*1;
vy2=vy2*1;
if (vx1>=vx2) alert("Attention: x maxi doit être supérieur à x mini!");
else {
if (vy1>=vy2) alert("Attention: y maxi doit être supérieur à y mini!");
else document.donnees.submit();
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#EEEEEE">
<BR>
<TABLE align="center" bgcolor="#80BBFF" cellpadding=10><TR><TD><CENTER>
<FONT size=5 color="#0000BB"><B>TRACE D'UNE COURBE 2D</B></FONT><BR>
<FONT size=5 color="#0000BB"><B>EN COORDONNEES CARTESIENNES</B></FONT><BR>
</CENTER></TD></TR></TABLE>
<BR>
<TABLE align="center" width="90%"><TR><TD><FONT size=4 color="#0000BB">
<HR><CENTER>
Télécharger ce programme: <A href="2dcart.zip">2dcart.zip</A>
</CENTER><HR>
<BR>
Ce programme permet de tracer la courbe 2D représentative d'une fonction.
L'ordonnée y est calculée en fonction de l'abscisse x.
Les tableaux ci-dessous indiquent comment écrire les principales fonctions disponibles:
<BR><BR>
<CENTER><TABLE border=0 width="95%"><TR>
<TD width="48%">
<TABLE bgcolor="#FFFFFF" border=1 width="100%">
<TR><TD width="35%">Fonction</TD><TD>Description</TD></TR>
<TR>
<TD>Abs(x)<BR>Log(x)<BR>Log10(x)<BR>Exp(x)<BR>Pow(x,n)<BR>Sqrt(x)</TD>
<TD>Valeur absolue<BR>Logarithme népérien<BR>Logarithme en base 10<BR>Exponentielle<BR>Puissance n<BR>Racine carrée</TD>
</TR>
</TABLE>
</TD>
<TD> </TD>
<TD width="48%">
<TABLE bgcolor="#FFFFFF" border=1 width="100%">
<TR><TD width="35%">Fonction</TD><TD>Description</TD></TR>
<TR>
<TD>Sin(x)<BR>Cos(x)<BR>Tan(x)<BR>Asin(x)<BR>Acos(x)<BR>Atan(x)</TD>
<TD>Sinus<BR>Cosinus<BR>Tangente<BR>Arc sinus<BR>Arc cosinus<BR>Arc tangente</TD>
</TR>
</TABLE>
</TD>
</TR></TABLE></CENTER>
<BR>
Le tableau ci-dessous indique, en outre, comment écrire les principales constantes disponibles:
<BR><BR>
<CENTER><TABLE bgcolor="#FFFFFF" border=1>
<TR>
<TD>Constante</TD><TD>Valeur</TD><TD>Description</TD>
</TR>
<TR>
<TD>M_PI<BR>M_E</TD>
<TD>3,14159265358979323846<BR>2,7182818284590452354</TD>
<TD>pi<BR>e</TD>
</TR>
</TABLE></CENTER><BR>
Complétez les données ci-dessous:<BR><BR>
<FORM name="donnees" method="post" action="traitement.php">
<TABLE border=0>
<TR><TD>
<FONT size=4 color="#0000BB"> x mini = </FONT>
<INPUT type="text" name="x1">
<FONT size=4 color="#0000BB"> x maxi = </FONT>
<INPUT type="text" name="x2">
<FONT size=4 color="#0000BB"> x unit = </FONT>
<INPUT type="text" name="xu">
</TD></TR>
<TR><TD>
<FONT size=4 color="#0000BB"> y mini = </FONT>
<INPUT type="text" name="y1">
<FONT size=4 color="#0000BB"> y maxi = </FONT>
<INPUT type="text" name="y2">
<FONT size=4 color="#0000BB"> y unit = </FONT>
<INPUT type="text" name="yu">
</TD></TR>
<TR><TD>
<FONT size=4 color="#0000BB"> y = f(x) = </FONT>
<INPUT type="text" name="y">
<FONT size=4 color="#0000BB">
<INPUT type="button" value="VALIDER" onClick="verifier()">
</FONT>
</TD>
</TR>
</TABLE>
</FORM>
</TD></TR></TABLE>
<BR>
</BODY>
</HTML>
courbe.php :
<?
// Récupération des données
$x1=$HTTP_GET_VARS['x1'];
$x2=$HTTP_GET_VARS['x2'];
$xu=$HTTP_GET_VARS['xu'];
$y1=$HTTP_GET_VARS['y1'];
$y2=$HTTP_GET_VARS['y2'];
$yu=$HTTP_GET_VARS['yu'];
$y=$HTTP_GET_VARS['y'];
// Ajout du caractère $ devant chaque caractère x, sauf celui de la fonction exp()
$l=strlen($y); //strlen=longueur chiffrée de la chaine de caractères
for ($i=0;$i<$l;$i++) {
if (substr($y,$i,1)=="x" && substr($y,$i+1,1)!="p") { //substr(a,b,c) : a=chaine,b=départ,c=longueur attention 1er caractère=0
$chdeb=substr($y,0,$i);
$chfin=substr($y,$i); //substr(a,b) : a=chaine,b=tout ce qui suit à partir de ce caractère attention 1er caractère=0
$y=$chdeb."$".$chfin;
$i++;
$l++;
}
}
// Mode sans erreur pour les divisions par 0
set_error_handler ("mode_sans_erreur");
function mode_sans_erreur() {}
// Paramètres de l'image
$unite=50;
$largeur=intval(abs($x2-$x1))*$unite*$xu;
$hauteur=intval(abs($y2-$y1))*$unite*$yu;
$im=imagecreate($largeur,$hauteur);
$blanc=imagecolorallocate($im,255,255,255);
$noir=imagecolorallocate($im,0,0,0);
$rouge=imagecolorallocate($im,255,0,0);
$bleu=imagecolorallocate($im,200,200,255);
$bleuf=imagecolorallocate($im,0,0,255);
$gris=imagecolorallocate($im,140,135,145);
imagefilledrectangle($im,0,0,$largeur,$hauteur,$bleu);
// Dessin quadrillage
for($i=0;$i<$largeur/$unite+1;$i++) {
$ux=$i*$unite;
imageline($im,$ux,0,$ux,$hauteur,$gris);}
for($i=0;$i<$hauteur/$unite+1;$i++) {
$uy=$i*$unite;
imageline($im,0,$uy,$largeur,$uy,$gris);}
// Dessin des axes
$dy=$y2*$hauteur/($y2-$y1);
imageline($im,0,$dy,$largeur,$dy,$rouge);
$dx=-$x1*$largeur/($x2-$x1);
imageline($im,$dx,0,$dx,$hauteur,$rouge);
// Ajout d'une graduation // on ecrit sur l'image ( image_src, police, x, y, text, couleur )
imagestring($im, 5, $dx-10, $dy+5, "0", $rouge);
imagestring($im, 5, $dx+$marge+($largeur-2*$marge)/($x2-$x1)-4, $dy+5, "1", $noir);
imagestring($im, 5, $dx-10, $dy-($marge+($hauteur-2*$marge)/($y2-$y1))-8, "1", $noir);
// Ajout du trait de graduation d'unité sur l'axe horizontal
$xgrad=$dx+$marge+($largeur-2*$marge)/($x2-$x1);
imageline($im,$xgrad,$dy+2,$xgrad,$dy-2,$noir);
// Ajout du trait de graduation d'unité sur l'axe vertical
$ygrad=$dy-($marge+($hauteur-2*$marge)/($y2-$y1));
imageline($im,$dx-2,$ygrad,$dx+2,$ygrad,$noir);
// Ajout de la flèche sur l'axe horizontal
imageline($im,$largeur-$marge-10,$dy-5,$largeur-$marge,$dy,$rouge);
imageline($im,$largeur-$marge-10,$dy+5,$largeur-$marge,$dy,$rouge);
// Ajout de la flèche sur l'axe vertical
imageline($im,$dx-5,10,$dx,0,$rouge);
imageline($im,$dx+5,10,$dx,0,$rouge);
// Dessin de la courbe f (il y a plusieurs courbes : en +1px et en -1px)
for($i=0;$i<$largeur;$i=$i+1) {
$x=($x1+($x2-$x1)*$i/$largeur);
eval(" \$z = $y; ");
$j=($y2-$z)*$hauteur/($y2-$y1);
imagesetpixel($im,$i,$j,$bleuf);
imagesetpixel($im,$i,$j+1,$bleuf);
imagesetpixel($im,$i,$j-1,$bleuf);
imagesetpixel($im,$i-1,$j,$bleuf);
imagesetpixel($im,$i+1,$j,$bleuf);
imagesetpixel($im,$i+1,$j+1,$bleuf);
imagesetpixel($im,$i-1,$j-1,$bleuf);
imagesetpixel($im,$i-1,$j+1,$bleuf);
imagesetpixel($im,$i+1,$j-1,$bleuf);
//Ajout d'une liaison entre les différents points lorsque la pente est raide
$n=$i+1;
$x=($x1+($x2-$x1)*$n/$largeur);
eval(" \$t = $y; ");
$k=($y2-$t)*$hauteur/($y2-$y1);
imageline($im,$i,$j,$n,$k,$bleuf);
imageline($im,$i,$j+1,$n,$k+1,$bleuf);
imageline($im,$i,$j-1,$n,$k-1,$bleuf);
imageline($im,$i-1,$j,$n-1,$k,$bleuf);
imageline($im,$i+1,$j,$n+1,$k,$bleuf);
imageline($im,$i+1,$j+1,$n+1,$k+1,$bleuf);
imageline($im,$i-1,$j-1,$n-1,$k-1,$bleuf);
imageline($im,$i-1,$j+1,$n-1,$k+1,$bleuf);
imageline($im,$i+1,$j-1,$n+1,$k-1,$bleuf);
}
// Epaisseur de traits de tout ce qui suit
$size="4";
imagesetthickness($im, $size);
// Dessin des bordures
imageline($im,0,0,$largeur,0,$noir);
imageline($im,0,0,0,$hauteur,$noir);
imageline($im,$largeur-1,0,$largeur-1,$hauteur-1,$noir);
imageline($im,0,$hauteur-1,$largeur-1,$hauteur-1,$noir);
// Sortie de l'image
header("content-type: image/png");
imagepng($im);
imagedestroy();
?>
traitement.php :
<div align="center">
<TABLE align="center" width="90%"><TR><TD><FONT size=4 color="#0000BB">
<?
$x1=$HTTP_POST_VARS['x1'];
$x2=$HTTP_POST_VARS['x2'];
$xu=$HTTP_POST_VARS['xu'];
$y1=$HTTP_POST_VARS['y1'];
$y2=$HTTP_POST_VARS['y2'];
$yu=$HTTP_POST_VARS['yu'];
$y=$HTTP_POST_VARS['y'];
echo "Courbe d'équation y = ".$y." sur [".$x1." ; ".$x2."]";
?></FONT><?
echo "<BR><BR>";
echo "<IMG SRC='courbe.php?x1=";
echo $x1;
echo "&x2=";
echo $x2;
echo "&y1=";
echo $y1;
echo "&y2=";
echo $y2;
echo "&y=";
echo urlencode($y);
echo "&xu=";
echo $xu;
echo "&yu=";
echo $yu;
echo "'>";
?>
<BR><BR>
</TD></TR></TABLE>
</div>
Codes Sources
A voir également
- Traceur de courbe en ligne
- Traceur de courbe - Meilleures réponses
- Traceur de courbe point par point - Meilleures réponses
- Tracer une courbe en ligne à partir d'un tableau - Forum - Java
- Visual Basic / VB.NET : Traceur de courbes (suite) - CodeS SourceS - Guide
- PHP : Un traceur de courbes ( mini,mini) - CodeS SourceS - Guide
- Traceur de courbe en coordonnées cartésiennes - Codes sources - PHP (Maths & Algorithmes)
- Visual Basic / VB.NET : Traceur de courbe - CodeS SourceS - Guide
xmax=20
ymin=-10
ymax=5
y(f)=(abs(atan(abs(tan(x)*pow(x,-3)))*5*sin(x))-5)*2
Pourrais-je avoir son expression mathématique car je ne comprends pas la signification du %28 ? Merci .
http://www.mathsc-bonmatin.fr/...
-Et puis il faut utiliser les points de concaténation :
echo "";
Ainsi ton fichier traitement.php peut s'écrire en moins de 5 lignes !!!
Désolé, je me suis rendu compte (trop tard) que la source possède un bug sur le quadrillage. Je l'ai corrigé et vous pouvez le voir tourner sur le site http://www.mathsc-bonmatin.fr, rubrique math, l'ensemble des animations (en bas de tableau). Si vous voulez la source, contactez-moi.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.