Codage de formes Playdoh simples avec P5.js et Makey Makey : 7 étapes

2025 Auteur: John Day | [email protected]. Dernière modifié: 2025-01-23 14:45

Projets Makey Makey »

Il s'agit d'un projet informatique physique qui vous permet de créer une forme avec Playdoh, de coder cette forme à l'aide de p5.js et de déclencher cette forme pour qu'elle apparaisse sur l'écran de l'ordinateur en touchant la forme Playdoh à l'aide d'un Makey Makey.

p5.js est un environnement de codage créatif open source basé sur le Web en Javascript. En savoir plus ici:

Vous n'avez besoin d'aucune expérience en codage pour réaliser ce projet. Cela pourrait être utilisé comme une introduction au codage basé sur du texte (par opposition aux langages basés sur des blocs comme Scratch). Il vous suffit d'écrire 4 lignes de code pour terminer ce projet. Il existe plusieurs façons de modifier et de développer cette idée de base.

Fournitures

Kit Makey Makey (avec 2 pinces crocodiles)

Playdoh (n'importe quelle couleur)

Ordinateur portable avec connexion Internet

Étape 1: Créez une forme Playdoh

Faites une forme avec le Playdoh. Cela peut être un cercle, un ovale, un carré, un rectangle ou un triangle. Sachez que vous devrez coder cette forme plus tard, donc plus la forme est simple, plus la partie de codage sera facile. Cependant, p5.js est capable de coder de nombreuses formes différentes, même personnalisées, afin que vous puissiez décider du niveau de difficulté que vous souhaitez essayer.

Étape 2: Lancez-vous dans P5.js

Si vous n'avez jamais utilisé p5.js auparavant, je vous recommande de consulter la page de démarrage sur le site Web:

Je recommande également vivement de consulter la chaîne youtube The Coding Train pour d'excellents tutoriels sur l'utilisation de p5.js. Voici un lien vers une playlist qui passe en revue toutes les bases:

Étant donné que p5.js est basé sur le Web, vous pouvez effectuer tout votre codage sur le Web à l'aide de l'éditeur Web p5. Vous n'avez pas besoin d'un compte pour réaliser ce projet, mais si vous souhaitez sauvegarder votre travail, vous devrez créer un compte.

Éditeur Web:

L'éditeur web p5.js a une zone pour écrire le code à gauche et le canevas qui affichera les résultats du code à droite.

Chaque sketch p5.js comprend une fonction setup() et une fonction draw(). La fonction setup() s'exécutera une fois lors du premier démarrage de l'esquisse. Dans la fonction setup() se trouve la fonction createCanvas qui crée un espace où votre forme sera dessinée. Les nombres entre parenthèses de la fonction createCanvas définissent l'axe X (de gauche à droite) et l'axe Y (de haut en bas) du canevas. Les nombres par défaut sont 400, 400, ce qui signifie que votre toile fait 400 pixels de gauche à droite et 400 pixels de haut en bas (vous pouvez toujours les modifier en fonction de vos besoins). Sachez que le coin supérieur gauche du canevas est le point 0, 0. Il sera important de le savoir lorsque vous coderez votre forme.

La fonction draw() s'exécute en boucle, ce qui signifie qu'elle est constamment mise à jour, env. 60 fois par seconde. Cela peut nous permettre de créer une animation dans nos croquis. A l'intérieur de la fonction draw() se trouve la fonction background qui ajoute une couleur à notre canevas. La valeur par défaut est 220 qui est une valeur en niveaux de gris. 0 = noir, 255 = blanc et le nombre entre seront des nuances de gris variables. La fonction d'arrière-plan peut également prendre des valeurs RVB qui nous permettent d'ajouter de la couleur. Plus d'informations à ce sujet dans la prochaine étape.

Étape 3: codez votre forme dans P5.js

Pour coder votre forme, vous n'aurez qu'à ajouter des lignes de code à l'intérieur de la fonction draw().

Chaque forme a sa propre fonction pour la faire apparaître sur la toile. Voici la page de référence pour toutes les formes dans p5.js:

Pour faire un cercle, nous utiliserons la fonction ellipse. Cette fonction prend 3 arguments (les nombres entre parenthèses). Le premier nombre est la position X du centre du cercle sur la toile et le deuxième nombre est la position Y sur la toile. N'oubliez pas que le coin supérieur gauche est 0, 0 et le canevas est de 400 par 400 pixels. Donc, si je veux que le cercle apparaisse au milieu du canevas, je le mettrai à 200 sur l'axe X et à 200 sur l'axe Y. Vous pouvez expérimenter avec ces nombres pour avoir une idée de la façon de placer les choses sur la toile.

Le troisième nombre définit la taille du cercle. Pour cet exemple, il est défini sur 100 pixels de diamètre. La fonction ellipse peut également prendre un quatrième argument qui modifierait le troisième argument pour affecter le diamètre X et le quatrième argument serait le diamètre Y. Cela peut être utilisé pour créer des formes ovales au lieu de cercles parfaitement ronds.

Pour définir la couleur de notre forme, nous utilisons la fonction de remplissage. Cela utilise 3 arguments qui sont les valeurs RVB (R = rouge, G = vert, B = bleu). Chaque valeur peut être un nombre compris entre 0 et 255. Par exemple, pour faire du rouge, on mettrait 255, 0, 0 qui serait tout rouge sans vert ni bleu. Différentes combinaisons de ces nombres créeront différentes couleurs.

Il existe plusieurs sites Web qui fournissent des valeurs RVB pour de nombreuses couleurs différentes, comme celui-ci:

Une fois que vous avez trouvé la valeur RVB correspondant à votre couleur de PlayDoh, écrivez la fonction de remplissage au-dessus de la fonction de forme.

Vous pouvez ensuite cliquer sur le bouton de lecture dans l'éditeur Web et vous devriez voir votre forme apparaître à l'écran.

Étape 4: Faites apparaître votre forme en appuyant sur une touche

Puisque nous voulons que notre sketch p5.js soit interactif avec Makey Makey, nous devons ajouter du code pour que quelque chose se produise lorsque nous appuyons sur une touche du clavier. Dans ce cas, nous voulons que la forme n'apparaisse que si nous appuyons sur une touche. Pour ce faire, nous avons besoin d'une instruction conditionnelle. Cela signifie que quelque chose dans notre code ne se produira que si une certaine condition est remplie, dans ce cas, une touche est enfoncée.

Pour rendre conditionnelle cette instruction conditionnelle, nous commençons par le mot if suivi de parenthèses. A l'intérieur des parenthèses sera la condition que nous voulons être remplies. Dans p5.js, il existe une variable intégrée appelée keyIsPressed (assurez-vous d'utiliser les lettres majuscules exactement de la même manière que celles écrites ici). keyIsPressed est une variable booléenne. Cela signifie qu'il peut avoir la valeur true ou false. Lorsque la touche est enfoncée, sa valeur est vraie et lorsqu'elle n'est pas enfoncée, sa valeur est fausse.

