Ascii'o'matic - L'ASCII Art online !

Soumis par bonvga le 13 juillet, 2003 - 21:35

L'ascii art, c koi ? Pour commencer, quelques exemples de ce qui se trouve sur le net chris.com ou alors une simple recherche sur google.

Cliquez ici pour tester le script en ligne.

Bon, bref, (en gros) comment ça marche ? Simple ! On utilise la table de caractères disponible pour construire un dessin ou une image avec. En général on utilise une police de caractères "de taille fixe" comme la police "system" sous une commande ms-dos ou la police "courrier". En l'occurrence on utilisera la police "courier".

Principe de base, prenons 4 caractères différents (au pif quoi), et regardons les à la loupe ! voila le résultat :

ascii01.jpg

Magnifique culture de pixel ! Bon, a première vue, on observe que le caractère "B" est plus foncé que le "c" (non c pas un effet d'optique à la con à cause des couleurs !). Pour le prouver comptez les pixels représentant le caractère "B" et le caractère "c" (les pixels noirs en fait).... alors ? .... 26 pour le "B" et 12 pour le "c". Bon ! On en déduit alors que "plus ya de pixels, plus c sombre, moins ya de pixel plus c clair !" (c clair ?). Dans ce cas on peut représenter les contrastes d'une image uniquement avec des caractères ! C'est le principe de base de l'ascii art ! Facile non ?

Généralement, (et je dis bien généralement) on trouve sur le net des fichiers ascii art et mode texte lisibles sous bloc-note ou autre éditeur. Bref du monochrome. L'outil présenté ici, permet également de travailler en couleur sur des pages html en utilisant des balises "font" pour définir la couleur.

Passons à la technique, vous avez certainement testé l'appli donc je passe à la suite. On entre paramètre : une image, un mapping (série de caractères ascii) et un niveau de qualité.

Le script PHP prend l'image et la passe dans un outil nommé "convert". Ce magnifique outil de la série ImageMagick permet de convertir une image de format x vers un format y, je vous passe les détails, allez donc voir sur le site. Cette image envoyée par vous même est redimensionnée dans une résolution de 100 pixels par 100 (car c'est suffisant) puis convertie au format RGB. Une fois ce traitement effectué, le script charge l'image RGB et effectue une moyenne des 3 composantes de couleurs pour obtenir une image en niveaux de gris. Les niveaux de gris vont être calqué sur le mapping ascii pour obtenir les contrastes ensuite le caractère ascii ainsi déduit sera coloré selon la valeur les composantes RGB. Pour optimiser le résultat final, le script effectue un décalage bit à bit sur chaque composante RGB et diminue ainsi le nombre de couleurs.

ascii02.gif

Simple non ? Si vous avez des questions, n'hésitez pas à déposer un commentaire dans le formulaire en bas de page.

Fichier attachéTaille
asciiomatic.zip6.54 Ko

Posté dans les catégories , et

29 commentaires pour “Ascii'o'matic - L'ASCII Art online !”

Portrait de marfun

Le 23 juillet, 2003 - 22:18
marfun a écrit

pas mal ça au moins j'aurai appris que plus y aura de pixel plus ce sera sombre...

sinon quelle différence entre les pages web html et php ?

le php est plus complexe que le html je pense non ??

Portrait de Anonyme

Le 1 août, 2010 - 15:09
Anonyme a écrit

Je vais te la faire TRES court. le .html (.htm) est une page web static, qui peut être embelis avec le css, javascript flash et diverse autre chose. Alors que le php, est une page plus complexe reprenant le principe d'une page html, avec les embelissement possible, mais là, la page est moins static, c'est a dire quelle s'adapte a certaune cituation et est généré a chaque fois pas le server, et donc peut être changé automatiquement celon une DB ou l'utilisateur etc ... je pourrais rentré dans de nombreux détails, mais en clair : Page Html : Page static modifier seulement par l'utilisateur et ne change pas celon les situation. Page php : Page généré par le server celon l'utilisateur, une DB ou autre.

Petit exemple rapide : Une page par exemple voircommentaire.php . Donc sans rentré dans les detail de code, quand elle sera ecrite dans le navigateur voircommentaire.php?commentaire=550 le server cherchera dans la DB (DataBase) le commentaire 550, mais il existe de nombreuse variante tous dépendra de comment tu la programmera ^^

