Création d'un programme de génération de mosaïques de texte en .NET - Delphi.NET

Une mosaïque de texte (text mosaic en anglais) est en fait simplement une image composée de texte. C'est un effet décoratif et amusant. Les mosaïques de texte sont parfois aussi appelées ASCII Mosaic dans certaines contrées du web. On en distingue cependant trois types principaux :

• celles dont le texte se répète simplement (exemple ci-dessous) ;
• celles dont les caractères sont tous issus d'un random ;
• celles dont le texte est un texte complet.

Dans la plupart des cas, le format de prédilection pour exporter des mosaïques de texte est le HTML. C'est ce format que générera le logiciel final de ce tutoriel.

Le principe est extrêmement simple :

1. Décomposer l'image en carrés de petite taille ;
2. Calculer la couleur moyenne de chaque carré ;
3. Ajouter au document final un caractère avec la couleur calculée.

Afin d'obtenir la couleur moyenne de chaque carré, nous devons d'abord créer une fonction calculant la couleur moyenne d'un bitmap. Chaque pixel étant composé de trois composantes (rouge, vert et bleu), il nous suffit d'additionner les composantes de tous les pixels entre elles, et de diviser chaque nombre obtenu par le nombre total de pixels. La couleur moyenne d'une image est en fait composée des moyennes des composantes RGB de tous ces pixels.

Rappels

• En .NET, on utilise la fonction Bitmap.GetPixel(x,y) pour récupérer chaque pixel sous la forme d'un type Color. Le type Color contient les variables R, G et B contenant les valeurs des composantes rouge, verte et bleue du pixel.
• Pour créer directement un Color, on utilise la fonction Color.FromARGB à laquelle on passe en paramètres les valeurs des composantes RGB.

Voici le code de la fonction en question :

function AverageColor(Bitmap : Bitmap): Color;
var
  i, j : word;
  tRed, tBlue, tGreen : int64;
  TotalPixels : int64;
begin
  tRed := 0; tBlue := 0; tGreen := 0;
  for i := 0 to Bitmap.Width - 1 do
    for j := 0 to Bitmap.Height - 1 do
      begin
        tRed := tRed + Bitmap.GetPixel(i,j).R;
        tBlue := tBlue + Bitmap.GetPixel(i,j).B;
        tGreen := tGreen + Bitmap.GetPixel(i,j).G;
      end;
  TotalPixels := Bitmap.Width * Bitmap.Height;
  Result := Color.FromArgb(tRed div TotalPixels, tGreen div TotalPixels, tBlue div TotalPixels);
end;

N'oublions pas qu'en HTML, les couleurs se codent en hexadécimal. Et comme on ne connait pas la fonction pour convertir un integer en un string le représentant en hexa, il va nous falloir nous écrire une petite fonction. Il existe certainement des algorithmes plus compliqués pour cette opération, mais le principe suivant est bon à connaitre, car il peut s'avérer très utile dans les moments de grands désespoirs.

