[Tuto Javascript] Apprendre à dessiner des animaux en Javascript

Ce projet est-il pour vous ?

• Difficulté : Facile
• Nombre de ligne de code: ~15-20
• Temps nécéssaire : entre 5-20 min

Les outils dont vous avez besoin

• Un éditeur pour programmer en javascript. Vous pouvez utiliser p5 gratuitement : https://editor.p5js.org

‍

Étape 1 : Dessiner un rond avec ellipse(x, y, largeur, longueur)

Nous allons commencer par dessiner le rond de la tête du chat. . Pour cela nous allons utiliser la commande ellipse(x, y, largeur, longueur)

‍

x :  permet de changer la position horizontale.

y:  permet de changer la position verticale.

largeur : permet de changer la largeur du rond.

longueur : permet de changer la longueur du rond.

‍

Essayons donc de dessiner le rond de la tête du chat.

⚠️ Écrire rect en dessous de "background".

‍

Étape 2 : Dessiner les 2 yeux du chat avec arc(x, y, largeur, longueur, début, fin)

Nous allons ensuite dessiner les 2 yeuxn. Pour cela nous avons besoin de savoir dessiner un arc : nous allons utiliser la commande " arc"

‍

x :  permet de changer la position horizontale.

y:  permet de changer la position verticale.

largeur : permet de changer la largeur de l'arc.

longueur : permet de changer la longueur de l'arc.

début :  l'angle où commencer l'arc

fin:  l'angle où arrêter l'arc

‍

Étape 3 : Dessiner le nez et les oreilles avec triangle(x1, y1, x2, y2, x3, y3)

Nous allons ensuite dessiner le nez du chat avec un triangle retourné. Pour cela nous avons besoin de savoir dessiner un triangle : nous allons utiliser la commande " triangle".

‍

x1 :  permet de changer la position horizontale du point 1.

y1:  permet de changer la position verticale du point 1.

x2 :  permet de changer la position horizontale du point 2.

y2:  permet de changer la position verticale du point 2.

x3 :  permet de changer la position horizontale du point 3.

y3:  permet de changer la position verticale du point 3.

‍

Une fois le nez dessiné, dessiner les 2 oreilles.

⚠️ Écrire les lignes de code permettant de dessiner les oreilles au dessus de la ligne de code permettant de dessiner la tête. Cela permettra de mettre les triangles des oreilles en dessous du cercle dessinant la tête.

‍

Étape 4 : Ajouter une langue  avec arc(x, y, largeur, longueur, début, fin)

‍

Pour savoir comment utiliser la commande arc, veuillez regarder l'étape 1.

‍

👏 Bravo !

Vous savez maintenant dessiner un chat en javascript.Vous pouvez facilement améliorer ce dessin en y ajoutant des couleurs. Vous pouvez aussi approfondir vos talents d'artiste en consultant notre autre tutoriel pour dessiner une maison.

‍

Vous voulez aller plus loin ?

Vous pouvez regarder d'autres tutoriels sur notre blog ou bien prendre une session gratuite avec un de nos instructeurs. Nos instructeurs viennent du top 4 des grandes écoles d’ingénieurs et ont été sélectionnés pour leur compétences développées en programmation ainsi que pour leur pédagogie.

‍