Pixel art
Introduction
Dans ce projet, vous allez créer un éditeur de pixel art. En plus d’utiliser le HTML et le CSS, vous allez apprendre à utiliser le JavaScript pour ajouter de l’interactivité à votre projet.
Comment utiliser l’éditeur: Cliquez sur une couleur de la palette pour choisir la couleur de votre feutre puis cliquez sur les pixels pour changer leur couleur.
Notes pour le leader du club
Introduction:
Dans ce projet, les enfants créeront un éditeur de pixel art. Ils se familiariseront avec le JavaScript pour modifier la couleur des pixels. Ils apprendront aussi à utiliser les tableaux HTML pour créer une grille de pixels.
Ressources en ligne
Nous recommandons d’utiliser trinket pour écrire du HTML & CSS en ligne. Ce projet contient les trinkets suivants :
Des enfants peuvent aussi utiliser ce trinket vide (jumpto.cc/html-blank) pour écrire leur propre code HTML & CSS, ou ils peuvent utiliser ce trinket modèle (jumpto.cc/html-template).
Il y a aussi un trinket contenant une solution d’exemple à tous les challenges :
Ressources hors ligne
Ce projet peut être terminé hors ligne si désiré. Vous pouvez accéder aux ressources du projet en cliquant sur le lien ‘Télécharger matériaux du projet’ pour ce projet. Ce lien contient un dossier ‘Ressources du projet’, laquelle inclut des ressources dont les enfants auront besoin pour terminer ce projet en mode hors ligne. Assurez-vous que chaque enfant ait accès à une copie de ces ressources. Ce dossier inclut les fichiers suivants :
- template/index.html
- template/script.js
- template/style.css
- pixel/index.html
- pixel/style.css
- pixel/script.js
Vous pouvez aussi trouver une version terminée des challenges de ce projet dans la section ‘Ressources bénévoles’, qui contient :
- index.html
- style.css
- script.js
Objectifs d’apprentissage
- Introduction à l’utilisation de JavaScript pour créer des pages Web interactives.
- Présente aussi l’utilisation de l’agencement de tableau.
Ce projet couvre des éléments des composantes suivantes de Raspberry Pi Digital Making Curriculum:
- Conception de ressources 2D et 3D.
- Combiner des structures de programmation pour résoudre un problème.
Challenges
- “Redimensionner votre grille” - ajouter plus de lignes et de cellules à un tableau ;
- “Rendre tous les pixels cliquables” - ajouter un code onclick à tous les pixels.
- “Ajouter plus de couleurs à la palette” - ajouter plus de couleurs à la palette et modifier la couleur du feutre sur un clic.
Créer une grille de pixels
Créons une grille de pixels que vous pouvez utiliser pour créer du pixel art. Le CSS fournit des styles de tableau pour les grilles et des agencements de tableau.
Les tableaux contiennent des lignes qui contiennent des cellules. Vous allez créer un tableau avec un arrière-plan noir, puis placer des pixels blancs à l’intérieur.
- Ouvrez ce trinket : jumpto.cc/web-pixel.
Le projet doit ressembler à ça :
- Ajouter le html suivant dans le <body> de votre fichier index.html pour créer une <div> comme conteneur de votre pixel art et donnez-lui un id art pour pouvoir y appliquer un style :
- Maintenant, allez dans votre fichier style.css et ajoutez la stylisation de tableau pour l’art <div>.
Cela crée un tableau avec une bordure et définit l’espacement à l’intérieur de la grille.
Il n’a pas l’air très intéressant pour l’instant, vous devez placer des lignes de pixels à l’intérieur.
- Maintenant, retournez à ton fichier index.html et ajoutez une ligne de 3 pixels à l’intérieur de l’art <div> :
Remarquez que les lignes de trois pixels sont les mêmes. Saisissez la première, puis faites un copier/coller pour créer les autres.
Cette fois vous utilisez des classes pour styliser les divisions car il y en aura beaucoup.
- Ajoutez le style suivant pour les lignes et les cellules ;
Maintenant, vos pixels s’aligneront dans une grille avec des lignes noires autour.
- Ajoutez maintenant deux autres lignes de pixels pour créer une grille 3 x 3. Souvenez-vous d’utiliser la fonction copier/coller pour gagner du temps.
Défi : Redimensionner votre grille
3 x 3 est une grille plutôt petite pour du pixel art. Pouvez-vous la rendre plus grande ? 8 x 8 est une bonne taille pour du pixel art.
Essayez d’utiliser la fonction couper/coller plutôt que de tout saisir.
Colorer les pixels
Le HTML est utilisé pour organiser votre contenu et le CSS pour le styliser. Le JavaScript est un langage de programmation qui peut être utilisé pour modifier une page Web et la façon d’interagir avec.
Vous pouvez utiliser le HTML et le CSS pour définir la couleur de l’arrière-plan des pixels individuels, mais ce sera très long ! Au lieu de ça, vous allez ajouter un peu de code en JavaScript pour colorer les pixels automatiquement lorsque vous cliquez dessus.
- En JavaScript, le code est placé dans une function qui peut être appelée quand nous souhaitons faire appel à ce code.
Vous allez créer une fonction appelée setPixelColour
La fonction setPixelColour doit savoir de quel pixel il faut modifier la couleur, c’est un input.
Ajoutez le code suivant au fichier script.js pour définir la couleur d’arrière-plan d’un pixel :
Remarquez que backgroundColor utilise les dénominations de couleur américaines.
- Nous devons maintenant faire appel à cette fonction pour qu’elle intervienne lorsqu’on clique sur un pixel.
Le HTML utilise onclick pour appeler une fonction lorsqu’un élément est cliqué. Vous allez devoir faire de ‘this’ l’entrée pour que votre fonction sache de quel pixel il faut modifier la couleur.
Allez dans index.html et ajoutez le code suivant au premier pixel :
- Testez votre code en cliquant sur le premier pixel. Il devrait devenir noir :
Vous n’avez ajouté que le code onclick au premier pixel, donc ça ne fonctionnera pas encore pour les autres pixels.
Défi : Rendre tous les pixels cliquable
Pouvez-vous rendre tous les pixels cliquables ? Utilisez la fonction couper/coller pour aller plus vite.
Créez un petit morceau de pixel art.
Astuce : Vous pouvez cliquer sur Autorun pour supprimer tous les pixels.
Ajouter une palette de couleur
Avez-vous trouvé ennuyeux de ne pas pouvoir modifier la couleur d’un pixel pour la rendre blanche à nouveau en cas d’erreur ? Corrigeons cela en créant une palette de couleurs, pour que vous puissiez cliquer sur une couleur et changer le feutre.
- D’abord, créez un style de feutre.
Ajoutez le code suivant au bas de votre fichier style.css :
- Maintenant, créez des couleurs de feutre noire et blanche qui utilisent ce style.
Ajoutez le code suivant à votre fichier index.html après le <body> :
style= vous permet d’ajouter du CSS à l’intérieur de votre HTML, ce qui est pratique ici.
- Vous voulez pouvoir modifier la couleur du feutre lorsqu’une couleur de la palette est cliquée.
Des variables sont utilisées pour stocker les informations. Créons une variable penColour dans script.js.
Ajoutez le code suivant au sommet du fichier :
Puis ajoutez une fonction pour modifier la penColour :
- Il vous faudra aussi utiliser la couleur du feutre lorsque vous modifiez la couleur d’un pixel.
Modifiez la fonction setPixelColour pour utiliser la variable penColour au lieu de black :
- Vous devez maintenant faire appel à la fonction setPenColour lorsqu’un feutre de couleur est cliqué.
Ajoutez le code onclick en surbrillance à vos couleurs de feutre :
- Maintenant, voyez si vous pouvez faire basculer la couleur du feutre du noir au blanc pour remplir ou supprimer des pixels.
Défi : Ajouter plus de couleurs à la palette
Pouvez-vous ajouter plus de couleurs à la palette ? Choisissez les couleurs avec lesquelles vous voulez créer un pixel art.
Puis créez quelques pixels art.
Indice : La couleur vert clair est appelée chartreuse.
Demandez au leader de votre club si vous pouvez utiliser l’outil de capture d’écran de Windows ou une alternative pour enregistrer une copie de votre pixel art sous forme d’image.
Nous suivre