11 janvier 2013
Comm. : 14

Générez de l’ASCII Art dans InDesign

Vous aimez l’ASCII Art ? Moi aussi ! Depuis quelques semaines je n’arrêtais pas de me demander s’il serait possible de générer de l’ASCII Art à partir de n’importe quel contenu InDesign. Le concept est simple : prendre une image et convertir chaque pixel dans un caractère représentatif. Comment pourrais-je intégrer cette idée dans InDesign ? Finalement, je suis parvenu à mes fins. Non seulement je peux convertir des images mais aussi tout type de contenu en ASCII Art.

Grâce à une extension, vous pouvez générer de l’ASCII Art à partir d’images mais aussi des formes, des blocs textes, des groupes, etc. Est-ce que le rendu manque de contraste ? Vous pouvez l’augmenter pour obtenir un meilleur résultat. Est qu’il est trop grand ? Réduisez l’échelle du rendu ! Voulez-vous utiliser votre propre élection de caractères ? Et bien, modifiez les caractères correspondant aux plages de tons. Voulez-vous conserver le visuel de référence ou le supprimez ? Vous n’avez qu’à demander !

Si vous cherchiez une solution simple et sympa pour générer de l’ASCII Art dans InDesign, téléchargez l’extension et donnez libre cours à votre créativité.:D

asciiMe UI

Il est très difficile de dater les débuts de l’ASCII Art. Si on considère uniquement l’aspect informatique, alors l’ASCII Art est assez récent. Si on élargit notre vision de l’ASCII Art à l’action de jouer avec des caractères et la typographie, alors l’histoire est plus ancienne. Je ne me risquerais pas à donner de dates personnellement. Restons sur une définition simple de l’ASCII Art comme une volonté d’exprimer des idées et des images par un agencement particulier de caractères.

La question est donc comment introduire l’ASCII Art dans InDesign ? La réponse se nomme BitmapData. BitmapData est une classe qui donne accès à la structure brute d’une image. Dans mon développement, j’ai envisagé deux approches. La première consistait à utiliser uniquement extendscript en utilisant le modèle objet d’Adobe Bridge. La seconde visait à utiliser la classe BitmapData du langage AS3. Etant donné que je vous propose ici une extension, vous comprendrez que j’ai finalement opté pour la seconde. je vous présenterai les deux approches et vous parlerai plus avant du produit.

A ) BitmapData in Adobe Bridge

Adobe Bridge donne accès aux données bitmap d’une image grâce à son modèle objet. Sur la base d’une sélection d’image dans Bridge, l’extrait de code suivant révèle les valeurs RGB du premier pixel de l’image.


var th = app.document.selections[0];
 var bmd = new BitmapData ( File ( th.path ));
 var pix1 = bmd.getPixel(0,0);
 var clr = new Color (pix1);
 alert( "Red:"+clr.red+"\rGreen:"+clr.green+"\rBlue:"+clr.blue);

asciiMe Bridge Result

Est-ce que les valeurs obtenues sont correctes ? Regardons ce que nous dit Photoshop :

asciiMe Photoshop Result

Il semble qu’il y ait un décalage entre les valeurs retournées par Bridge et les valeurs réelles. Je pense que Bridge nous renvoie les valeurs brutes là où Photoshop modifie le rendu du pixel. L’ASCII Art n’est pas une science de la précision mais de l’expression artistique, aussi nous acceptons ce décalage.

Donc Bridge est capable d’analyser les valeurs des pixels. Nous pouvons donc envisager avec optimisme la réalisation de notre script. Mais comme le résultat doit être injecté dans InDesign, nous devons créer un pont entre les deux applications. Mais je m’arrêterai ici pour deux raisons :

  1. Les performances étaient lamentables.
  2. Trop de technologies impliquées.

Est-ce que l’AS3 offrirait d’autres possibilités ?

B )  BitmapData en AS3

