[Tuto Javascript] 4 étapes pour dessiner une maison 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 p5js gratuitement : https://editor.p5js.org

‍

Étape 1 : Dessiner un mur avec rect(x, y, largeur, longueur, rayon)

‍

Nous allons commencer par dessiner la base de la maison. Nous avons donc besoin de former un rectangle. Pour cela nous allons utiliser la commande rect(x, y, largeur, longueur, rayon)

‍

x :  permet de changer la position horizontale.

y:  permet de changer la position verticale.

largeur : permet de changer la largeur.

longueur : permet de changer la longueur.

rayon : (OPTION) permet d'arrondir les rebords du rectangle

‍

Essayons donc de construire la base de la maison.

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

‍

‍

‍

‍

Étape 2 : Dessiner un toit avec triangle(x1, y1, x2, y2, x3, y3)

Nous allons ensuite dessiner le toit de la maison. Pour cela nous avons besoin de savoir dessiner un triangle. Pour cela 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.

‍

‍

‍

Étape 3 : Dessiner des fenêtres et une porte avec rect(x, y, largeur, longueur, rayon) (à nouveau)

Regarder l'étape 1 pour savoir dessiner avec " rect". Placer 2 fenêtres et une porte.

‍

‍

Étape 4 : Ajouter de la couleur avec fill(r, g, b, a*)

Nous allons maintenant ajouter de la couleur avec la commande fill. Le r c'est l'abréviation pour red, le g pour green et le b pour blue.

‍

r :  quantitté de rouge (entre 0 et 255)

g:  quantitté de vert (entre 0 et 255)

b:  quantitté de bleue (entre 0 et 255)

a (OPTION):  transparence (entre 0 et 255

‍

‍

‍

‍

👏 Bravo !

Vous savez maintenant dessiner en javascript.Vous pouvez facilement améliorer ce dessin en y ajoutant une cheminé, un paysage...

‍

‍

‍

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.