J'AI CODÉ UN SITE POUR TRANSFORMER LES IMAGES EN TEXTE (React, TailwindCSS) | ascii art

Summary

Dans cette vidéo, l'auteur explique la création d'un générateur d'ASCII art en utilisant React et JavaScript. Après avoir abandonné Python en raison de limitations graphiques, il se tourne vers un framework CSS, Twin, pour styliser le site web. Le projet permet de convertir une image en ASCII art, avec la possibilité de personnaliser la densité des lettres, la taille de la police et la couleur de fond. Après une démonstration du site, il partage un lien GitHub pour permettre aux utilisateurs de tester le générateur sur leur propre machine.

Takeaways

• 😀 La programmation attire l'auteur grâce à son côté graphique et minimaliste, avec une beauté dans les lignes de code.
• 😀 Le concept de l'ASCII Art, une technique graphique qui représente des images à l'aide de caractères de la table ASCII, existe bien avant les ordinateurs.
• 😀 L'ASCII Art a pris son essor avec les premiers ordinateurs grand public, et c'est aujourd'hui un art à part entière.
• 😀 Le projet consiste à créer un générateur ASCII Art en ligne où les utilisateurs peuvent uploader une image et la transformer en ASCII Art.
• 😀 L'auteur a d'abord tenté de réaliser le projet en Python, mais a abandonné au profit de React pour plus de liberté graphique.
• 😀 Pour la partie design, l'auteur a utilisé Twin, un framework CSS qui permet d'intégrer le style directement dans les balises HTML.
• 😀 La première étape du projet consiste à transformer l'image en un tableau de caractères, chaque pixel étant associé à un caractère ASCII en fonction de sa luminosité.
• 😀 Les pixels de l'image sont analysés selon leurs valeurs RGB (rouge, vert, bleu) pour déterminer leur luminosité, qui guide l'association avec les caractères.
• 😀 La création de l'image finale avec les caractères est complexe, nécessitant des ajustements pour gérer la densité, la taille de la police, et la taille de l'image de sortie.
• 😀 Le site généré permet de personnaliser plusieurs paramètres comme la couleur, la densité, la taille de la police, et même les caractères utilisés dans l'ASCII Art.
• 😀 En plus de la personnalisation, les utilisateurs peuvent télécharger l'image générée en format PNG via le site ou le code GitHub proposé par l'auteur.

Q & A

Pourquoi l'auteur a-t-il été attiré par la programmation ?

L'auteur a été attiré par la programmation parce qu'il trouve cet univers super graphique, minimaliste et bien équilibré. Il apprécie particulièrement la beauté des lignes de code.

Qu'est-ce que l'ASCII art et d'où vient cette technique ?

L'ASCII art est une technique de design graphique qui permet de représenter une image à l'aide des caractères de la table ASCII. Bien que cette technique ne vienne pas directement de l'informatique, elle a été popularisée avec l'arrivée des premiers ordinateurs grand public.

Pourquoi l'auteur a-t-il abandonné l'utilisation de Python pour ce projet ?

L'auteur a abandonné Python car il estimait que créer quelque chose de beau et fonctionnel avec ce langage demanderait trop d'effort. Il s'est donc tourné vers React, un framework qu'il maîtrise mieux et qui offre plus de liberté pour le design graphique.

Qu'est-ce que le framework Twin utilisé pour ce projet ?

Twin est un framework CSS qui permet d'écrire directement le style du site web dans les balises HTML au lieu de l'écrire dans un fichier séparé. Cela facilite l'intégration du style dans le code.

Comment l'auteur a-t-il transformé une image en tableau de caractères ?

L'auteur a transformé une image en tableau de caractères en associant chaque pixel à une lettre, en fonction de la luminosité du pixel. Cela a été fait grâce à un script qui mesure la luminosité moyenne des couleurs RGB et associe à chaque pixel une lettre proportionnelle à cette luminosité.

Quels paramètres sont personnalisables sur le site web développé ?

Les utilisateurs peuvent personnaliser plusieurs paramètres : la couleur de l'image (incluant un mode monocolore), la densité (le nombre de lettres utilisées), la taille de la police, et les caractères affichés dans l'ASCII art.

Comment la densité de l'image est ajustée ?

La densité est un coefficient entre 0 et 1 qui ajuste la taille des lettres dans l'image finale. Plus ce coefficient est petit, moins il y a de lettres dans l'image, et inversement.

Pourquoi l'auteur a-t-il insisté sur le ratio de placement des caractères dans l'image ?

L'auteur a d'abord tenté de trouver un ratio parfait pour le placement des caractères, mais a vite compris que cela n'était pas possible. Le projet devait être personnalisable, ce qui rendait un ratio fixe inefficace. Il a donc ajusté le placement des caractères en fonction de la taille de la police et de la densité.

Quelles sont les fonctionnalités supplémentaires offertes par le site ?

Le site permet non seulement de personnaliser l'apparence de l'image ASCII, mais aussi de télécharger l'image générée en format PNG, ce qui permet aux utilisateurs de conserver leur création.

Quel site l'auteur mentionne-t-il comme inspiration pour son propre projet ?

L'auteur mentionne un site appelé ASA, qui fonctionne de manière similaire au projet qu'il a développé. Il trouve ce site beau et s'en est largement inspiré pour la création de son propre générateur d'ASCII art.