tuto_tortue.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tuto tortue - MicroAlg</title>
    <meta name="description"
          content="Tutoriel en ligne pour MicroAlg." />
    <meta name="keywords" content="microalg, algo, algorithme, algorithmique, lisp, environnement" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="web/jquery.min.js"><\/script>')</script>
    <script src="emulisp/int.js" type="text/javascript"></script>
    <script src="emulisp/emulisp_core.js" type="text/javascript"></script>
    <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="web/style.css" />
    <script type="text/javascript" src="web/ide_injections.js"></script>
    <script type="text/javascript" src="web/parenedit.js"></script>
    <link type="text/css" href="web/parenedit.css" rel="stylesheet" />
    <script src="web/showdown.js"></script>
    <script src="web/svg-tree-drawer/svg-tree-drawer.js"></script>
    <link href="web/css-ninja-tree/css-ninja-tree.css" rel="stylesheet"/>
    <script src="web/showup.js"></script>
    <link type="text/css" href="web/showup.css" rel="stylesheet" />
    <link rel="icon" href="visuels/logo_microalg.ico" />
</head>
<body class="microalg">
    <noscript>
        <div style="color:#CC0000; text-align:center">
        Besoin de JavaScript pour les exercices interactifs.
        </div>
    </noscript>
    <div class="navbar">
        <a href="./">accueil</a> :
        <a href="#top">haut de page</a>
    </div>
    <h1 id="top">MicroAlg - Tutoriel tortue</h1>
    <p><a href="#tortue">Commencer tout de suite</a>, sans lire
    l’introduction.</p>
    <p>Aller directement à :
    <a href="#tortue">La tortue</a>,
    <a href="#avancer">Avancer</a>,
    <a href="#tourner-quart">Tourner d’un quart de tour à droite</a>,
    <a href="#tourner">Tourner à droite</a>,
    <a href="#tourner-gauche-droite">Tourner à gauche et à droite</a>,
    <a href="#premier-carre">Premier carré</a>,
    <a href="#autre-carre">Un autre carré</a>,
    <a href="#triangle">Triangle</a>,
    <a href="#polygones">Polygones</a>,
    <a href="#encore-autre-carre">Encore un autre carré (ou presque)</a>,
    <a href="#contact">Contact</a>.
    </p>

    <h2 id="questce">Qu’est-ce ?</h2>
    <p>Cette page est un <a href="https://fr.wikipedia.org/wiki/Tutoriel"
    class="wp">tutoriel</a>
    pour <strong>certaines commandes graphiques</strong> de
    <a href="http://microalg.info" class="offi">MicroAlg</a>.</p>
    <p>Il est largement inspiré de
    <a href="https://studio.code.org/s/frozen/">celui-ci</a>, lui-même
    issu d’une longue tradition de système pédagogiques utilisant
    l’informatique.</p>
    
    <h2 id="contact">Contact</h2>
    <p>Si jamais cette page ne réagit pas comme vous l’attendiez, si vous
    trouvez une faute d’orthographe, ou si vous avez envie de contribuer avec
    une idée lumineuse, merci de (au choix) :</p>
    <ul>
        <li>proposer une « pull request » en éditant directement
            <a href="https://github.com/Microalg/Microalg/edit/master/tuto_graphique.html">ce fichier sur Github</a> ;</li>
        <li>poster une « issue » sur
            <a href="https://github.com/Microalg/Microalg/issues/new">Github</a> ;</li>
        <li>poser une question dans
            <a href="http://qr.microalg.info">la section Questions/Réponses</a> ;</li>
        <li>envoyer <a href="mailto:profgra.org@gmail.com" class="email">un email
            au créateur de MicroAlg</a>.</li>
    </ul>

    <h2 id="tortue"><a href="#tortue">: </a>La tortue</a></h2>
    <p>La tortue n’est pas visible à l’écran mais elle laisse un trait noir
    derrière elle. Elle évolue dans le grand carré blanc en dessous des blocs
    de code en partant du centre, tournée vers le haut. Vous devez lui donner
    les bonnes instructions pour qu’elle suive le chemin vert, en entier et
    sans dépasser.</p>
    <p>Pour lui donner des instructions, il faut modifier ou écrire vous-même
    un programme sous forme de blocs emboîtés.</p>
    <p>Pour cette démonstration, comme pour beaucoup d’autres défis de cette,
    page, un programme a déjà été mis en place. Vous n’avez qu’à changer le
    <code>Faux</code> en <code>Vrai</code> (à trouver dans la catégorie
    « Valeurs »), puis cliquer <code>Exécuter</code> pour voir la tortue
    dessiner. Bon, elle nous fait un joli dessin, mais elle ne suit pas le
    chemin correctement !</p>
    <p>Si jamais vous supprimez des blocs par erreur, rafraîchissez la page avec
    <code>F5</code>.</p>
    <p>Vous pouvez maintenant passer à <a href="#avancer">la suite</a>.</p>
    <div id="script-demo"></div>
    <script>inject_microalg_editor_in('script-demo', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 100)(TD)(AV 50)' +
            '(LC)(TD)(AV 100)(TD)(AV 50)(TD)(Contour (Liste 0 0 0))(Epaisseur 2)(BC)',
     src:
        '(Si Faux Alors\n' +
        '    (Declarer i De_type "nombre")\n' +
        '    (Affecter_a i 20)\n' +
        '    (Tant_que (> i 0) Faire\n' +
        '        (AV i)\n' +
        '        (TD (* 3 (- 20 i)))\n' +
        '        (Affecter_a i (- i 1))\n' +
        '    )\n' +
        ')\n' +
        ''
    });</script>
    <p><strong>Note</strong> : il y aura parfois des indices à cet endroit.</p>

    <h2 id="avancer"><a href="#avancer">: </a>Avancer</a></h2>
    <p>Voici le premier défi. Il présente la commande <code>AV</code>, qui fait
    <strong>AV-ancer la tortue</strong> du nombre de pixels indiqué.</p>
    <p>Pour ce défi comme pour tous les autres, il faut :</p>
    <ol>
      <li>modifier le programme proposé ou en écrire un (ici simplement changer
          le zéro en une autre valeur) ;</li>
      <li>cliquer sur <code>Exécuter</code> pour tester le programme ;</li>
      <li>si la tortue a bien suivi le chemin, passer à la suite. Sinon,
          réessayer !</li>
    </ol>
    <div id="script-avancer"></div>
    <script>inject_microalg_editor_in('script-avancer', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 100)' +
            '(LC)(TD 180)(AV 100)(TD 180)(Contour (Liste 0 0 0))(Epaisseur 2)(BC)',
     src:
        '(AV 0)'
    });</script>

    <h2 id="tourner-quart"><a href="#tourner-quart">: </a>Tourner d’un quart de tour à droite</a></h2>
    <p>La commande <code>TD</code> fait <strong>tourner la tortue</strong> d’un
    quart de tour (90 degrés) <strong>sur elle-même vers sa droite</strong>.</p>
    <p>Attention, la tortue repart du centre, elle doit refaire le trait de la
    section précédente.</p>
    <div id="script-td-90"></div>
    <script>inject_microalg_editor_in('script-td-90', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 100)(TD)(AV 50)' +
            '(LC)(TD)(AV 100)(TD)(AV 50)(TD)(Contour (Liste 0 0 0))(Epaisseur 2)(BC)',
     src:
        '(AV 0)\n(TD)\n(AV 0)'
    });</script>
    <p><strong>Indice</strong> : Pour suivre le chemin vert, il faut que la tortue :</p>
    <ol>
      <li>avance (de combien ?),</li>
      <li>tourne sur sa droite,</li>
      <li>avance à nouveau (de combien ?).</li>
    </ol>

    <h2 id="tourner"><a href="#tourner">: </a>Tourner à droite</a></h2>
    <p>On peut aussi donner un angle en degrés à la commande <code>TD</code>.</p>
    <div id="script-td"></div>
    <script>inject_microalg_editor_in('script-td', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 100)(TD 45)(AV 200)' +
            '(LC)(TD 180)(AV 200)(TG 45)(AV 100)(TD 180)(Contour (Liste 0 0 0))(Epaisseur 2)(BC)',
     src:
        '(AV 150)\n(TD 20)\n(AV 100)'
    });</script>

    <h2 id="tourner-gauche-droite"><a href="#tourner-gauche-droite">: </a>Tourner à gauche et à droite</a></h2>
    <p>La commande <code>TG</code> est la sœur jumelle de la commande
    <code>TD</code>. Elle fait <strong>tourner la tortue</strong> sur elle-même
    <strong>vers sa gauche</strong> d’un certain angle en degrés, ou d’un quart
    de tour si on n’indique pas d’angle.</p>
    <p>Ici, aucune commande n’a été mise en place. Vous n’aurez besoin que de
    <code>AV</code>, <code>TD</code> et <code>TG</code>. À vous de les retrouver
    dans la boîte à outils : les blocs <code>AV</code>, <code>TD</code> et
    <code>TG</code> sont dans la catégorie <code>Cmdes tortue</code>, et le
    bloc des nombres dans la catégorie <code>Valeurs</code>. Aussi, en cliquant
    droit sur les blocs, vous pouvez les dupliquer.</p>
    <div id="script-tgd"></div>
    <script>inject_microalg_editor_in('script-tgd', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 50)(TG 45)(AV 50)(TD 45)(AV 50)(TD 45)(AV 50)(TG 90)(AV 50)(TD 135)(AV 100)' +
            '(LC)(TD 180)(AV (- 100 (* 0.7 50)))(TG)(AV (+ 100 (* 0.7 150)))(TD 180)(Contour (Liste 0 0 0))(Epaisseur 2)(BC)',
     src:
        ''
    });</script>

    <h2 id="premier-carre"><a href="#premier-carre">: </a>Premier carré</a></h2>
    <p>Pour gagner du temps, pensez à utiliser <code>TG</code> plutôt que
    <code>TG 90</code>.
    <div id="script-carre"></div>
    <script>inject_microalg_editor_in('script-carre', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 200)(TG)(AV 200)(TG)(AV 200)(TG)(AV 200)' +
            '(TG)(Contour (Liste 0 0 0))(Epaisseur 2)',
     src:
        ''
    });</script>
    
    <h2 id="autre-carre"><a href="#autre-carre">: </a>Un autre carré</a></h2>
    <p>Tout d’abord, modifiez votre programme précédent pour que la tortue
    dessine un carré d’une autre taille. Vous remarquez que vous ne pouvez pas
    éviter la modification de quatre nombres. Fastidieux ! Heureusement que ce
    carré n’a pas 1000 côtés !</p>
    <p>Le programme qui a été écrit pour vous ci-dessous utilise la commande
    <code>Repeter</code>. Dessinez le carré vert, puis des carrés de
    différentes taille. Grâce à <code>Repeter</code>, il n’y a plus qu’un seul
    nombre à modifier !</p>
    <div id="script-autre-carre"></div>
    <script>inject_microalg_editor_in('script-autre-carre', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 200)(TG)(AV 200)(TG)(AV 200)(TG)(AV 200)' +
            '(TG)(Contour (Liste 0 0 0))(Epaisseur 2)',
     src:
        '(Repeter 4 Fois\n' +
        '(AV 0)\n' +
        '(TG)\n' +
        ')\n' +
        ''
    });</script>

    <h2 id="triangle"><a href="#triangle">: </a>Triangle</a></h2>
    <div id="script-triangle"></div>
    <script>inject_microalg_editor_in('script-triangle', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'(RAZ)(Epaisseur 6)(Contour (Liste 0 255 0))' +
            '(AV 200)(TG 120)(AV 200)(TG 120)(AV 200)' +
            '(TG 120)(Contour (Liste 0 0 0))(Epaisseur 2)',
     src:
        ''
    });</script>

    <h2 id="polygones"><a href="#polygones">: </a>Polygones</a></h2>
    <p>Ici, pas de chemin à faire suivre à la tortue. La tortue est libre !</p>
    <p>Nous allons utiliser une variable, <code>n</code>, qui
    représentera le nombre de côtés à dessiner. Tout ce que vous avez à faire,
    c’est dire à la tortue quel calcul faire pour tourner du bon angle afin de
    dessiner un polygone à <code>n</code> côtés. Le calcul n’est pas facile à
    trouver, mais assez simple. Il suffit de changer l’opération et la valeur
    90.</p>
    <p>Si vous voulez <strong>R</strong>emettre <strong>À</strong>
    <strong>Z</strong>éro le monde de la tortue, utilisez la commande
    <code>RAZ</code> au début du programme, située dans la catégorie
    <code>Cmdes graphiques</code>.</p>
    <p>Une fois que vous avez réussi, la tortue vous demande deux choses :</p>
    <ul>
      <li>Plutôt que d’avancer systématiquement de 100 pixels, faire un calcul
          pour que le polygone soit assez grand mais ne sorte pas du cadre.</li>
      <li>Dessiner une étoile à 17 branches.</li>
      <li>Dessiner des polygones ayant des polygones dessinés au bout des
          sommets (et ainsi de suite).</li>
    </ul>
    <div id="script-polygones"></div>
    <script>inject_microalg_editor_in('script-polygones', {
     processing: true,
     blockly_only:true,
     autorun:true,
     presrc:'',
     src:
        '(Declarer n De_type "nombre")\n' +
        '(Affecter_a n 8)\n' +
        '(Repeter n Fois\n' +
        '(AV 100)\n' +
        '(TG (+ 90 n))\n' +
        ')\n' +
        ''
    });</script>
    <p>Pour vous aider à comprendre la calcul à effectuer, reprenez le cas du
    triangle, puis du carré, puis du pentagone, puis de l’hexagone…</p>

    <h2 id="encore-autre-carre"><a href="#encore-autre-carre">: </a>Encore un autre carré (ou presque)</a></h2>
    <p>Le programme qui a été écrit pour vous ci-dessous utilise la commande
    répétitive <code>Tant_que</code> et la variable <code>i</code> pour
    dessiner un simple carré. Il y a beaucoup plus de blocs qu’avec la
    commande <code>Repeter</code>, mais la tortue sait maintenant quel est le
    numéro du côté qu’elle est en train de dessiner, le numéro
    <code>i</code>.</p>
    <p>Après chaque trait, elle tourne, puis augmente de 1 la valeur de
    <code>i</code> grâce à une somme, et ceci tant que <code>i</code> est plus
    petit ou égal à 4.</p>
    <p>Ce programme dessine pour l’instant bêtement un carré, mais on peut
    utiliser un calcul avec le numéro du côté pour changer :</p>
    <ul>
      <li>la longueur de ce côté,</li>
      <li>ou l’angle de rotation après l’avoir dessiné.</li>
    </ul>
    <p>Essayez par exemple de remplacer le <code>100</code> ou le
    <code>90</code> par un calcul utilisant <code>i</code>. Peut-être que vous
    aurez aussi besoin d’augmenter la valeur de <code>n</code> pour observer
    votre œuvre. N’hésitez pas à aller jusqu’à 20 ou 50, voire plus !</p>
    <div id="script-encore-autre-carre"></div>
    <script>inject_microalg_editor_in('script-encore-autre-carre', {
     processing: true,
     blockly_only:true,
     autorun:true,
     src:
        '(RAZ)\n' +
        '(Declarer i De_type "nombre")\n' +
        '(Affecter_a i 1)\n' +
        '(Tant_que (<= i 4) Faire\n' +
        '(AV 100)\n' +
        '(TG 90)\n' +
        '(Affecter_a i (+ i 1))\n' +
        ')\n' +
        ''
    });</script>
    <p><strong>Indice</strong> : Changer par exemple le <code>100</code> par
    <code>Produit</code> de <code>i</code> par <code>10</code>.</p>

    <h2 id="fin">Fin</h2>
    <p>Voilà, c’est fini. Pour apprendre d’autres commandes graphiques, vous
    pouvez lire le <a href="tuto_graphique.html">tutoriel graphique</a>. Dans la
    galerie, vous trouverez beaucoup d’exemples d’utilisation de ces commandes.
    <a href="http://galerie.microalg.info/microalg:graphismes">Cette page</a>
    en contient une liste.</p>
    <p>Si vous avez envie de créer votre propre tutoriel, vous pouvez utiliser
    <a href="http://galerie.microalg.info">la galerie</a>.
    Pour mettre MicroAlg en place sur votre propre site, voir
    <a href="https://github.com/Microalg/Microalg/blob/latest/INSTALL.md">cette page</a>.</p>
    <p>Si vous avez une remarque à faire, ou envie de contribuer, suivre les
    instructions de <a href="#contact">cette section</a>.</p>
    <p>Bonne continuation !</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <script>
        $().showUp('.navbar', {
            upClass: 'navbar-show',
            downClass: 'navbar-hide'
        });
    </script>
</body>
</html>