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

Soyez le premier à donner votre avis sur cette source.

Vue 9 002 fois - Téléchargée 987 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

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

Ajouter un commentaire

Commentaires

Messages postés
209
Date d'inscription
samedi 11 novembre 2000
Statut
Membre
Dernière intervention
6 novembre 2009

xmin=-20
xmax=20
ymin=-10
ymax=5
y(f)=(abs(atan(abs(tan(x)*pow(x,-3)))*5*sin(x))-5)*2
Messages postés
3
Date d'inscription
dimanche 25 novembre 2007
Statut
Membre
Dernière intervention
15 mai 2009

C'est vrai qu'elle est pas mal celle-ci. Bravo !
Pourrais-je avoir son expression mathématique car je ne comprends pas la signification du %28 ? Merci .
Messages postés
209
Date d'inscription
samedi 11 novembre 2000
Statut
Membre
Dernière intervention
6 novembre 2009

Il y a moyen d'avoir de beaux graphiques :D :
http://www.mathsc-bonmatin.fr/...
Messages postés
23
Date d'inscription
lundi 31 mars 2008
Statut
Membre
Dernière intervention
5 juin 2009

- Il faut arrêter avec le <? et mettre <?php. Ce n'est pas qu'une question d'esthétique. Avec PHP 5, vous allez avoir de sérieux problèmes.
-Et puis il faut utiliser les points de concaténation :
echo "";

Ainsi ton fichier traitement.php peut s'écrire en moins de 5 lignes !!!
Messages postés
3
Date d'inscription
dimanche 25 novembre 2007
Statut
Membre
Dernière intervention
15 mai 2009

Bonsoir,

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.