Si j'ai fait une erreur que l'on me fasse signe, mais je n'est pas voulut rentré trop dans les detail Tongue

Cordialement Wink

Portrait de Anonyme

Le 1 août, 2010 - 15:13
Anonyme a écrit

Hum mon exemple veut pas dire grand chose, je l'est réécris Wink

Petit exemple rapide :
Prenons une X page : voircommentaire.php

Sans rentré dans les detail de code, quand elle sera écrite dans le navigateur voircommentaire.php?commentaire=550 le server cherchera dans la DB (DataBase) le commentaire 550, et génerera une page web avec le contenu du commentaire afficher, mais la page n'existait pas réellement, c'est le server qui a tous "assemblé" (ou collé^^) pour récupéré la page souhaité. Mais il existe de nombreuse variante tous dépendra de comment tu la programmera ^^

Biensur le php ne fait pas que cela, il permet de créé des blog par exemple, de créé des espace membre (Un endroit ou on se connecte et ou on gère sont profil) etc ...

Portrait de monkey

Le 27 juillet, 2003 - 22:55
monkey a écrit

G rien entravé a ton explication, mais tu sais comme je suis ... un peu long
Smile

Portrait de bonvga

Le 28 juillet, 2003 - 00:20
bonvga a écrit

Je sais, je suis mauvais pédagogue.. Bah si t'as des questions n'hésite pô !

Portrait de Anonymous

Le 28 mai, 2007 - 11:37
Anonymous a écrit

tu px m'expliker en detail kommen avoir le code source HTML ca m'aiderai bcp

Portrait de marfun

Le 13 août, 2004 - 23:43
marfun a écrit

C vraiment génial tout ça Wink

Portrait de bonvga

Le 13 septembre, 2004 - 22:59
bonvga a écrit

Ahhhhhhh Laughing out loud Laughing out loud Laughing out loud La v2 fonctionne enfin !

Portrait de bonvga

Le 7 mai, 2005 - 03:19
bonvga a écrit

et la vidéo c'est pour quand ?
ben maintenant ! Smile

Portrait de TiTeBIx

Le 22 juillet, 2005 - 18:23
TiTeBIx a écrit

Ou pourrais je trouver un némo en ascii ?

Portrait de bonvga

Le 22 juillet, 2005 - 19:22
bonvga a écrit

Trouvez une image de nemo. Par exemple celle-ci :

nemo sushi

Puis passez la à ascii'o'matic pour la convertir. Cool

Portrait de TiTeBIx

Le 27 juillet, 2005 - 13:32
TiTeBIx a écrit

Ascii'o'matic ???????? :?:

Portrait de bonvga

Le 15 août, 2005 - 19:35
bonvga a écrit

Exactement Laughing out loud

Portrait de trotter

Le 20 septembre, 2006 - 19:55
trotter a écrit

Bug, quand on uploade une image, puis qu'on décide qu'on la veut que en noir et blanc, l'image n'apparait plus.

Portrait de bonvga

Le 21 septembre, 2006 - 21:59
bonvga a écrit

J'ai vérifié et je n'ai pas trouvé de problèmes.

Attention, quand une image est uploadée, il faut mettre l'option 'Or use the previous uploaded image' à 'yes' pour réutiliser la même image. Sinon, il faut forcement la reuploader.

Tennez moi au courant Wink

Portrait de Anonymous

Le 1 novembre, 2006 - 22:05
Anonymous a écrit

Quand je fais un copier/coller de l'image (pour la mettre sur ma signature) ça n'écrit que des chiffres et pas en couleurs :s Aidez moi svp ;_;

Portrait de bonvga

Le 1 novembre, 2006 - 22:42
bonvga a écrit

Je ne sais pas où voulez copier-coller votre signature (sur ce site, sur un forum, ou autre) mais quand vous voulez concerver la couleur, il faut copier-coller le code HTML généré par ascii'o'matic et non le résultat d'ascii'o'matic.

C'est pour cela que la couleur est perdue.

Portrait de mamatt0201

Le 11 novembre, 2006 - 22:55
mamatt0201 a écrit

