Premières Formes

🎯 Objectif : Combiner formes, couleurs, remplissage et contour pour créer des compositions visuelles. À la fin de ce chapitre, tu seras capable de dessiner une scène complète en contrôlant précisément l'apparence de chaque élément.

Rappel express#

Dans les chapitres précédents, tu as découvert trois familles d'outils :

Famille	Ce que tu sais faire	Fonctions
📐 Formes	Dessiner des formes géométriques	rect(), ellipse(), triangle(), line(), point(), arc()
🎨 Remplissage	Colorier l'intérieur des formes	fill(), noFill()
✏️ Contour	Contrôler le trait autour des formes	stroke(), noStroke(), strokeWeight()

Ce chapitre, c'est la mise en pratique. On va combiner tout ça pour créer de vraies compositions, comme un artiste qui sort enfin ses pinceaux après avoir appris à les tenir.

Exercice 1 — Placement de formes#

Consigne#

Crée un canevas de 400×300 pixels avec un fond de la couleur de ton choix. Place dessus :

• Un carré (rappel : un carré, c'est un rectangle avec la même largeur et la même hauteur)
• Un triangle
• Une ligne

Les trois formes ne doivent pas se chevaucher.

Contraintes#

• Utilise createCanvas(400, 300) dans le setup()
• Choisis un background() qui te plaît
• Laisse les couleurs par défaut (on les changera dans l'exercice 2)

Ce que tu devrais obtenir#

Un canevas avec trois formes bien séparées. Par exemple :

Indices#

💡 Indice 1 — Un carré est un rect() dont la largeur et la hauteur sont identiques : rect(50, 50, 80, 80) fait un carré de 80×80 pixels.

💡 Indice 2 — Ton canevas fait 400 pixels de large. Divise mentalement l'espace en trois zones : gauche (0 à ~130) pour le carré, centre (~130 à ~270) pour le triangle, droite (~270 à 400) pour la ligne.

💡 Indice 3 — Structure du programme :

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(???);

  // Carré
  rect(???, ???, ???, ???);

  // Triangle
  triangle(???, ???, ???, ???, ???, ???);

  // Ligne
  line(???, ???, ???, ???);
}

Exercice 2 — Changement de couleurs#

Consigne#

Reprends ton code de l'exercice 1 et ajoute des couleurs :

• Le carré doit être rempli en bleu 🟦
• Le triangle doit être rempli en rouge 🟥
• La ligne doit être verte 🟩 et plus épaisse (au moins 3 pixels)

Contraintes#

• Le carré doit avoir un contour noir visible
• Le triangle doit avoir un contour noir visible
• La ligne doit être épaisse (utilise strokeWeight())

Indices#

💡 Indice 1 — Rappel des couleurs de base : fill(0, 0, 255) pour le bleu, fill(255, 0, 0) pour le rouge, stroke(0, 255, 0) pour un contour/ligne vert.

💡 Indice 2 — Une ligne n'a pas de remplissage (fill() n'a aucun effet sur elle). Pour changer la couleur d'une ligne, c'est stroke() qu'il faut utiliser. Et pour l'épaissir : strokeWeight().

💡 Indice 3 — Si tu veux que le carré et le triangle aient un contour noir mais que la ligne soit verte, tu dois changer le stroke() entre les formes :

stroke(0);            // Contour noir pour le carré et le triangle
fill(0, 0, 255);
rect(...);

fill(255, 0, 0);
triangle(...);

stroke(0, 255, 0);   // On passe au vert pour la ligne
strokeWeight(4);
line(...);

🎯 Défi bonus — Le drapeau#

Tu as terminé les exercices 1 et 2 ? Dessine le drapeau d'un pays de ton choix ! Par exemple :

• 🇧🇪 Belgique : trois rectangles verticaux (noir, jaune, rouge)
• 🇫🇷 France : trois rectangles verticaux (bleu, blanc, rouge)
• 🇯🇵 Japon : fond blanc + cercle rouge au centre
• 🇩🇪 Allemagne : trois rectangles horizontaux (noir, rouge, jaune)
• 🇮🇹 Italie : trois rectangles verticaux (vert, blanc, rouge)

💡 Astuce : pour un drapeau, utilise noStroke() pour éviter les traits entre les bandes.

💡 Astuce : pour un drapeau à 3 bandes verticales qui remplit tout le canevas, chaque bande fait un tiers de la largeur. Par exemple avec createCanvas(300, 200), chaque bande fait 100 pixels.

Résumé#

Ce chapitre t'a permis de mettre en pratique les trois piliers du dessin en p5.js :

Pilier	Ce qu'il faut retenir
📐 Formes	Chaque fonction de dessin a ses propres paramètres (position, taille, points...)
🎨 Couleurs	fill() pour l'intérieur, stroke() pour le contour — ils restent actifs jusqu'au prochain appel
📋 Ordre	Ce qui est dessiné en dernier apparaît par-dessus — comme des couches de peinture

Et les bonnes habitudes à garder :

• Définis le style (fill, stroke, strokeWeight) juste avant chaque forme
• Pense en couches : fond → éléments lointains → éléments proches

Dans le prochain chapitre, on va découvrir les variables — et ça va tout changer. Au lieu d'écrire des nombres fixes partout, on pourra utiliser des noms pour stocker et réutiliser des valeurs. C'est le premier pas vers des programmes vraiment dynamiques !