La classe BitmapData en AS3 n’est pas bien éloignée de celle de Bridge. Bien sûr, les méthodes et les propriétés changent un peu mais le concept d’accès aux pixels demeure. Regardons comment accéder à la valeur du premier pixel en AS3. Le code suivant nous permettra d’obtenir la valeur RGB du premier pixel d’une image à l’image de Bridge :


protected function button1_clickHandler(event:MouseEvent):void
 {
 var f:File = new File();
 f.browseForOpen("open");
 f.addEventListener(Event.SELECT, fileSelected );
 }

private function fileSelected ( e:Event ):void
 {
 var f:File = e.target as File;

var bitmapData:BitmapData;
 var loader:Loader = new Loader();
 loader.contentLoaderInfo.addEventListener ( flash.events.Event.COMPLETE, onComplete );
 loader.load ( new URLRequest ( f.url ) );
 }

private function onComplete (event:Event ):void
 {
 var bmd:BitmapData = Bitmap( LoaderInfo ( event.target).content).bitmapData;
 var pix1:uint = bmd.getPixel(0,0);
 var rgb:Object = HexToRGB(pix1);
 Alert.show( "Red:"+rgb.r+"\rGreen:"+rgb.g+"\rBlue:"+rgb.b );
 }

private function HexToRGB(value:uint):Object {
 var rgb:Object = new Object();
 rgb.r = (value >> 16) & 0xFF
 rgb.g = (value >> 8) & 0xFF
 rgb.b = value & 0xFF
 return rgb;
 }

La dernière fonction ( HexToRGB ) est issue de ce site : http://snipplr.com/view.php?codeview&id=48683

Qu’en est-il du résultat ?

asciiMe Air Result

Encore une fois, le résultat est différent de Photoshop ou Bridge. S’il est compréhensible que des profils ICC affecte les valeurs RGB dans Photoshop, il est plus surprenant d’avoir des écarts entre l’AS3 et l’ExtendScript. En fait, ce n’est pas si étonnant. ExtendScript a sa propre cuisine et nous obtenons les valeurs RGB d’un autre calcul. N’oubliez pas que des valeurs de pixel restent des nombres et que leur calcul peut souffrir de quelques arrondis et au final avoir un écart certain. Encore une fois, nous ne soucions pas d’une précision absolue.

C) L’extension « Ascii Me »

Au delà de la simple conversion d’un contenu InDesign en ASCII Art, mon objectif était de donner accès à quelques paramètres comme le choix des caractères par exemple. Je ne voulais pas que les utilisateurs soient contraient à un jeu fermé de caractères. La créativité émerge quand les utilisateurs ont les mains libres. Pouvoir gérer le contraste permet d’obtenir de meilleurs rendus avec des objets ou des images peu contrastées. Décider de l’échelle permet de jouer sur les performances et le rendu.

Instructions :

  1. Préparer un style de paragraphe pour contrôler l’aspect final (vous n’êtes pas obligé mais c’est conseillé) :

– Choisissez une police d’approche fixe

– Définissez des valeurs égales de taille de police et d’interlignage

– Augmentez sensiblement l’approche de caractères pour obtenir un rendu plus homogène

  1. Sélectionnez un ou plusieurs objets à convertir en ASCII Art
  2. Modifiez les paramètres si besoin
  3. Cliquez sur le bouton « Ascii Me »

Enfin, donnez libre cours à votre créativité ! Voici quelques rendus que j’ai préparé :

asciiMe Result 1

D) Conclusion

Vous le savez, je suis fan des extensions. La raison primordiale est que vous pouvez avoir une véritable convergence entre les deux univers et tirer le meilleur d’entre eux : AS3 and ExtendScript. Cette extension AsciiMe en est une illustration. À ce moment là, je pensais vraiment explorer des territoires vierges mais plus tard, j’ai trouvé ce lien :

http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7eee.html

L’exemple montre une autre approche. Par exemple, la gamme tonale est plus large que la mienne. J’utilise 5 niveaux, eux en utilisent 64.

 private static const palette:String = <code>"@#$%&8BMW*mwqpdbkhaoQ0OZXYUJCLtfjzxnuvcr[]{}1()|/?Il!i><+_~-;,. "
 

