Passer la navigation

Code-moji

Par Kassandra Lenters 120 minutes
Niveau
Secondaire 1 et 2 / 7e et 8e année
Disciplines
Arts,
Mathématiques
composants du cadre
  • Programmation
  • Données
  • Conception
Outils et langages
OpenProcessing

Enseignez cette leçon du 5 au 11 décembre pour déverrouiller le Monde des émojis!

Vos élèves pourront imaginer ce monde et s’y exprimer à l’aide de leurs émojis préférés, et ainsi découvrir l’énorme potentiel de la programmation en collaboration!

Monde des émojisSemaine CEP

Concepts clés en programmation

  • Algorithme 
  • Expression conditionnelle 
  • Fonction 
  • Séquence 

Terminologie

Algorithme

Ensemble d’étapes à suivre pour résoudre un problème.

 

Expression conditionnelle

Élément prenant une décision selon des conditions. Par exemple, si une condition est satisfaite, une action sera exécutée, sinon une autre action sera exécutée.

 

Fonction

Type de procédure ou de routine exécutant une opération distincte. Il y a plusieurs fonctions préétablies pour réaliser des actions précises.

 

Séquence

Série de commandes essentielles afin de réaliser une tâche. Les ordinateurs et Scratch lisent et exécutent des commandes de haut en bas.

Créez des emojis avec le code. Dans le cadre de cette activité, les personnes apprenantes remixeront une création p5js pour créer leurs propres emojis interactifs.

Technologie :

  • Ordinateurs avec un accès à Internet

Avant la leçon...

Introduction

Visionnez cette vidéo sur l’histoire des emojis (environ 5 minutes).

Réflexion rapide : « Quels sont les éléments qui vous ont surpris? » « Qu’avez-vous appris de nouveau? »

Annoncez le projet du jour : nous allons créer des emojis interactifs avec un langage de programmation appelé Processing.

Demandez aux personnes apprenantes d’aller à l'adresse openprocessing.org et de se connecter en utilisant le compte que vous avez créé pour la classe.

Dites aux personnes apprenantes d’aller voir le projet « Getting Started » dans OpenProcessing.

Demandez-leur de créer un projet dérivé (« Create a fork »), puis de modifier le projet créé (« Edit ») et de le renommer (voir l’étape 1).

Faites-leur remarquer ces aspects du projet « Getting Started » :

Function setup : Cette fonction met en place notre canevas. Il s'agit du premier événement qui a lieu lorsque nous exécutons notre projet. Il n’a lieu qu’une fois.

Function draw :L'emplacement où nous mettons notre code pour dessiner et créer des animations. Cette fonction est exécutée après la première, mais elle s’exécute en boucle dans le même ordre (la même séquence) que dans le code.

Points-virgules : Nous devons les mettre à la fin de chaque ligne de code à l’intérieur des fonctions void et draw.

Coordonnées X et Y : Veuillez noter que notre canevas utilise des coordonnées x,y. Toutefois, (0,0) n'est pas à l'endroit que l’on pense. Plutôt que d’être dans le milieu, (0,0) se trouve en haut à gauche. Lorsque la valeur de X augmente, le point se déplace vers la droite. Lorsque la valeur du Y augmente, le point se déplace vers le bas.

Commentaires : Le texte avec des barres obliques // représente des commentaires. Nous les voyons, mais ils ne font pas partie du projet.

Présentez le groupe à leur nouvelle amie : la référence de p5js! Ouvrez-la dans un autre onglet.

Faites deux ou trois exercices :

  • Changez la couleur de l'arrière-plan.
  • Faites bouger le cercle vers le milieu.
  • Dessinez un rectangle DERRIÈRE le cercle (faites une montre!).

Jetez un coup d'œil à cet exemple.

Activité

Montrez l’exemple de projet aux personnes apprenantes. Nous allons créer des emojis avec le code.

Demandez aux personnes apprenantes d’ouvrir le projet de départ et de cliquer sur l’icône « FORK » (la fourchette) pour créer un projet dérivé (« Create a fork »).

Utilisez le corrigé pour réaliser les étapes suivantes avec les personnes apprenantes :

  1. Associer des formes aux coordonnées.
  2. Dessiner d'autres formes.
  3. Ajouter de l’interactivité.
  4. Ajouter de la couleur avec des valeurs RVB (RGB).

Accordez-leur une période pour qu'elles puissent travailler sur leur projet. Si le temps vous le permet, faites l'exercice supplémentaire « Personnaliser son emoji ».

Déverrouiller Monde des emojis