Enfin, nous ajoutons un ensemble d'accolades { }. À l'intérieur des accolades se trouve le code que nous voulons exécuter si notre condition est remplie. Nous allons donc simplement mettre notre code pour créer la forme entre ces accolades.

Maintenant, lorsque nous exécutons notre croquis, nous ne verrons pas la forme tant que nous n'appuyons pas sur une touche du clavier.

REMARQUE IMPORTANTE: lors de l'ajout de touches dans notre code, l'éditeur Web doit savoir si nous appuyons sur une touche pour écrire du code dans l'éditeur de texte ou si nous appuyons sur la touche pour faire la chose que nous avons codée une touche pour faire. Lorsque vous cliquez sur le bouton de lecture, déplacez la souris sur le canevas et cliquez sur le canevas. Cela attirera l'attention de l'éditeur sur l'esquisse et le fait d'appuyer sur une touche déclenchera le code de pression de touche que nous voulons obtenir

Étape 5: Configurer Makey Makey

Sortez la carte Makey Makey, le câble USB et deux pinces crocodiles. Attachez une pince crocodile à la Terre et une à la touche Espace (puisque nous n'avons pas spécifié de clé dans notre code, toute touche sur laquelle nous appuyons déclenchera l'apparition de la forme).

Prenez la pince crocodile attachée à la touche Espace et appuyez sur l'autre extrémité dans la forme Playdoh.

Branchez le câble USB sur l'ordinateur portable.

Étape 6: touchez la forme Playdoh

Tenez l'extrémité métallique de la pince crocodile qui est attachée à la Terre sur le Makey Makey et touchez la forme Playdoh. Lorsque vous touchez la forme Playdoh, la forme codée doit apparaître sur la toile de votre croquis.

Voici un lien vers le sketch p5.js pour ce projet:

Si la forme n'apparaît pas:

1. Assurez-vous d'avoir cliqué avec la souris sur le canevas du croquis p5.js avant de toucher le Playdoh.

2. Assurez-vous que vous tenez l'attache métallique du fil de terre.

Étape 7: Différentes formes

Triangle jaune:

Carré bleu: