• Dessiner des formes géométriques - Rectangles, cercles, lignes

• Utiliser les couleurs - Couleurs prédéfinies et personnalisées

• Créer des variables - Stocker des nombres qui changent

• Animer des objets - Faire bouger des formes à l'écran

Vous disposez déjà du programme de base qui :

• • crée une fenêtre de 800 × 600

  • exécute une boucle principale

  • efface l’écran en blanc

Votre travail consiste à modifier le programme en ajoutant du code dans la zone de dessin pour afficher différentes formes.

Étape 1 : Créez un fichier nommé formes.c, puis copiez le code suivant dans ce fichier.

Étape 2 : Dessiner un rectangle contour en utilisant le code suivant :

DrawRectangleLines(250, 50, 150, 100, BLUE);

Étape 3 : Dessiner un rectangle plein en utilisant le code suivant :

DrawRectangle(50, 50, 150, 100, RED);

Étape 4 : Dessiner un cercle en utilisant le code suivant :

DrawCircle(500, 100, 50, GREEN);

Étape 5 : Dessiner un cercle contour en utilisant le code suivant :

DrawCircleLines(650, 100, 50, DARKGREEN);

Étape 6 : Dessiner une ligne en utilisant le code suivant :

DrawLine(50, 250, 350, 300, BLACK);

Étape 7 : Dessiner un rectangle avec coins arrondis en utilisant le code suivant :

DrawRectangleRounded((Rectangle){50, 450, 150, 80}, 0.3f, 10, ORANGE);

Étape 8 : Dessiner un rectangle avec dégradé vertical en utilisant le code suivant :

DrawRectangleGradientV(250, 450, 150, 80, RED, BLUE);

Étape 9 : Dessiner un rectangle avec dégradé horizontal en utilisant le code suivant :

DrawRectangleGradientH(450, 450, 150, 80, YELLOW, GREEN);

Exercice guidé: Modifiez les formes

Faites les modifications suivantes :

• Rectangle rouge : Changez sa position (50,50) en (150,50). Que remarquez-vous ?

• Cercle vert : Augmentez son rayon de 50 à 120. Que se passe-t-il ?

• Ligne noire : Faites-la partir de (0,300) et arriver à (800,300). Que devient-elle ?

• Ajouter les noms des formes sur ces dernières

Questions de compréhension

❓ Si je veux un cercle au centre exact, quelles coordonnées utiliser ?

❓ Que se passe-t-il si je dessine un rectangle en dehors de la fenêtre ?

❓ Pourquoi le triangle utilise-t-il (Vector2) ? (C'est une structure pour stocker un point)

L'objectif de l’activité est de découvrir comment utiliser :

• les couleurs prédéfinies

• les couleurs personnalisées

• la transparence (alpha)

• les dégradés

• Couleurs de base

RED, GREEN, BLUE, YELLOW, BLACK, WHITE

• Nuances

DARKGRAY, GRAY, LIGHTGRAY

• Couleurs spécifiques

PURPLE, ORANGE, PINK, BROWN, SKYBLUE

• Raylib spécifiques

RAYWHITE

Étape 1 : Créez un fichier nommé couleurs.c, puis copiez le code suivant dans ce fichier.

Étape 2 : Observer les couleurs prédéfinies

Ajouter les rectangles suivants :

DrawRectangle(50, 70, 80, 50, RED);

DrawRectangle(150, 70, 80, 50, GREEN);

DrawRectangle(250, 70, 80, 50, BLUE);

DrawRectangle(350, 70, 80, 50, YELLOW);

DrawRectangle(450, 70, 80, 50, PURPLE);

DrawRectangle(550, 70, 80, 50, ORANGE);

Étape 3 : Créer une couleur personnalisée RGB + Alpha.

Ajouter les variables :

Color violet = {150, 0, 255, 255};

Color turquoise = {64, 224, 208, 255};

Color rose_clair = {255, 182, 193, 255};

Étape 4 : Utiliser les couleurs personnalisées.

Dessiner des rectangles avec ces nouvelles couleurs :

DrawRectangle(50, 180, 80, 50, violet);

DrawRectangle(150, 180, 80, 50, turquoise);

DrawRectangle(250, 180, 80, 50, rose_clair);

Étape 5 : Découvrir la transparence (Alpha).

Dessiner un fond :

DrawRectangle(50, 300, 300, 100, LIGHTGRAY);

Puis dessiner trois cercles transparents : 

DrawCircle(120, 350, 50, (Color){255,0,0,150});

DrawCircle(180, 350, 50, (Color){0,255,0,150});

DrawCircle(240, 350, 50, (Color){0,0,255,150});

Observer le mélange des couleurs

Étape 6 : Dégradé vertical.

Dessiner un rectangle avec un dégradé :

DrawRectangleGradientV(50, 460, 150, 80, RED, BLUE);

Observez les couleurs du haut vers le bas

Étape 7 : Dégradé horizontal.

Dessiner un deuxième rectangle avec dégradé :

DrawRectangleGradientH(250, 460, 150, 80, YELLOW, GREEN);

Observez les couleurs de la  gauche vers la droite.

Étape 8 : Ajoutez les titres.

DrawText("Couleurs predefinies", 50, 40, 15, BLACK);

DrawText("Couleurs personnalisees", 50, 150, 15, BLACK);

DrawText("Transparence (Alpha)", 50, 260, 15, BLACK);

DrawText("Dégradés", 50, 430, 15, BLACK);

Exercice guidé: Modifiez les formes

Choisissez trois nombres entre 0 et 255

Créez une couleur avec { nombre1, nombre2, nombre3, 255 }

Dessinez un rectangle avec cette couleur

Donnez un nom à votre couleur (ex: "Bleu océan")

Comprendre la transparence

Alpha = 255 : Opaque (on ne voit pas derrière)

Alpha = 128 : Semi-transparent (on voit à travers)

Alpha = 0 : Invisible

Questions

❓ Que se passe-t-il si on met alpha = 0 ?

❓ Pourquoi a-t-on mis un fond gris derrière les cercles transparents ?

❓ Comment créer du rose ? (Indice: rouge + bleu ? rouge + vert ?)

L'objectif de l’activité est de comprendre comment :

• • modifier une position

  • utiliser une vitesse

  • créer un mouvement continu

Étape 1 : Créez un fichier nommé mvt_simple.c, puis copiez le code suivant dans ce fichier.

Étape 2 : Créer la fenêtre.

• • 800 × 600 : taille de la fenêtre

  • 60 FPS : le programme se met à jour 60 fois par seconde

Étape 3 : Définir la position initiale.

Créer les variables de position du cercle.

int posX = 0;

int posY = 300;

int rayon = 30;

Étape 4 : Définir la vitesse.

Ajouter une variable vitesse. 

int vitesse = 2;

Étape 5 : Mettre à jour la position.

Dans la boucle principale, ajouter : 

posX = posX + vitesse;

Étape 6 : Mettre à jour la position.

Dessiner le cercle.

DrawCircle(posX, posY, rayon, RED);

Étape 7 : Mettre à jour la position.

Dessiner le cercle.

DrawCircle(posX, posY, rayon, RED);

Étape 7 : Détecter quand le cercle sort de l’écran.

Ajouter une condition :

if (posX > 850)

{

    DrawText("Le cercle est sorti de l'ecran !", 250, 400, 20, RED);

}

Frame 1:    posX = 100    [●________________]

Frame 2:    posX = 110    [__●______________]

Frame 3:    posX = 120    [____●____________]

Frame 4:    posX = 130    [_______●_________]

... jusqu'à sortir de l'écran

Exercice guidé 1 : Modifiez la vitesse du mouvement

1. Changez vitesse = 2 en vitesse = 5. Que se passe-t-il ?

2. Changez vitesse = 2 en vitesse = 10. Que remarquez-vous ?

3. Essayez vitesse = -2. Dans quelle direction va le cercle ?

Questions

❓ Pourquoi le cercle finit-il par disparaître ?

❓ Comment faire pour qu'il aille plus vite mais plus "saccadé" ?

❓ Que se passe-t-il si on met vitesse = 0 ?

Exercice guidé 2 : Ajoutons les rebonds

Pour faire rebondir le cercle, nous devons:

• Détecter quand il touche un bord

• Inverser sa vitesse pour qu'il reparte dans l'autre sens

1) Détecter le bord gauche

// Complétez cette condition:

if (___________________ <= 0) {

    // Inverser la vitesseX

}

2) Détecter le bord droit

// Complétez cette condition:

if (____________________ >= GetScreenWidth()) {

    // Inverser la vitesseX

}

L'objectif de l’activité est de comprendre comment :

• • déplacer un objet horizontalement

  • déplacer un objet verticalement

  • combiner les deux pour créer un mouvement diagonal

Étape 1 : Créez un fichier nommé mvt_avancee.c, puis copiez le code suivant dans ce fichier.

Étape 2 : Créer la fenêtre.

• • 800 × 600 : taille de la fenêtre

  • 60 FPS : le programme se met à jour 60 fois par seconde

Étape 3 : Définir la position initiale du cercle.

Créer les variables de position du cercle.

int posX = 0;

int posY = 0;

int rayon = 30;

Étape 4 : Définir les vitesses.

Créer deux vitesses :

int vitesseX = 3;

int vitesseY = 2;

Étape 5 : Mettre à jour la position.

Dans la boucle principale, ajouter : 

posX = posX + vitesseX;

posY = posY + vitesseY;

Étape 6 : Mettre à jour la position.

Afficher le cercle à sa position actuelle.

DrawCircle(posX, posY, rayon, BLUE);

Exercice guidé: Ajoutons les rebonds

Pour faire rebondir le cercle, nous devons:

• Détecter quand il touche un bord

• Inverser sa vitesse pour qu'il reparte dans l'autre sens

1) Détecter le bord gauche

// Complétez cette condition:

if (___________________ <= 0) {

    // Inverser la vitesseX

}

2) Détecter le bord droit

// Complétez cette condition:

if (____________________ >= GetScreenWidth()) {

    // Inverser la vitesseX

}

3) Détecter le bord haut

if (____________________ <= 0) {

    // Inverser la vitesseY

}

4) Détecter le bord bas

if (____________________ >= GetScreenHeight()) {

    // Inverser la vitesseY

}