microalg.github.io/tuto_tortue.html at master · Microalg/microalg.github.io · GitHub

History

358 lines (345 loc) · 16.1 KB

Raw

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>

<title>Tuto tortue - MicroAlg</title>

content="Tutoriel en ligne pour MicroAlg." />

</head>

Besoin de JavaScript pour les exercices interactifs.

</div>

</noscript>

<a href="./">accueil</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>

<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

<p>Vous pouvez maintenant passer à <a href="#avancer">la suite</a>.</p>

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>

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>

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>

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>

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>.

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>

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>

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>

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

<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>

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>

<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>

$().showUp('.navbar', {

upClass: 'navbar-show',

downClass: 'navbar-hide'

});

</script>

</body>

</html>

microalg.github.io/tuto_tortue.html at master · Microalg/microalg.github.io · GitHub

Uh oh!

Expand file tree

Breadcrumbs

tuto_tortue.html

Latest commit

History

Breadcrumbs

tuto_tortue.html

File metadata and controls