Après avoir enseigné, allez au https://canadalearningcode.ca/fr/mondedesemojis et parlez-nous de votre expérience d’enseignement. Vous obtiendrez un code unique pour déverrouiller le Monde des émojis pour votre classe!

Objectifs d’apprentissage

Je peux créer des algorithmes dans p5js.
Je peux dessiner des formes à l’aide des coordonnées x,y.
Je peux utiliser une séquence pour superposer des formes sur mon canevas.
Je peux utiliser des expressions conditionnelles pour ajouter de l’interactivité à mon projet.
Je peux mélanger des couleurs (numériques) à l'aide de valeurs RVB.

Méthodes d’évaluation

Demandez aux personnes apprenantes d’écrire un énoncé d'artiste expliquant leurs décisions de conception. Elles ajouteront leur démarche comme commentaire dans le code de leur dessin. « Cette œuvre s'appelle [nom de l'œuvre]. C’est un [style artistique] créé avec [matériel]. J'ai décidé de [décision de conception] parce que [raison]. » Par exemple : « Cette œuvre s'appelle “Amusant’. C'est un projet d'art génératif créé avec Processing. J’ai décidé de mettre l'arrière-plan bleu parce que le bleu est une couleur complémentaire au jaune. »

Demandez aux personnes apprenantes d'ajouter des commentaires à leur code chaque fois qu’elles modifient le projet de départ. Ainsi, elles pourront comprendre ce que signifie chaque ligne de code.

Arts & Conception

  • Visionnez la vidéo « Step into the Page » sur Glen Keane, animateur chez Disney. Exercez-vous à dessiner des émotions de la même façon que Glen Keane et son père (01:30) en traçant des cercles sur une feuille de papier en écrivant une liste d'expressions sous chaque dessin. Demandez aux personnes apprenantes de choisir l’un des visages et de s'en inspirer pour leur emoji.
  • Voyez des notions sur la théorie des couleurs. Discutez de RVB, qui est un modèle de synthèse additive de couleurs. Utilisez Adobe Colour pour apprendre à propos des agencements de couleur ou discutez des émotions associées aux couleurs.

Mathématiques

Faites un lien avec une leçon de maths sur l'aire. Les personnes apprenantes noteront l’aire de chaque cercle et rectangle de leur dessin en pixels. Lancez-leur le défi d'additionner l’aire totale de tous les cercles et les rectangles de leur dessin ou de calculer l’aire du dessin Processing d’un autre partenaire.

Arts linguistiques + Technologie et Société

Profitez de l’occasion pour lancer une discussion sur l’utilisation des emojis à l’école (p. ex. Il ne faut pas utiliser des emojis dans des travaux écrits, mais les emojis sont permis dans un document de remue-méninges dans Google Docs).

L’histoire des emojis (Tofugu)
https://www.youtube.com/watch?v=SoZlB9pFV2M

Glen Keane – Step into the Page (Future of StoryTelling)
https://www.youtube.com/watch?v=GSbkn6mCfXE

Enseignez des leçons qui sont liées à votre programme existant! https://bit.ly/ActivitésCLC_FR

r

Plus de plans de cours pour Secondaire 1 et 2 / 7e et 8e année

    Voir tous les plans de cours

    Explorez les lessons basé sur les composants du cadre

    Un cadre de référence pancanadien pour l’enseignement de l’informatique

    Bien que l’apprentissage des méthodes de création de projets numériques soit une composante importante de l’enseignement de l’informatique, les élèves devraient aussi développer des compétences et des habiletés diverses leur permettant d’exploiter le potentiel des technologies numériques, tant pour la créer que pour la consommer. Un enseignement de l’informatique complet de la maternelle jusqu’à la fin du secondaire aborde les cinq domaines clés suivants :

    Explorez le cadre ➝

    Programmation

    À la fin de leurs études secondaires, les élèves devraient être en mesure de créer un programme informatique simple.

    Ordinateurs et Réseaux

    À la fin de leurs études secondaires, les élèves devraient être en mesure de comprendre et d’utiliser les outils et les appareils couramment employés pour créer des projets numériques.

    Données

    À la fin de leurs études secondaires, les élèves devraient être en mesure d’expliquer comment utiliser les ordinateurs pour créer, stocker, classer et analyser des données.

    Technologie et Société

    À la fin de leurs études secondaires, les élèves devraient être en mesure de décrire l’influence de la technologie sur la société et vice versa.

    Conception

    À la fin de leurs études secondaires, les élèves devraient être en mesure d’appliquer des principes de conception en créant des projets numériques.