{"id":4884,"date":"2018-07-09T14:41:24","date_gmt":"2018-07-09T12:41:24","guid":{"rendered":"https:\/\/blog.generationrobots.com\/?p=4884"},"modified":"2023-03-29T10:16:11","modified_gmt":"2023-03-29T08:16:11","slug":"tutoriel-cozmo-pour-le-cycle-4-projet-cozmo-foot-partie-2","status":"publish","type":"post","link":"https:\/\/www.generationrobots.com\/blog\/fr\/tutoriel-cozmo-pour-le-cycle-4-projet-cozmo-foot-partie-2\/","title":{"rendered":"Tutoriel Cozmo pour le cycle 4 : projet Cozmo Foot ! (partie 2)"},"content":{"rendered":"\n<html>\n <body>\n  <p>\n   Dans ce tutoriel p\u00e9dagogique, nous allons vous montrer comment faire vos premiers pas avec l\u2019interface\n   <strong>\n    Code Lab\n   <\/strong>\n   de Anki, qui vous permettra de programmer Cozmo.\n  <\/p>\n  \n  \n  <p>\n   <strong>\n    Au programme : rep\u00e9rage dans un plan (x, y), conditions, fonctions et variables !\n   <\/strong>\n  <\/p>\n  \n  \n  <h2 class=\"wp-block-heading\" id=\"h-activite-cozmo-foot\">\n   Activit\u00e9 COZMO FOOT\n  <\/h2>\n  \n  \n  <ul class=\"wp-block-list\">\n   \n   <li>\n    <strong>\n     <span style=\"color: #00ccff;\">\n      Dur\u00e9e :\n     <\/span>\n    <\/strong>\n    2-3 s\u00e9ances de 2h\n   <\/li>\n   \n   \n   <li>\n    <span style=\"color: #00ccff;\">\n     <strong>\n      Public :\n     <\/strong>\n    <\/span>\n    4\u00e8me\/3\u00e8me\n   <\/li>\n   \n   \n   <li>\n    <span style=\"color: #00ccff;\">\n     <strong>\n      Discipline :\n     <\/strong>\n    <\/span>\n    math\u00e9matiques, technologie, programmation\n   <\/li>\n   \n   \n   <li>\n    <span style=\"color: #00ccff;\">\n     <strong>\n      Th\u00e9matique :\n     <\/strong>\n    <\/span>\n    programmation\n   <\/li>\n   \n   \n   <li>\n    <span style=\"color: #00ccff;\">\n     <strong>\n      Niveau :\n     <\/strong>\n    <\/span>\n    interm\u00e9diaire\n   <\/li>\n   \n   \n   <li>\n    <span style=\"color: #00ccff;\">\n     <strong>\n      Notions utilis\u00e9es :\n     <\/strong>\n    <\/span>\n    rep\u00e9rage dans l&rsquo;espace, rep\u00e9rage d&rsquo;un point ou d&rsquo;une ligne dans un plan (math\u00e9matiques), conditions (programmation), variables (programmation), utilisation de capteurs (robotique, programmation)\n   <\/li>\n   \n  <\/ul>\n  \n  \n  <p>\n   Une mani\u00e8re simple et tr\u00e8s ludique d\u2019apprendre \u00e0 se servir du mode constructeur de Code Lab est de\n   <strong>\n    partir d\u2019un jeu d\u00e9j\u00e0 existant et de le modifier\n   <\/strong>\n   . C\u2019est ce que nous allons vous apprendre dans ce premier tutoriel, d\u00e9coup\u00e9 en 3 parties :\n  <\/p>\n  \n  \n  <ul class=\"wp-block-list\">\n   \n   <li>\n    <a class=\"catalogue\" href=\"\/blog\/fr\/tutoriel-cozmo-pour-le-cycle-4-projet-cozmo-foot-partie-1\/\" title=\"Tutoriel Cozmo pour le cycle 4 : projet Cozmo Foot ! (partie 1)\">\n     Partie 1. Trois astuces avant de vous lancer\n    <\/a>\n   <\/li>\n   \n   \n   <li>\n    Partie 2. Rep\u00e9rage sur plan, affichage et dialogue\n   <\/li>\n   \n   \n   <li>\n    <a class=\"catalogue\" href=\"\/blog\/fr\/tutoriel-cozmo-pour-le-cycle-4-projet-cozmo-foot-partie-3\/\" title=\"Tutoriel Cozmo pour le cycle 4 : projet Cozmo Foot ! (partie 3)\">\n     Partie 3. Conditions, variables et fonctions\n    <\/a>\n   <\/li>\n   \n  <\/ul>\n  \n  \n  <p>\n   Ce tutoriel est \u00e9galement disponible en PDF, t\u00e9l\u00e9chargez-le ici (attention, le PDF n&rsquo;inclut pas les GIF) :\u00a0Tutoriel Cozmo pour le cycle 4 : projet Cozmo Foot ! (complet)\n  <\/p>\n  \n  \n  <h2 class=\"wp-block-heading\" id=\"h-partie-2\">\n   PARTIE 2\n  <\/h2>\n  \n  \n  <h3 class=\"wp-block-heading\" id=\"h-2-modifier-l-affichage-sur-l-ecran-de-cozmo-dessin-et-texte\">\n   2. Modifier l\u2019affichage sur l\u2019\u00e9cran de Cozmo : dessin et texte\n  <\/h3>\n  \n  \n  <p>\n   Dans le jeu VOYANT MAGIQUE !, un point d\u2019interrogation s\u2019affiche sur l\u2019\u00e9cran de Cozmo lorsque l\u2019utilisateur pose sa question au robot.\n   <strong>\n    Nous allons transformer ce point d\u2019interrogation en ballon de foot !\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   Tous les blocs g\u00e9rant l\u2019affichage de l\u2019\u00e9cran sont verts et sont class\u00e9s dans la cat\u00e9gorie\n   <em>\n    \u201cAffichage\u201d\n   <\/em>\n   .\n  <\/p>\n  \n  \n  <p>\n   Lorsque vous souhaitez modifier ce que Cozmo affiche sur son \u00e9cran,\n   <strong>\n    commencez par effacer ce qui peut se trouver sur l\u2019\u00e9cran\n   <\/strong>\n   (yeux, texte), gr\u00e2ce au bloc\n   <em>\n    \u201ceffacer tous les pixels\u201d\n   <\/em>\n   .\n  <\/p>\n  \n  <div class=\"wp-block-image\">\n  <figure class=\"aligncenter\">\n   <a href=\"https:\/\/blog.generationrobots.com\/wp-content\/uploads\/2018\/07\/IMG_7.jpg\">\n    <img decoding=\"async\" width=\"300\" height=\"103\" alt=\"cozmo-codelab-affichage-effacer-pixels\" class=\"wp-image-4848\" src=\"https:\/\/blog.generationrobots.com\/wp-content\/uploads\/2018\/07\/IMG_7-300x103.jpg\" srcset=\"https:\/\/www.generationrobots.com\/blog\/wp-content\/uploads\/2018\/07\/IMG_7-300x103.jpg 300w, https:\/\/www.generationrobots.com\/blog\/wp-content\/uploads\/2018\/07\/IMG_7.jpg 477w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\n   <\/a>\n  <\/figure>\n  <\/div>\n  \n  <p>\n   <strong>\n    Attention\n   <\/strong>\n   , pour que ce bloc fonctionne, il est n\u00e9cessaire de\n   <strong>\n    rajouter le bloc\n    <em>\n     \u201cafficher sur le visage de Cozmo\u201d\n    <\/em>\n   <\/strong>\n   \u00e0 votre code.\n   <br\/>\n   D\u00e9terminez ensuite la taille de votre dessin ou de votre texte gr\u00e2ce au bloc\n   <em>\n    \u201cd\u00e9finir l&rsquo;\u00e9chelle du texte sur [X] %\u201d\n   <\/em>\n   . La taille par d\u00e9faut est 100%, vous pouvez aller au-del\u00e0 et en-de\u00e7\u00e0.\n   <strong>\n    N\u2019h\u00e9sitez pas \u00e0 tester diff\u00e9rentes tailles !\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   Pour dessiner le ballon de foot, nous allons afficher un cercle (bloc\n   <em>\n    \u201cdessiner un cercle en [X],[Y] de rayon [Z]\u201d\n   <\/em>\n   ) et rajouter les lignes qui forment les coutures du ballon.\n   <strong>\n    Changez les valeurs X, Y et Z afin d\u2019ajuster le dessin \u00e0 l\u2019\u00e9cran.\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   Passons au dessin des coutures\u2026\n   <strong>\n    Nous allons tracer 20 lignes\n   <\/strong>\n   en indiquant pour chacune les coordonn\u00e9es de son point de d\u00e9part et de son point d\u2019arriv\u00e9e. Les\n   <strong>\n    notions de rep\u00e8res et coordonn\u00e9es dans un plan\n   <\/strong>\n   sont utilis\u00e9es ici (cours de 4\u00e8me).\n  <\/p>\n  \n  \n  <p>\n   L\u2019\u00e9cran de Cozmo mesure\n   <strong>\n    128 pixels de largeur sur 64 pixels de hauteur\n   <\/strong>\n   . Nous avons donc\u00a0cr\u00e9\u00e9\u00a0une grille num\u00e9rot\u00e9e de 128 carr\u00e9s de large sur 64 carr\u00e9s de hauteur, sur laquelle nous avons superpos\u00e9 le dessin vectoris\u00e9 de notre ballon de foot. Il est maintenant simple d\u2019obtenir les coordonn\u00e9es X et Y pour chaque point, et de tracer\u00a0les lignes avec le bloc\n   <em>\n    \u201cdessiner une ligne de [X],[Y] \u00e0 [X2],[Y2]\u201d\n   <\/em>\n   .\n  <\/p>\n  \n  \n  <figure class=\"wp-block-image\">\n   <a href=\"\/img\/cms\/modele-ballon-foot.jpg\">\n    <img fetchpriority=\"high\" decoding=\"async\" width=\"900\" height=\"470\" alt=\"cozmo-codelab-modele_ballon-foot\" class=\"wp-image-4847\" src=\"https:\/\/blog.generationrobots.com\/wp-content\/uploads\/2018\/07\/IMG_8.jpg\" srcset=\"https:\/\/www.generationrobots.com\/blog\/wp-content\/uploads\/2018\/07\/IMG_8.jpg 900w, https:\/\/www.generationrobots.com\/blog\/wp-content\/uploads\/2018\/07\/IMG_8-300x157.jpg 300w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/>\n   <\/a>\n  <\/figure>\n  \n  \n  <p>\n   C\u2019est parti ! Commencez par vous d\u00e9barrasser du bloc qui affiche le point d\u2019interrogation et du bloc d\u2019\u00e9chelle du texte.\n   <strong>\n    Laissez de c\u00f4t\u00e9 le bloc d\u2019affichage, on s\u2019en servira plus tard !\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   Choisissez le bloc\n   <em>\n    \u201cdessiner une ligne de [X],[Y] \u00e0 [X2],[Y2]\u201d\n   <\/em>\n   dans la biblioth\u00e8que. Modifiez les coordonn\u00e9es de la premi\u00e8re ligne comme expliqu\u00e9 ci-dessus et\n   <strong>\n    r\u00e9p\u00e9tez l\u2019op\u00e9ration 19 fois, en modifiant les coordonn\u00e9es \u00e0 chaque fois\n   <\/strong>\n   . Maintenant, nous allons\n   <strong>\n    ajouter le cercle\n   <\/strong>\n   pour compl\u00e9ter notre ballon de foot.\n  <\/p>\n  \n  \n  <p>\n   Ajouter un bloc\n   <em>\n    \u00ab\u00a0d\u00e9finir l&rsquo;\u00e9chelle du texte sur [X] %\u00a0\u00bb\n   <\/em>\n   et ajustez la taille du cercle aux coutures et \u00e0 l\u2019\u00e9cran (200%).\n   <strong>\n    Pour finir, raccordez la fin du code au nouveau tron\u00e7on !\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   Votre ballon de foot devrait s\u2019afficher sur l\u2019\u00e9cran de Cozmo \u00e0 pr\u00e9sent.\n  <\/p>\n  \n  <div class=\"wp-block-image\">\n  <figure class=\"aligncenter\">\n   <a href=\"https:\/\/blog.generationrobots.com\/wp-content\/uploads\/2018\/07\/cozmo-affiche-le-ballon-de-foot.jpg\">\n    <img decoding=\"async\" width=\"462\" height=\"261\" alt=\"cozmo-affiche-le-ballon-de-foot\" class=\"wp-image-4860\" src=\"https:\/\/blog.generationrobots.com\/wp-content\/uploads\/2018\/07\/cozmo-affiche-le-ballon-de-foot.jpg\" srcset=\"https:\/\/www.generationrobots.com\/blog\/wp-content\/uploads\/2018\/07\/cozmo-affiche-le-ballon-de-foot.jpg 462w, https:\/\/www.generationrobots.com\/blog\/wp-content\/uploads\/2018\/07\/cozmo-affiche-le-ballon-de-foot-300x169.jpg 300w\" sizes=\"(max-width: 462px) 100vw, 462px\" \/>\n   <\/a>\n  <\/figure>\n  <\/div>\n  \n  <h3 class=\"wp-block-heading\" id=\"h-3-faire-parler-cozmo-ajouter-les-dialogues-dans-le-bout-de-code-cozmo-veut-qu-on-lui-pose-une-question\">\n   3. Faire parler Cozmo : ajouter les dialogues dans le bout de code \u201cCozmo veut qu\u2019on lui pose une question\u201d\n  <\/h3>\n  \n  \n  <p>\n   Nous allons maintenant nous occuper de la partie dialogue.\n  <\/p>\n  \n  \n  <p>\n   <span style=\"text-decoration: underline;\">\n    Dans le projet VOYANT MAGIQUE !, l\u2019animation se d\u00e9roule ainsi :\n   <\/span>\n  <\/p>\n  \n  \n  <p>\n   <strong>\n    Cozmo affiche un point d\u2019interrogation sur son \u00e9cran, l\u2019utilisateur pose sa question et le secoue, ce qui l\u2019\u00e9tourdit, puis Cozmo \u00e9nonce sa r\u00e9ponse (et celle-ci appara\u00eet sur l\u2019\u00e9cran).\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   <span style=\"text-decoration: underline;\">\n    Nous allons supprimer cette animation et la remplacer par l\u2019animation suivante :\n   <\/span>\n  <\/p>\n  \n  \n  <p>\n   <strong>\n    Cozmo \u00e9nonce les instructions, l\u2019utilisateur pose sa question : \u201cest-ce que l\u2019\u00e9quipe de France va battre l\u2019Uruguay ?\u201d et appuie sur le cube de cristal pour obtenir la r\u00e9ponse.\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   <strong>\n    A partir de la 2\u00e8me question, le dialogue changera, car Cozmo n\u2019aura pas besoin d\u2019\u00e9noncer les instructions de nouveau. Il demandera simplement \u201cSouhaites-tu un autre pronostic ?\u201d.\n   <\/strong>\n  <\/p>\n  \n  \n  <p>\n   Le\n   <strong>\n    bloc dialogue\n   <\/strong>\n   se trouve dans la cat\u00e9gorie\n   <em>\n    \u201cActions\u201d\n   <\/em>\n   de la biblioth\u00e8que. Rajouter le premier bloc d\u2019instruction\n   <em>\n    \u201cDire\u201d\n   <\/em>\n   et\n   <strong>\n    changer le texte\n   <\/strong>\n   avec le clavier de la tablette.\n  <\/p>\n  \n  \n  <p>\n   D\u00e9placez le bloc\n   <em>\n    \u201cAnimation\u201d\n   <\/em>\n   et remplacer l\u2019animation\n   <em>\n    \u201c28 &#8211; \u00e9tourdi\u201d\n   <\/em>\n   par\n   <em>\n    \u201c2 &#8211; vainqueur\u201d\n   <\/em>\n   .\n  <\/p>\n  \n  \n  <ul class=\"wp-block-list\">\n   \n   <li>\n    <span style=\"text-decoration: underline;\">\n     Texte du premier bloc :\n    <\/span>\n    \u201cGr\u00e2ce \u00e0 moi, remporte tous les paris sportifs !\u201d\n   <\/li>\n   \n   \n   <li>\n    <span style=\"text-decoration: underline;\">\n     Texte du second bloc :\n    <\/span>\n    \u201cDemande-moi si l\u2019\u00e9quipe que tu soutiens va remporter son prochain match. Ensuite, touche mon cube de cristal pour conna\u00eetre mon pronostic !\n   <\/li>\n   \n  <\/ul>\n  \n  \n  <p>\n   Pour tester votre code, appuyez sur le drapeau vert.\n   <strong>\n    Attention, pensez bien \u00e0 raccorder tous les blocs d\u2019une partie de code !\n   <\/strong>\n   (par exemple tous les blocs de la partie \u201cCozmo veut qu\u2019on lui pose une question\u201d).\n  <\/p>\n  \n  \n  <ul class=\"wp-block-list\">\n   \n   <li>\n    <a class=\"catalogue\" href=\"\/blog\/fr\/tutoriel-cozmo-pour-le-cycle-4-projet-cozmo-foot-partie-1\/\" title=\"Tutoriel Cozmo pour le cycle 4 : projet Cozmo Foot ! (partie 1)\">\n     Consultez la premi\u00e8re partie de ce tutoriel\n    <\/a>\n   <\/li>\n   \n   \n   <li>\n    <a class=\"catalogue\" href=\"\/blog\/fr\/tutoriel-cozmo-pour-le-cycle-4-projet-cozmo-foot-partie-3\/\" title=\"Tutoriel Cozmo pour le cycle 4 : projet Cozmo Foot ! (partie 3)\">\n     Consultez la troisi\u00e8me partie de ce tutoriel\n    <\/a>\n   <\/li>\n   \n  <\/ul>\n  \n <\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Dans ce tutoriel p\u00e9dagogique, nous allons vous montrer comment faire vos premiers pas avec l\u2019interface Code Lab de Anki, qui vous permettra de programmer Cozmo. Au programme : rep\u00e9rage dans un plan (x, y), conditions, fonctions et variables ! Activit\u00e9 COZMO FOOT Une mani\u00e8re simple et tr\u00e8s ludique d\u2019apprendre \u00e0 se servir du mode constructeur[&#8230;]<br \/> <a class=\"button\" href=\"https:\/\/www.generationrobots.com\/blog\/fr\/tutoriel-cozmo-pour-le-cycle-4-projet-cozmo-foot-partie-2\/\" style=\"float:right;\">Read this article &gt;&gt;<\/a><\/p>\n","protected":false},"author":188,"featured_media":4913,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1128],"tags":[],"class_list":["post-4884","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-education"],"_links":{"self":[{"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/posts\/4884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/comments?post=4884"}],"version-history":[{"count":10,"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/posts\/4884\/revisions"}],"predecessor-version":[{"id":12277,"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/posts\/4884\/revisions\/12277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/media\/4913"}],"wp:attachment":[{"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/media?parent=4884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/categories?post=4884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.generationrobots.com\/blog\/wp-json\/wp\/v2\/tags?post=4884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}