Il suffit de créer un tableau contenant toutes les valeurs hexadécimales de 0 à 255 (avec une bonne boucle for c'est vite fait), et d'assigner à chaque integer la valeur du tableau correspondant à son contenu. Exemple: pour un integer contenant la valeur 25, sa valeur hexadécimale sera la 26^e du tableau, soit HexValues[25];.

Voici le code de la fonction :

HexValues : array [0..255] of string =
('00','01','02','03','04','05','06','07','08','09','0A','0B','0C','0D','0E','0F',
'10','11','12','13','14','15','16','17','18','19','1A','1B','1C','1D','1E','1F',
'20','21','22','23','24','25','26','27','28','29','2A','2B','2C','2D','2E','2F',
'30','31','32','33','34','35','36','37','38','39','3A','3B','3C','3D','3E','3F',
'40','41','42','43','44','45','46','47','48','49','4A','4B','4C','4D','4E','4F',
'50','51','52','53','54','55','56','57','58','59','5A','5B','5C','5D','5E','5F',
'60','61','62','63','64','65','66','67','68','69','6A','6B','6C','6D','6E','6F',
'70','71','72','73','74','75','76','77','78','79','7A','7B','7C','7D','7E','7F',
'80','81','82','83','84','85','86','87','88','89','8A','8B','8C','8D','8E','8F',
'90','91','92','93','94','95','96','97','98','99','9A','9B','9C','9D','9E','9F',
'A0','A1','A2','A3','A4','A5','A6','A7','A8','A9','AA','AB','AC','AD','AE','AF',
'B0','B1','B2','B3','B4','B5','B6','B7','B8','B9','BA','BB','BC','BD','BE','BF',
'C0','C1','C2','C3','C4','C5','C6','C7','C8','C9','CA','CB','CC','CD','CE','CF',
'D0','D1','D2','D3','D4','D5','D6','D7','D8','D9','DA','DB','DC','DD','DE','DF',
'E0','E1','E2','E3','E4','E5','E6','E7','E8','E9','EA','EB','EC','ED','EE','EF',
'F0','F1','F2','F3','F4','F5','F6','F7','F8','F9','FA','FB','FC','FD','FE','FF');

function RGBColorToHEXColor(RGB : Color) : string;
var
  sFinal : string;
begin
  sFinal := '#';
  sFinal := sFinal + HexValues[RGB.R];
  sFinal := sFinal + HexValues[RGB.G];
  sFinal := sFinal + HexValues[RGB.B];
  Result := sFinal;
end;

Travaillant en windows forms, l'interface finale ressemblera à celle-ci :

Soit :

• 4 Button (System.Windows.Forms.Button) ;
• 3 Label (System.Windows.Forms.Label) ;
• 1 ComboBox (System.Windows.Forms.ComboBox) ;
• 1 TextBox (System.Windows.Forms.TextBox) ;
• 1 RichTextBox (System.Windows.Forms.RichTextBox) ;
• 1 PictureBox (System.Windows.Forms.PictureBox) ;
• 1 ProgressBar (System.Windows.Forms.ProgressBar) ;
• 2 GroupBox (System.Windows.Forms.GroupBox)(facultatif).

C'est une interface très simple ; rien ne vous empêche d'aller plus loin et de l'améliorer.

Voici le code pour ouvrir une image dans le PictureBox de la form. On sentira une nette différence par rapport à un code Delphi pour Win32, dans la forme du code (if OpenDialog1.Execute then Image1.Picture.LoadFromFile(FileName);).

  OpenFileDialog1.Filter := 'Graphics|*.bmp;*.jpg;*.gif;*.png|All|*.*';
  if OpenFileDialog1.ShowDialog = System.Windows.Forms.DialogResult.OK then
    PictureBox1.Image := Image.FromFile(OpenFileDialog1.FileName);

De la même manière, on utilise le même OpenFileDialog pour charger un fichier texte dans le RichTextBox. Assigner les Filters au début de chaque procédure permet de n'utiliser qu'un seul OpenFileDialog pour les deux opérations.

  OpenFileDialog1.Filter := 'Text Files|*.txt|All|*.*';
  if OpenFileDialog1.ShowDialog = System.Windows.Forms.DialogResult.OK then
    rtbTextFile.LoadFile(OpenFileDialog1.Filename);

Le bouton Voir permet d'ouvrir directement la mosaïque générée dans le navigateur par défaut. En .NET, la fonction ShellExecute disparait, pour laisser place à un nouveau type: ProcessStartInfo, que l'on passe en paramètre de la fonction System.Diagnostics.Process.Start une fois rempli. Le booléen UseShellExecute permet d'ouvrir un fichier exactement comme si on double cliquait dessus dans l'explorateur.

var
  psi : ProcessStartInfo;
begin
  psi := ProcessStartInfo.Create;
  psi.UseShellExecute := true;
  psi.Verb := 'open';
  psi.FileName := MosaicFileName;
  MessageBox.Show(MosaicFileName);
  System.Diagnostics.Process.Start(psi);
end;

III-C-1. Structure du HTML Final▲

<html>
  <head>
    <title>Titre</title>
  </head>
  <body style="line-height: 0.7" bgcolor="black">
    <basefont face="Nom de Police" size="1">
      <b>
        <font color="#A6C5DF">A</font><font color="#AAC7E1">B</font><font color="#00C756">C</font><br>
        <!-- ect... -->
      </b>
    </font>
  </body>
</html>

III-C-2. Variables de la procédure▲

var
  FRZ : array of Char; //La liste des caractères du texte
  i : byte; 
  HTMLSL: StreamWriter; //Contient et écrit sur le disque le HTML final.
  AWidth, AHeight : word; //La position en cours dans l'image.
  IndexInFraz : byte; //la position dans la liste des caractères.
  BufferBitmap : Bitmap; //Le bitmap contenant les parties de l'image.
  BufferGraphic2 : Graphics; //Le graphique associé au bitmap.
  BufferColor : Color; //La couleur moyenne des parties.
  Rect : Rectangle; //Le Rectangle de contenant les coordonnées des parties.
  MainGraphic : Graphics; //L'image principale
  BufferSize : SizeF; //Contient la taille des caractères en pixels.
  BufferString : string; 
  BufferInt : word;
  UseRandomChars : boolean; //Dépend de si on est en mode Caractères Aléatoires 
  CurrentChar : Char; //Le caractère en cours.

III-C-3. Préparation▲

  if SaveFileDialog1.ShowDialog = System.Windows.Forms.DialogResult.Cancel then
    Exit;
  bGenerate.Enabled := false;
  ProgressBar1.Maximum := PictureBox1.Image.Height+15;
  ProgressBar1.Value := 0;
  UseRandomChars := cbMosaicType.SelectedIndex = 1;
  HTMLSL := StreamWriter.Create(SaveFileDialog1.FileName);
  HTMLSL.WriteLine('<html><head><title>.NET Text Mosaic</title></head><body style="line-height: 0.7" bgcolor="black">'
  +'<basefont face="'+FontDialog1.Font.Name+'" size="1"><b>');
  MainGraphic := Graphics.FromImage(PictureBox1.Image);

  if cbMosaicType.SelectedIndex = 0 then
    begin
      tbSimpleText.Text := tbSimpleText.Text.ToString;
      setlength(FRZ, length(tbSimpleText.Text));
      tbSimpleText.Text.CopyTo(0, FRZ, 0, length(FRZ));
    end
  else if cbMosaicType.SelectedIndex = 2 then
    begin
      BufferString := '';
        for i := 0 to length(rtbTextFile.Lines) - 1 do
          BufferString := BufferString + rtbTextFile.lines[i];
      setlength(FRZ, Length(BufferString));
      BufferString.CopyTo(0, FRZ, 0, length(FRZ));
    end;

III-C-4. Génération de la mosaïque▲

  IndexInFraz := 0;
  AHeight := 0;
    repeat
      AWidth := 0;
        repeat
          //reste de la procedure
          AWidth := AWidth + Rect.Width;
          Application.DoEvents;
        until AWidth > PictureBox1.Image.Width;
      HTMLSL.WriteLine('<br>');
      AHeight := AHeight + Rect.Height-4;
      ProgressBar1.Value := ProgressBar1.Value + Rect.Height-4;
    until AHeight > PictureBox1.Image.Height;

  if not UseRandomChars then
    begin
      inc(indexinfraz);
        if indexinfraz = length(FRZ) then
          indexinfraz := 0;
      CurrentChar := FRZ[IndexInFraz];
    end
  else
    begin
      repeat
        BufferInt := Random(91);
      until (BufferInt > 64);
      CurrentChar := Convert.ToChar(BufferInt);
    end;

BufferSize := MainGraphic.MeasureString(CurrentChar, FontDialog1.Font);
Rect.X := AWidth; Rect.Y := AHeight;
Rect.Width := Round(BufferSize.Width);
Rect.Height := Round(BufferSize.Height);
BufferBitmap := Bitmap.Create(Rect.Width, Rect.height, PixelFormat.Format24bppRgb);
BufferGraphic := Graphics.FromImage(BufferBitmap);
BufferGraphic.DrawImage(PictureBox1.Image, 0,0, Rect, GraphicsUnit.Pixel);
BufferColor := averagecolor(BufferBitmap);

HTMLSL.Write('<font color="'+RGBColorToHEXColor(BufferColor)+'">'+CurrentChar+'</font>');

III-C-5. Finalisation▲

  HTMLSL.WriteLine('</b></font></body></html>');
  HTMLSL.Close;
  bGenerate.Enabled := true;
  bSeeMosaic.Enabled := true;
  MosaicFileName := SaveFileDialog1.FileName;

Voici quelques exemples de mosaïques générées avec ce logiciel :

Voici une liste d'améliorations possibles pour ce logiciel :

• permettre à l'utilisateur de choisir la couleur de fond ;
• inclure la gestion des fichiers JPEG et autres ;
• inclure les autres caractères dans la génération aléatoire (pas seulement les lettres majuscules).

Dans tous les cas, un grand nombre d'améliorations sont possibles. N'hésitez pas à utiliser ce code dans vos applications.

C'est un programme tout simple qui ne demande à être amélioré. Il permet aussi de se familiariser avec le langage Delphi pour .NET tout en s'amusant un peu.

Les sources du logiciel (zip) : TextMosaic_SRC.zip
L'exe de l'application : TextMosaic.exe

Les Fichiers HTML des exemples :

• Developpez.com
• Earth Is Great

Article écrit par ZeWaren.
Pour tout contact :
N'hésitez pas à visiter mon site : fzwte.net

J'espère que cet article vous a plu, et qu'il vous a servi à quelque chose. N'hésitez pas à me contacter si vous trouvez une erreur ou si vous avez quoi que ce soit qui pourrait améliorer cet article.