slt a tous je voudrais savoir commen faire pr enregistreé une image apré kel soi passé ascii o matic mersi pour vo futur répons

Portrait de Anonymous

Le 1 janvier, 2007 - 14:55
Anonymous a écrit

Dans la démo, il y a deux liens qui pointent sur cette même page : un "about" et un "download". Il est où le download alors ? Laughing out loud

Portrait de bonvga

Le 1 janvier, 2007 - 15:49
bonvga a écrit

En fait c'est sur la même page (cette page) j'ai ajouté une ancre pour pointer au bon endroit de la page. J'espere que c'est plus clair Wink

Portrait de Anonymous

Le 5 avril, 2007 - 17:41
Anonymous a écrit

Il faut faire comment pour la mettre sur un blog ?
Je n'ai pas trop compris avec le HTLM
vous pourrez m'éclairé ^_^

Merci pour une future réponse

A+

Portrait de bonvga

Le 7 avril, 2007 - 20:04
bonvga a écrit

Quand le rendu est en noir et blanc, il suffit de faire un copier-coller.

Par contre quand il est en couleur, il faut copier l'HTML (dans la source de la page)

Portrait de Anonymous

Le 18 avril, 2007 - 13:30
Anonymous a écrit

bonjour,

J'ai regardé un peu partout et je n'ai pas trouvé comment faire pour mettre l'image en couleur sur mon blog. J'ai bien compris qu'il faut l' html de la source de l'image mais je ne trouve pas ça ne fonctionne pas... quelqu'un pourrai m'aider svp?

Portrait de Ookanu

Le 10 juillet, 2007 - 20:28
Ookanu a écrit

Pardon, je viens juste de m'inscrire sur le site .

Je trouve les ASCii très bien fait !
Mais j'aimerai savoir, j'aimerais mettre une de ses ASCii sur un blog, comment faire pr avoir les codes couleurs et tout ce genre de choses ?
[ parce que j'en quand même tenter le copier/coller, mais ca ressemble a rien o__ô ]

Portrait de bonvga

Le 19 juillet, 2007 - 21:54
bonvga a écrit

Bonsoir,

Pour copier-coller un asciiart en couleur, il faut copier le code html (sur IE, afficher la source de la page) puis le coller sur votre blog en tant que format html.

Portrait de monkey

Le 17 juillet, 2007 - 20:10
monkey a écrit

Il va falloir attendre un peu pour la réponse, car Monsieur BonVGA est actuellement avec la toute fraiche Madame BonVGA en lune de miel.
Dés son retour je pense qu'il se fera un plaisir de te répondre

~ L'homme n'est pas fait pour travailler, la preuve c'est que cela le fatigue. ~

http://diekolonel.free.fr

Portrait de bonvga

Le 19 juillet, 2007 - 21:55
bonvga a écrit

Héhé Smile Merci d'animer le site pendant notre absence mon biquet !

Portrait de Féryel

Le 4 octobre, 2007 - 17:26
Féryel a écrit

Bonjour !!

Je découvre ce langage avec bcp de plaisir ^^ je trouve ça assez impressionnant et pour le moins original!!
Voila ma question : pour pouvoir utiliser l image générée par votre ingénieux système "Ascii-o-matic" quand on affiche le code source de la page , je ne vois pas exactement ce qu il faut copier ? est ce à partir de "

Portrait de El_Manu

Le 22 janvier, 2009 - 15:45
El_Manu a écrit

Salut,

Je n'ai jamais réussi à utiliser ce produit alors même que je l'ai testé sur plusieurs serveurs différents. Est-ce que quelqu'un peut me dire où se trouve mon problème ? Voici la copie d'une partie des erreurs que je rencontre :
Notice: Undefined variable: ø0oo° in CHEMIN_DE_MON_SERVEUR\www\asciiomatic\index.php on line 144
...
Notice: Undefined index: previous_image in CHEMIN_DE_MON_SERVEUR\www\asciiomatic\index.php on line 227
Notice: Undefined index: url in CHEMIN_DE_MON_SERVEUR\www\asciiomatic\index.php on line 233
Notice: Undefined index: image in CHEMIN_DE_MON_SERVEUR\www\asciiomatic\index.php on line 254

Comment ce fesse ?