-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtuto_tortue.html
358 lines (345 loc) · 16.1 KB
/
tuto_tortue.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!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>