Code-moji

Technologie :

• Ordinateurs avec un accès à Internet

Avant la leçon...

• Révisez les concepts de programmation et exercez-vous à les expliquer au groupe avec assurance.
• Créez un compte gratuit pour la classe à l'adresse suivante : openprocessing.org/home/join.
• Consultez l'exemple de projet.
• Imprimez le corrigé de l'activité principale (voir ci-dessous).
• Avez-vous des difficultés? Consultez notre ressource de dépannage.

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

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