Traceur de courbe en coordonnées cartésiennes (maj)

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

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:&nbsp;&nbsp;<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>&nbsp;</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">&nbsp;&nbsp;&nbsp;x mini = </FONT>
            <INPUT type="text" name="x1">
            <FONT size=4 color="#0000BB">&nbsp;&nbsp;&nbsp;x maxi = </FONT>
            <INPUT type="text" name="x2">
            <FONT size=4 color="#0000BB">&nbsp;&nbsp;&nbsp;x unit = </FONT>
            <INPUT type="text" name="xu">
          </TD></TR>
          <TR><TD>
            <FONT size=4 color="#0000BB">&nbsp;&nbsp;&nbsp;y mini = </FONT>
            <INPUT type="text" name="y1">
            <FONT size=4 color="#0000BB">&nbsp;&nbsp;&nbsp;y maxi = </FONT>
            <INPUT type="text" name="y2">
            <FONT size=4 color="#0000BB">&nbsp;&nbsp;&nbsp;y unit = </FONT>
            <INPUT type="text" name="yu">
          </TD></TR>
          <TR><TD>
            <FONT size=4 color="#0000BB">&nbsp;&nbsp;&nbsp;y = f(x) = </FONT>
            <INPUT type="text" name="y">
            <FONT size=4 color="#0000BB">
              &nbsp;&nbsp;&nbsp;<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

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.