Et pour chacun de ces niveaux, il y a u caractère associé. J’arrivais à la fin de mon développement et j’hésitais à utiliser ces 64 valeurs pour cette extension. Finalement, je m’en suis tenu à ces 5 valeurs car les résultats obtenus avec 64 niveaux ne me plaisaient guère. Parfois, le mieux est l’ennemi du bien. J’étais content de mes 5 niveaux et je n’étais pas convaincu que 64 niveaux amélioraient définitivement le produit. Mais bien sûr c’est un avis tout personnel.

J’espère que vous vous amuserez avec cette extension. Et si vous l’utilisez, n’hésitez pas à nous transmettre le résultat et nous l’afficherons ici ou mettrons un lien.

Amusez-vous bien et si vous vous prenez plaisir à l’utiliser, jetez un œil sur le bouton Paypal ;)

Loic

Télécharger l’extension AsciiMe

14 réponses à “Générez de l’ASCII Art dans InDesign

  1. Bediez dit :

    Super Loïc 🙂 Merci…

    PS/ Petite coquille :
    « La raison primordiale est que vosu » 😉

  2. B# dit :

    Hello…
    J’ai du rater un truc parce que chez moi cela n’apparaît pas dans Extensions 🙁

  3. Bediez dit :

    Re…
    Je confirme que l’extension n’apparait pas (pourtant bien apparente dans le dossier EMstore avec d’autres que j’ai téléchargé via la palette Adobe exchange et qui elles apparaissent bien dans le sous-menu extension…).
    Configuration :
    Indesign 8.0.1
    Mac Os 10.8.2

  4. Loïc Aigon dit :

    Bonjour Éric,

    Merci beaucoup pour ton retour. La coquille est corrigée. Quant à l’extension, peux-tu la recharger à nouveau ?

    Normalement, le problème devrait être résolu.

    Loic

  5. Bediez dit :

    Hello Loïc.
    Merci, mais cela ne fonctionne toujours pas 🙁
    Je la voit bien installée dans les dossiers, mais elle n’apparait pas dans le sous-menu extension…
    (PS/ Le .zxp à d’ailleurs la même date de création, tu ne l’a pas modifié ?)

  6. Gilles dit :

    Bonjour,

    votre extension m’intéresse beaucoup, mais impossible de l’installer… Quelle est la procédure ? avec adobe extension manager CS6 il m’est dit qu’il y a un problème de signature (pas valide la signature) et il ne l’installe pas.
    Merci
    G

  7. Loic dit :

    Bonjour,

    J’ai mis l’extension à jour. Elle devrait désormais s’installer sans heurts 😉

  8. geek dit :

    Bonjour
    Je vous remercie pour cet article
    bonne continuation

  9. Billy Ben dit :

    Bonjour, est ce que c’est normal que je n’arrive pas a faire marcher l’extension AsciiMe sur CS6 sur un mac book pro retina? D’avance merci pour votre retour.

  10. Loïc Aigon dit :

    Bonjour Billy,

    Il n’y a pas de raison a priori. Quelle est l’erreur que vous rencontrez ? Ca ne s’installe pas ? L’extension s’installe mais ne se lance pas ?

    Best regards,

    Loic

  11. Salmon dit :

    Bonjour,
    Super extension, mais comment l’installe-t-on sur CC2015 et +? L’extension .zxp était lié à l’ancien Adobe Extension Manager? Ou ai-je quelque chose à télécharger en plus sur le cloud Adobe?
    Cordialement

  12. Loïc Aigon dit :

    Bonjour Salmon,

    Effectivement, l’extension a été réalisée en Flash mais peut encore être installée sur les versions CC.
    Il faut dézipper le fichier ZXP (renommer en zip au passage) puis récupérer le fichier swf. Enfin il faut le poser dans le répertoire /Plugins/Panel

    Attention aussi au fait que le support du flash a été arrêtée par Adobe. La manipulation évoquée ici pourrait ne plus fonctionner si ce n’est pas déjà le cas en CC2017.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *