Programmation graphique en C avec SDL2

Simple DirectMedia Layer (SDL) est une bibliothèque de développement multimédia multi-plateforme conçue pour fournir un accès de bas niveau au matériel multimédia tel que le son, le clavier, la souris, le joystick et les cartes graphiques. Elle offre des fonctionnalités pour la gestion des graphiques, de l'audio, des entrées et sorties, des threads, des timers et bien plus encore. SDL2 est largement utilisée pour créer des applications multimédias telles que des jeux vidéo, des lecteurs vidéo, des émulateurs et des visualisations graphiques.

SDL2 est la deuxième version majeure de cette bibliothèque, apportant des améliorations et de nouvelles fonctionnalités par rapport à SDL1.

SDL est prisée pour le développement de jeux et d'applications multimédia en raison de sa portabilité (Windows, macOS, Linux, iOS, Android, etc.) et de sa simplicité.

Les formes primitives sont les éléments graphiques de base que vous pouvez dessiner à l'écran. SDL2 permet de dessiner des lignes, des rectangles et des points. Pour dessiner des cercles, nous devons implémenter notre propre fonction.

1. Dessiner un Point

   Pour dessiner un point avec SDL2, vous utilisez la fonction SDL_RenderDrawPoint. Voici un exemple :

             
               SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255); // Blanc
               SDL_RenderDrawPoint(renderer, 400, 300); // Dessine un point au centre de la fenêtre
             
           

2. Lignes

   Pour dessiner une ligne, utilisez la fonction `SDL_RenderDrawLine`.

         
         SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255); // Rouge
         SDL_RenderDrawLine(renderer, 100, 100, 200, 200);
         
       

3. Rectangles

   Pour dessiner des rectangles, vous pouvez utiliser SDL_RenderDrawRect pour les rectangles vides et SDL_RenderFillRect pour les rectangles pleins.

             
               SDL_Rect rect = {300, 100, 200, 150}; // x, y, width, height
   
               SDL_SetRenderDrawColor(renderer, 0, 255, 0, 255); // Vert
               SDL_RenderDrawRect(renderer, &rect);
   
               SDL_SetRenderDrawColor(renderer, 0, 0, 255, 255); // Bleu
               SDL_RenderFillRect(renderer, &rect);
             
           

   1. SDL_RenderDrawRect dessine un rectangle vert vide.
   2. SDL_RenderFillRect dessine un rectangle bleu plein.

4. Triangle

   Pour dessiner un triangle, vous pouvez utiliser la fonction SDL_RenderDrawLine pour dessiner ses trois côtés :

             
               void SDL_DrawTriangle(SDL_Renderer *renderer, int x1, int y1, int x2, int y2, int x3, int y3) 
               {
                   SDL_RenderDrawLine(renderer, x1, y1, x2, y2);
                   SDL_RenderDrawLine(renderer, x2, y2, x3, y3);
                   SDL_RenderDrawLine(renderer, x3, y3, x1, y1);
               }
   
               // Utilisation
               SDL_SetRenderDrawColor(renderer, 255, 0, 255, 255); // Magenta
               SDL_DrawTriangle(renderer, 400, 100, 500, 300, 300, 300); // Dessine un triangle.
             
           

5. Dessin de Cercles

   SDL ne fournit pas de fonction pour dessiner des cercles, nous devons donc implémenter cette fonctionnalité nous-mêmes. Nous pouvons utiliser l'algorithme de tracé de cercle de Bresenham.

   1. l'algorithme de tracé de cercle de Bresenham

                              
                              void DrawCircle(SDL_Renderer* renderer, int centreX, int centreY, int radius) {
                                  int x = radius - 1;
                                  int y = 0;
                                  int tx = 1;
                                  int ty = 1;
                                  int err = tx - (radius << 1);
      
                                  while (x >= y) {
                                      // Chaque point est dessiné dans chaque octant
                                      SDL_RenderDrawPoint(renderer, centreX + x, centreY - y);
                                      SDL_RenderDrawPoint(renderer, centreX + x, centreY + y);
                                      SDL_RenderDrawPoint(renderer, centreX - x, centreY - y);
                                      SDL_RenderDrawPoint(renderer, centreX - x, centreY + y);
                                      SDL_RenderDrawPoint(renderer, centreX + y, centreY - x);
                                      SDL_RenderDrawPoint(renderer, centreX + y, centreY + x);
                                      SDL_RenderDrawPoint(renderer, centreX - y, centreY - x);
                                      SDL_RenderDrawPoint(renderer, centreX - y, centreY + x);
      
                                      if (err <= 0) {
                                          y++;
                                          err += ty;
                                          ty += 2;
                                      }
      
                                      if (err > 0) {
                                          x--;
                                          tx += 2;
                                          err += (tx - (radius << 1));
                                      }
                                  }
                              }
                              
                          

   2. Appeler fonction pour dessiner un cercle

      Nous pouvons maintenant appeler cette fonction pour dessiner un cercle :

                                  
                                  SDL_SetRenderDrawColor(renderer, 255, 255, 0, 255); // Jaune
                                  DrawCircle(renderer, 400, 300, 100);
                                  
                              

Une fois que toutes les formes sont dessinées, nous devons présenter le rendu à l'écran :

SDL_RenderPresent(renderer);

1. Rendu graphique

   Le rendu graphique, aussi appelé affichage graphique, est le processus de création d'une image visible à partir de données numériques. Il s'agit d'une étape essentielle dans la programmation graphique, car elle permet de transformer des informations abstraites en représentations visuelles que les utilisateurs peuvent percevoir et interagir avec.

2. Les étapes

   Le rendu graphique implique plusieurs étapes:

   1. Transformation géométrique: Conversion des données 3D ou abstraites en coordonnées 2D adaptées à l'écran.
   2. Rasterisation: Conversion des primitives graphiques (lignes, triangles, polygones) en pixels.
   3. Application des textures: Ajout de détails visuels aux surfaces des objets 3D.
   4. Éclairage et ombrage: Simulation de l'éclairage pour donner du volume et de la profondeur à la scène.
   5. Post-traitement: Application d'effets visuels supplémentaires comme le flou, l'anti-aliasing et la correction des couleurs.
      

      L'anti-aliasing en programmation graphique

      L'anti-aliasing, aussi appelé lissage des bords ou anticrénelage, est une technique utilisée en infographie pour réduire l'effet d'escalier ou de crénelage visible sur les bords diagonaux ou incurvés des images numériques.

      1. Effet d'escalier

         L'effet d'escalier, ou crénelage, apparaît lorsque les pixels d'une image ne sont pas suffisamment nombreux pour représenter fidèlement les formes courbes ou diagonales. Cela se traduit par des bords irréguliers et saccadés, donnant à l'image un aspect pixellisé.

      2. Fonctionnement de l'anti-aliasing

         L'anti-aliasing vise à atténuer cet effet en augmentant le nombre de pixels utilisés pour représenter les bords. Il existe différentes méthodes pour y parvenir:

         1. Suréchantillonnage: Augmenter la résolution de l'image permet d'avoir plus de pixels disponibles pour représenter les détails des bords.
         2. Pondération des pixels: Attribuer des valeurs de couleurs intermédiaires aux pixels situés sur les bords, en fonction de leur proximité avec les pixels voisins.
         3. Filtrage des bords: Appliquer des algorithmes de filtrage pour adoucir les transitions de couleurs entre les pixels.

      3. Avantages de l'anti-aliasing

         L'anti-aliasing améliore la qualité visuelle des images en rendant les bords plus nets et plus fluides. Cela permet d'obtenir un rendu plus réaliste et esthétique, particulièrement important pour les images haute résolution et les jeux vidéo.

      4. Inconvénients de l'anti-aliasing

         L'anti-aliasing peut avoir un impact sur les performances, car il augmente le nombre de calculs nécessaires pour générer l'image. De plus, certaines méthodes d'anti-aliasing peuvent introduire une légère floue dans l'image.

      5. Utilisation de l'anti-aliasing

         L'anti-aliasing est généralement activé par défaut dans les logiciels de graphisme et les jeux vidéo. Le niveau d'anti-aliasing peut souvent être ajusté en fonction des préférences de l'utilisateur et des performances du système.

      6. Conclusion

         L'anti-aliasing est une technique importante en infographie pour améliorer la qualité visuelle des images en réduisant l'effet d'escalier sur les bords diagonaux ou incurvés. Il permet d'obtenir un rendu plus net, plus fluide et plus réaliste, particulièrement important pour les images haute résolution et les jeux vidéo.

3. Les approches

   Le rendu graphique peut être réalisé par le biais de différents approches:

   1. Rendu logiciel: Le processeur CPU effectue tous les calculs nécessaires à la génération de l'image.
   2. Rendu matériel: Le GPU (processeur graphique) est utilisé pour accélérer le processus de rendu, offrant des performances et une qualité d'image supérieures.

1. Renderer

   Un renderer, ou moteur de rendu, est un logiciel ou un composant matériel responsable de la création d'une image visible à partir de données graphiques. Il implémente les algorithmes et techniques nécessaires pour effectuer les étapes du rendu graphique décrites ci-dessus.
   
   En programmation graphique, un renderer est généralement utilisé en conjonction avec une API graphique (comme OpenGL ou DirectX) pour fournir une interface abstraite et simplifiée pour la création de scènes et la gestion du processus de rendu.

2. Différents types de renderers

   1. Renderer immédiat: Génère l'image finale directement à partir des commandes graphiques reçues.
   2. Renderer différé: Stocke les commandes graphiques dans un tampon et les traite ensuite en une seule passe pour optimiser les performances.
   3. Renderer basé sur les tuiles: Divise l'écran en tuiles et rend chaque tuile indépendamment pour une meilleure gestion de la mémoire et des performances.

   Le choix du type de renderer dépend des besoins spécifiques de l'application et des ressources disponibles.

Enfin, nous ajoutons une boucle principale pour garder la fenêtre ouverte et gérer les événements. Nous nettoyons également les ressources avant de quitter.

            
            SDL_Event event;
            int running = 1;
            while (running) 
            {
                while (SDL_PollEvent(&event)) 
                {
                    if (event.type == SDL_QUIT) 
                    {
                        running = 0;
                    }
                }            }

                SDL_DestroyRenderer(renderer);
                SDL_DestroyWindow(window);
                SDL_Quit();

                return 0;
            }

            
        

Code complet pour dessiner des formes primitives avec SDL2

        
        #include <SDL2/SDL.h>
        #include <stdio.h>

        const int WINDOW_WIDTH = 800;
        const int WINDOW_HEIGHT = 600;

        void DrawCircle(SDL_Renderer* renderer, int centreX, int centreY, int radius) 
        {
            int x = radius - 1;
            int y = 0;
            int tx = 1;
            int ty = 1;
            int err = tx - (radius << 1);

            while (x >= y) 
            {
                SDL_RenderDrawPoint(renderer, centreX + x, centreY - y);
                SDL_RenderDrawPoint(renderer, centreX + x, centreY + y);
                SDL_RenderDrawPoint(renderer, centreX - x, centreY - y);
                SDL_RenderDrawPoint(renderer, centreX - x, centreY + y);
                SDL_RenderDrawPoint(renderer, centreX + y, centreY - x);
                SDL_RenderDrawPoint(renderer, centreX + y, centreY + x);
                SDL_RenderDrawPoint(renderer, centreX - y, centreY - x);
                SDL_RenderDrawPoint(renderer, centreX - y, centreY + x);

                if (err <= 0) 
                {
                    y++;
                    err += ty;
                    ty += 2;
                }

                if (err > 0) 
                {
                    x--;
                    tx += 2;
                    err += (tx - (radius << 1));
                }
            }
        }

        int main(int argc, char* argv[]) 
        {
            if (SDL_Init(SDL_INIT_VIDEO) != 0) 
            {
                printf("Erreur d'initialisation de la SDL: %s\n", SDL_GetError());
                return 1;
            }

            SDL_Window* window = SDL_CreateWindow("Dessin de formes primitives",
                                                   SDL_WINDOWPOS_CENTERED,
                                                   SDL_WINDOWPOS_CENTERED,
                                                    WINDOW_WIDTH, WINDOW_HEIGHT,
                                                    SDL_WINDOW_SHOWN);
            if (!window) 
            {
                printf("Erreur de création de la fenêtre: %s\n", SDL_GetError());
                SDL_Quit();
                return 1;
            }

            SDL_Renderer* renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
            if (!renderer) 
            {
                printf("Erreur de création du renderer: %s\n", SDL_GetError());
                SDL_DestroyWindow(window);
                SDL_Quit();
                return 1;
            }

            SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255); // Rouge
            SDL_RenderDrawLine(renderer, 100, 100, 200, 200);

            SDL_Rect rect = {300, 100, 200, 150}; // x, y, width, height
            SDL_SetRenderDrawColor(renderer, 0, 255, 0, 255); // Vert
            SDL_RenderDrawRect(renderer, &rect);

            SDL_SetRenderDrawColor(renderer, 0, 0, 255, 255); // Bleu
            SDL_RenderFillRect(renderer, &rect);

            SDL_SetRenderDrawColor(renderer, 255, 255, 0, 255); // Jaune
            DrawCircle(renderer, 400, 300, 100);

            SDL_RenderPresent(renderer);

            SDL_Event event;
            int running = 1;
            while (running) 
            {
                while (SDL_PollEvent(&event)) 
                {
                    if (event.type == SDL_QUIT) 
                    {
                        running = 0;
                    }
                }
            }

            SDL_DestroyRenderer(renderer);
            SDL_DestroyWindow(window);
            SDL_Quit();

            return 0;
        }

        
      

L'affichage d'images et de textures est un élément essentiel de la programmation graphique avec SDL2. Cela permet d'enrichir vos visuels et de créer des interfaces utilisateur attrayantes.

1. Chargement d'images

   SDL offre des fonctions pour charger des images à partir de différents formats de fichiers courants, tels que BMP, PNG, JPEG et GIF. La bibliothèque SDL_image est généralement utilisée pour cette tâche.

   1. Étapes de base pour charger une image

      1. Inclure l'en-tête SDL_image

         #include <SDL_image.h>

      2. Initialiser SDL_image

         if (!SDL_InitSubSystem(SDL_INIT_IMAGE)) {// Erreur d'initialisation de SDL_image}

      3. Charger l'image

                                                                         
                                                                         SDL_Surface* image = SDL_image_Load("image.png");
                                                                         if (!image) {
                                                                         // Erreur de chargement de l'image
                                                                         SDL_QuitSubSystem(SDL_INIT_IMAGE);
                                                                         SDL_Quit();
                                                                         return 1;
                                                                         }
                                                                         
                                                                     

      4. Utiliser l'image chargée (par exemple, pour la dessiner)

                                                                         
                                                                         // ...
                                                                         SDL_FreeSurface(image); // Libérer l'image après utilisation
                                                                         SDL_QuitSubSystem(SDL_INIT_IMAGE);
                                                                         
                                                                     

      5. Remarques

         1. Assurez-vous que le fichier image est accessible au programme et que le format est pris en charge par SDL_image.
         2. Vous pouvez utiliser des fonctions comme SDL_ImageGetRGBColorMap et SDL_SetColorKey pour manipuler les palettes de couleurs et la transparence des images.
         3. SDL_image fournit des options avancées pour le chargement d'images, telles que le redimensionnement, la rotation et la conversion de formats.

2. Création de textures à partir d'images

   Pour afficher des images dans un contexte graphique accéléré par le GPU, il est nécessaire de créer des textures à partir des images chargées.

   Étapes pour créer une texture à partir d'une image :

   1. Créer un SDL_Renderer

                                                  
                                                  SDL_Renderer* renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
                                                  if (!renderer) {
                                                  // Erreur de création du renderer
                                                  }
                                                  
                                              

   2. Créer une texture à partir de l'image

                                              
                                              SDL_Texture* texture = SDL_CreateTextureFromSurface(renderer, image);
                                              if (!texture) {
                                              // Erreur de création de texture
                                              SDL_DestroyRenderer(renderer);
                                              SDL_FreeSurface(image);
                                              SDL_QuitSubSystem(SDL_INIT_IMAGE);
                                              SDL_Quit();
                                              return 1;
                                              }
                                              
                                          

   3. Utiliser la texture pour le rendu

                                                  
                                                  SDL_RenderCopy(renderer, texture, NULL, NULL); // Copie la texture sur la surface de rendu
                                                  
                                              

   4. Détruire la texture et l'image après utilisation

                                                  
                                                  SDL_DestroyTexture(texture);
                                                  SDL_FreeSurface(image);
                                                  
                                              

      Remarques

      • Les textures sont des ressources GPU et doivent être gérées efficacement pour éviter les fuites de mémoire.
      • Vous pouvez utiliser des fonctions comme SDL_SetTextureBlendMode et SDL_SetTextureAlphaMod pour contrôler le mode de fusion et l'opacité des textures.
      • Les textures peuvent être créées à partir de surfaces générées par logiciel ou directement à partir de données brutes.

3. Affichage de textures

   Pour afficher une texture à l'écran, vous devez la copier sur la surface de rendu du SDL_Renderer.

                                   
                                   void SDL_RenderCopy(SDL_Renderer* renderer, SDL_Texture* texture,
                                   const SDL_Rect* srcrect, const SDL_Rect* dstrect);
                                   /*
                                       renderer : Pointeur vers le SDL_Renderer sur lequel la texture doit être copiée.
                                       texture : Pointeur vers la texture à copier.
                                       srcrect : Rectangle source dans la texture (optionnel, utilise toute la texture par défaut).
                                       dstrect : Rectangle de destination sur la surface de rendu (optionnel, copie la texture à sa position d'origine par défaut).
                                   */
                                   
                               

                                   
                                   SDL_RenderCopy(renderer, texture, NULL,
                                   
                               

4. Surfaces et textures dans SDL2 : Définitions et distinctions

   1. Surfaces

      En programmation graphique avec SDL2, une surface est une structure de données qui représente une zone d'image bitmap. Elle stocke les pixels de l'image, leurs couleurs et d'autres informations associées. Les surfaces sont généralement créées à partir de fichiers d'image ou générées par programme.

      1. Caractéristiques des surfaces

         1. Stockage en mémoire CPU : Les pixels d'une surface sont stockés dans la mémoire CPU, ce qui peut limiter les performances graphiques.
         2. Gestion logicielle : Le rendu des surfaces est géré par le processeur CPU, ce qui peut être moins performant que le rendu GPU.
         3. Formats de pixels variés : Les surfaces peuvent stocker des images dans différents formats de pixels, tels que RGB, RGBA, BGRA, etc.
         4. Manipulation flexible : Vous pouvez manipuler les pixels d'une surface directement, appliquer des effets, créer des masques, etc.

      2. Utilisations des surfaces

         1. Chargement d'images : Les surfaces sont souvent utilisées pour charger des images à partir de fichiers.
         2. Dessin 2D simple : Vous pouvez dessiner des formes, des lignes et du texte directement sur une surface.
         3. Création de textures : Les surfaces peuvent servir de base pour la création de textures GPU.
         4. Manipulation d'images : Vous pouvez appliquer des transformations, des filtres et des effets aux surfaces.

   2. Textures

      Une texture est une ressource graphique stockée dans la mémoire GPU (carte graphique) et optimisée pour un rendu rapide. Elle représente une image ou un motif qui peut être appliquée à des objets 3D ou des surfaces 2D.

      1. Caractéristiques des textures

         1. Stockage en mémoire GPU : Les textures sont stockées dans la mémoire de la carte graphique, ce qui offre des performances de rendu supérieures.
         2. Rendu accéléré par le GPU : Le rendu des textures est géré par le GPU, ce qui permet des performances graphiques plus rapides.
         3. Formats de pixels optimisés : Les textures utilisent des formats de pixels optimisés pour le rendu GPU.
         4. Efficacité de la mémoire : Les textures permettent une utilisation plus efficace de la mémoire GPU que les surfaces.

      2. Utilisations des textures

         1. Rendu 3D : Les textures sont essentielles pour le rendu de surfaces et d'objets 3D.
         2. Effets visuels : Vous pouvez utiliser des textures pour appliquer des effets visuels, tels que des motifs, des lumières et des ombres.
         3. Animations : Les textures peuvent être animées pour créer des effets dynamiques.
         4. Optimisation des performances : L'utilisation de textures peut améliorer considérablement les performances graphiques.

   3. Conclusion

      • Les surfaces sont des structures de données flexibles pour stocker et manipuler des images en mémoire CPU.
      • Les textures sont des ressources graphiques optimisées pour un rendu rapide en mémoire GPU.
      • Les textures offrent de meilleures performances et une meilleure efficacité de la mémoire pour les applications graphiques exigeantes.

      Choisir entre une surface et une texture

      • Si vous avez besoin d'une manipulation flexible des pixels d'une image ou d'un dessin 2D simple, utilisez une surface.
      • Si vous avez besoin de performances graphiques rapides pour le rendu 3D, des effets visuels ou des animations, utilisez une texture.