Comment dessiner un chat méchant en utilisant l'environnement de programmation de traitement?

Il s'agit d'un didacticiel de base pour faire un dessin simple en utilisant uniquement des fonctions de code dans l'environnement de programmation de traitement.
Il s'agit d'un didacticiel de base pour faire un dessin simple en utilisant uniquement des fonctions de code dans l'environnement de programmation de traitement. Pour télécharger ce logiciel open source gratuit, allez sur Processing.org et cliquez sur "télécharger". Une fois que vous avez installé Processing, vous êtes prêt à suivre ces instructions simples pour réaliser votre tout premier dessin.
- 1Ouvrez un nouveau fichier. Pour commencer, ouvrez le programme de traitement. Un «esquisse» ou un nouveau fichier sera automatiquement ouvert et prêt à être saisi. Il sera à l'origine étiqueté "sketch_xxxxxa", avec le mois et le jour en cours dans les positions x dans le nom du fichier. Vous pouvez renommer le fichier comme bon vous semble, en sélectionnant Fichier → Enregistrer sous... et en saisissant un nouveau nom dans la fenêtre qui s'affiche.
- 2Définissez les attributs de la fenêtre. Pour commencer, nous devons spécifier la taille souhaitée de la fenêtre de l'image du chat. Pour ce faire, nous tapons le code suivant:
- taille (200, 200);
- C'est la fonction de taille de fenêtre, et nous passons deux nombres qui représentent combien de pixels de haut et de large nous voulons que le programme dessine la fenêtre. Ici, nous demandons au programme de dessiner la fenêtre 200 pixels de haut et 200 pixels de large.
- 3Après avoir spécifié la taille de la fenêtre, nous pouvons spécifier d'autres attributs de fenêtre, tels que la qualité globale de l'image et la couleur d'arrière - plan. Vous trouverez ci-dessous deux fonctions que nous saisirons pour ce faire:
- lisse();
- arrière-plan (0);
- La fonction de lissage garantit que toutes les formes géométriques dessinées dans cette fenêtre s'afficheront avec des bords anticrénelés. Cela fournit une image de meilleure qualité.
- La fonction background prend un argument numérique, ici un zéro, qui représente une couleur. Étant donné que zéro est la couleur du noir, l'arrière-plan de la fenêtre sera désormais renvoyé en noir.
- 4Définissez les couleurs que vous utiliserez pour le chat. C'est une bonne pratique de programmation d'utiliser des variables pour stocker des données qui seront utilisées à plusieurs reprises tout au long d'un programme. Dans notre cas, nous savons qu'il y a quelques couleurs que nous pouvons vouloir utiliser plus d'une fois dans notre dessin. Nous voulons également rendre la programmation plus facile à lire. C'est pourquoi nous définissons les couleurs RVB avant de les utiliser. Voici les couleurs dont vous aurez besoin pour dessiner votre méchant chat:
- corps de chat de couleur = couleur (226);
- couleur nez d'oreille = couleur (237, 159, 176);
- couleur noir = couleur (0, 0, 0);
- couleur du visage = couleur (202, 200, 193);
- croc de couleur = couleur (249, 16, 85);
- 5Ici, le type de données de couleur peut être défini comme n'importe quel nom souhaité, puis attribué un ensemble ou un numéro de couleur RVB ou en niveaux de gris. La couleur "catbody" ci-dessus a été attribuée à la couleur 226, qui est un gris moyen. Les autres couleurs utilisent l'échelle RVB pour définir des teintes plus spécifiques. Pour en savoir plus sur le RVB, les niveaux de gris et d'autres informations relatives aux couleurs, veuillez vous reporter au didacticiel sur les couleurs de Processing à l'adresse http://processing.org/tutorials/color/.Appréciez le chat méchant et soyez heureux que votre propre chat soit très gentil.
- 6Dessinez les oreilles à l'aide de quatre triangles. Maintenant que nous savons quelles couleurs nous utiliserons, nous allons commencer à dessiner le chat. L'ordre dans lequel nous dessinons ses caractéristiques est important pour l'affichage final, car le programme dessinera chaque forme dans l'ordre dans lequel elle est appelée. Commençons par les oreilles:
- 7Tout d'abord, nous choisissons la couleur avec laquelle nous aimerions que la partie principale des oreilles soit remplie.
- remplir le corps du chat.
- 8Ensuite, nous spécifions les coordonnées x et y des points des triangles qui forment les formes des oreilles:
- triangle (50, 50, 50, 90, 90, 60);
- triangle (150, 50, 150, 90, 110, 60);
- 9Ensuite, nous choisissons une autre couleur pour remplir l'intérieur des oreilles avec:
- remplir (nez d'oreille);
- 10Et enfin, nous spécifions les coordonnées x et y des points formant les triangles de l'oreille interne:
- triangle (55, 55, 55, 95, 95, 65);
- triangle (145, 55, 145, 95, 105, 65);
- 11Puisque la fonction triangle prend trois ensembles de coordonnées x et y pour la fenêtre dans laquelle nous dessinons le chat, nous tapons ces nombres dans l'ordre dans lequel nous voulons que les points du triangle soient dessinés. La fonction fill prend une couleur comme argument et renvoie cette couleur à l' intérieur des triangles qui suivent l'appel. Nous avons maintenant des oreilles!
- 12Dessinez la tête au centre de la fenêtre. Pour dessiner la tête, tapez ce qui suit:
- remplir (corps de chat);
- noStroke();
- ellipse (100, 100, 100, 100);
- 13Ici, nous utilisons une autre couleur de remplissage pour le cercle que nous allons dessiner pour créer la tête du chat. La fonction noStroke spécifie que nous ne souhaitons pas avoir de contour autour de la forme qui la suit. Dans ce cas, cette forme est bien sûr la tête du chat, qui est dessinée à l'aide de la fonction ellipse. La fonction ellipse accepte quatre nombres: une coordonnée x et y pour le placement du cercle, et la largeur et la hauteur en pixels de l'ellipse à cette position.Maintenant que nous savons quelles couleurs nous utiliserons, nous allons commencer à dessiner le chat.
- 14La prochaine étape de notre dessin consiste à fabriquer les crocs de chat méchants. Le code suivant fait cela pour nous:
- remplir (croc);
- triangle (85, 130, 95, 130, 90, 146);
- triangle (95, 120, 105, 120, 100, 146);
- triangle (105, 130, 115, 130, 110, 146);
- 15Essentiellement, nous dessinons trois longs triangles minces pour faire saillie vers le bas à partir de la zone de la bouche. Nous spécifions la couleur de remplissage de nos crocs, puis créons les triangles en utilisant à nouveau les fonctions de triangle.
- 16Parce que nous voulons que les crocs soient partiellement recouverts par la zone du nez du chat, nous dessinons la zone du nez après avoir dessiné les crocs. Le code pour cela est le suivant:
- // dessine le museau
- remplir (visage);
- ellipse (115, 120, 30, 30);
- ellipse (85, 120, 30, 30);
- 17Ici, nous choisissons une couleur de remplissage et dessinons deux ellipses correspondantes sur les crocs aux coordonnées spécifiées.
- //dessiner le nez
- remplir (nez d'oreille);
- accident vasculaire cérébral (1);
- triangle (100, 100, 90, 115, 110, 115);
- 18Ici, nous choisissons une couleur de remplissage pour le nez, en dessinant un petit triangle au centre du visage du chat. La fonction de trait ramène la fonction de contour que nous avons précédemment désactivée, en lui passant le numéro 1 pour indiquer le niveau de gris souhaité pour la couleur du contour du nez.
- 19Ensuite, nous plaçons les yeux. Cela se fait en dessinant des cercles gris contenant des cercles noirs plus petits à l'intérieur. Le code pour cela est le suivant:
- Pour les plus grands cercles gris:
- remplir (visage);
- ellipse (80, 90, 20, 20);
- ellipse (120, 90, 20, 20);
- Pour les petits ronds noirs:
- remplir (noir);
- ellipse (80, 95, 10, 10);
- ellipse (120, 95, 10, 10);
- N'oubliez pas que la fonction de trait est toujours «activée», donc les yeux seront soulignés. Cela ajoute du contraste et est joli.
- Pour les plus grands cercles gris:
- 20Maintenant, pour dessiner les sourcils moyens, nous tapons le code suivant:
- poids du trait(12);
- ligne (90, 80, 70, 65);
- ligne (110, 80, 130, 65);
- 21Puisque nous aimerions que les sourcils soient épais et menaçants, nous voulons utiliser une fonction de ligne et nous voulons que la ligne tracée soit très épaisse. Pour ce faire, nous appelons la fonction strokeWeight, en passant le nombre de pixels de large que nous aimerions que la ligne soit dessinée. Ensuite, nous appelons simplement deux fonctions de ligne, qui acceptent deux ensembles de coordonnées x/y, traçant des lignes entre ces points dans la fenêtre.Définissez les attributs de la fenêtre. Pour commencer, nous devons spécifier la taille souhaitée de la fenêtre de l'image du chat.
- 22La dernière partie du chat à dessiner est ses moustaches. Pour dessiner des moustaches, nous utilisons à nouveau la fonction de ligne. Le code des moustaches est le suivant:
- poids du trait(1);
- ligne (115, 115, 135, 105);
- ligne (117, 119, 135, 120);
- ligne (115, 123, 135, 130);
- ligne (85, 115, 65, 105);
- ligne (83, 119, 65, 120);
- ligne (85, 123, 65, 130);
- 23Notez que nous devons modifier l'épaisseur de trait pour que les lignes ne soient pas dessinées en 12 pixels de large, comme elles ont été dessinées pour les sourcils! Un pixel est suffisant pour une moustache délicate.
- 24Maintenant que nous avons terminé le dessin du chat, il est temps de compiler le programme et de l'exécuter. Tout d'abord, enregistrez le fichier. Ensuite, pour exécuter le programme et voir la fenêtre résultante que nous avons dessinée, appuyez sur le bouton "play" en haut de la fenêtre ou appuyez sur Ctrl + R. Le chat apparaîtra dans sa propre fenêtre 200 x 200.
- 25C'est une bonne idée, lors de la création de vos propres dessins, de vérifier périodiquement la progression du dessin en sauvegardant et en exécutant le programme tout au long du processus de programmation.
- 26Appréciez le chat méchant et soyez heureux que votre propre chat soit très gentil.
Lisez aussi: Comment dessiner un pharaon?