{"id":1191,"date":"2025-09-23T17:42:17","date_gmt":"2025-09-23T15:42:17","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/ertdfgcvb-du-live-coding-100-ascii\/"},"modified":"2025-09-23T17:42:17","modified_gmt":"2025-09-23T15:42:17","slug":"ertdfgcvb-du-live-coding-100-ascii","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/ertdfgcvb-du-live-coding-100-ascii\/","title":{"rendered":"ertdfgcvb &#8211; Du Live Coding 100% ASCII"},"content":{"rendered":"<p>Alors si vous cherchez un truc pour procrastiner intelligemment ce soir ou demain, j\u2019ai exactement ce qu\u2019il vous faut.<br \/>\n<a href=\"https:\/\/play.ertdfgcvb.xyz\/\">Play.ertdfgcvb.xyz<\/a><br \/>\n, c\u2019est un terrain de jeu ASCII interactif o\u00f9 vous pouvez coder des animations directement dans votre navigateur. Et c\u2019est hyper hypnotisant, vous allez voir !<\/p>\n<p>Derri\u00e8re ce nom impronon\u00e7able \u201c<em>ertdfgcvb<\/em>\u201d se cache<br \/>\n<a href=\"https:\/\/github.com\/ertdfgcvb\">Andreas Gysin<\/a><br \/>\n, un artiste suisse bas\u00e9 \u00e0 Lugano qui fait du code et du design et son playground ASCII, c\u2019est une interface \u00e9pur\u00e9e au maximum compos\u00e9e d\u2019un \u00e9diteur de code \u00e0 gauche, d\u2019une fen\u00eatre de pr\u00e9visualisation \u00e0 droite, et c\u2019est tout. Pas de fioritures, pas de boutons partout, juste l\u2019essentiel. Vous tapez Cmd+Enter (ou Ctrl+Enter sur PC) et votre code s\u2019ex\u00e9cute en temps r\u00e9el.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/ascii-playground-creative-coding-ertdfgcvb\/ascii-playground-creative-coding-ertdfgcvb-2.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Le principe de son code en live est inspir\u00e9 des<br \/>\n<a href=\"https:\/\/www.khronos.org\/opengl\/wiki\/Fragment_Shader\">fragment shaders GLSL<\/a><br \/>\n, sauf qu\u2019au lieu de pixels color\u00e9s, vous manipulez des caract\u00e8res. Vous avez acc\u00e8s \u00e0 des fonctions sp\u00e9cifiques telle que <code>boot()<\/code> qui s\u2019ex\u00e9cute une fois au d\u00e9marrage, <code>pre()<\/code> pour pr\u00e9parer vos donn\u00e9es, <code>main()<\/code> qui est appel\u00e9e pour chaque cellule de l\u2019\u00e9cran, et <code>post()<\/code> pour les modifications finales.<\/p>\n<p>Voici un exemple simple en javascript pour comprendre le d\u00e9lire :<\/p>\n<p><code>export function main(coord, context){ return String.fromCharCode((coord.y + coord.x) % 32 + 65) } <\/code><\/p>\n<p>Ce bout de code g\u00e9n\u00e8re un pattern de lettres qui change selon la position X et Y sur l\u2019\u00e9cran. C\u2019est tout con mais c\u2019est beau.<\/p>\n<p>Le playground propose \u00e9galement des dizaines d\u2019exemples tri\u00e9s par cat\u00e9gorie. Vous avez les basiques pour apprendre, des d\u00e9mos plus complexes comme \u201cDoom Flame\u201d qui recr\u00e9e l\u2019effet de flamme du jeu Doom en ASCII, ou encore \u201cDonut\u201d qui fait tourner un donut en 3D avec juste des caract\u00e8res. Y\u2019a m\u00eame une section \u201ccamera\u201d o\u00f9 vous pouvez manipuler votre webcam et la transformer en ASCII art en temps r\u00e9el.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/ascii-playground-creative-coding-ertdfgcvb\/ascii-playground-creative-coding-ertdfgcvb-3.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>\n<a href=\"https:\/\/github.com\/ertdfgcvb\/play.core\">D\u2019apr\u00e8s le GitHub du projet<\/a><br \/>\n, Andreas a cr\u00e9\u00e9 \u00e7a comme un hommage \u00e0 tous les artistes, po\u00e8tes et designers qui utilisent le texte comme medium. C\u2019est un projet minimaliste, avec presque pas d\u2019interface, juste le code et le r\u00e9sultat. M\u00eame les marges et les num\u00e9ros de ligne ont \u00e9t\u00e9 vir\u00e9s.<\/p>\n<p>Et tout \u00e7a tourne de mani\u00e8re fluide dans le navigateur et pour les dev qui veulent comprendre comment \u00e7a marche sous le capot, tout le code source est sur GitHub, et vous pouvez vraiment faire des trucs de ouf avec, par exemple des fractales, des simulations de fluides\u2026etc. C\u2019est compl\u00e8tement barr\u00e9.<\/p>\n<p>Mais pour commencer, le plus simple c\u2019est d\u2019explorer les exemples. Le classique \u201c10 PRINT\u201d recr\u00e9e le fameux one-liner du Commodore 64 qui g\u00e9n\u00e8re un labyrinthe infini. Les exemples SDF (Signed Distance Fields) montrent comment faire de la 3D avec des maths et des caract\u00e8res. Et si vous \u00eates chaud, vous pouvez lui envoyer vos propres cr\u00e9ations qui rejoindront la section \u201ccontributed\u201d.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/ascii-playground-creative-coding-ertdfgcvb\/ascii-playground-creative-coding-ertdfgcvb-4.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Andreas enseigne ces techniques dans ses cours, et apparemment les \u00e9tudiants adorent. C\u2019est vrai que c\u2019est une approche super p\u00e9dagogique du creative coding o\u00f9 on se prend pas la t\u00eate avec du WebGL ou des frameworks complexes\u2026 Non, faut juste pondre du code simple qui produit des r\u00e9sultats visuels imm\u00e9diats.<\/p>\n<p>Bref,<br \/>\n<a href=\"https:\/\/play.ertdfgcvb.xyz\/\">play.ertdfgcvb.xyz<\/a><br \/>\nc\u2019est le genre de site qu\u2019on bookmark et qu\u2019on ressort quand on veut se vider la t\u00eate en codant des trucs rigolos. C\u2019est gratuit, c\u2019est open source, et c\u2019est une belle d\u00e9monstration que l\u2019art et le code peuvent cohabiter sans avoir besoin de millions de polygones et de shaders complexes.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/ascii-playground-creative-coding-ertdfgcvb\/ascii-playground-creative-coding-ertdfgcvb-5.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Un grand merci \u00e0 Lorenper pour m\u2019avoir fait d\u00e9couvrir cette p\u00e9pite !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alors si vous cherchez un truc pour procrastiner intelligemment ce soir ou demain, j\u2019ai exactement ce qu\u2019il vous faut. Play.ertdfgcvb.xyz , c\u2019est un terrain de jeu ASCII interactif o\u00f9 vous pouvez coder des animations directement dans votre navigateur. Et c\u2019est hyper hypnotisant, vous allez voir ! Derri\u00e8re ce nom impronon\u00e7able \u201certdfgcvb\u201d se cache Andreas Gysin , un artiste suisse bas\u00e9 \u00e0 Lugano qui fait du code et du design et son playground ASCII, c\u2019est une interface \u00e9pur\u00e9e au maximum compos\u00e9e d\u2019un \u00e9diteur de code \u00e0 gauche, d\u2019une fen\u00eatre de pr\u00e9visualisation \u00e0 droite, et c\u2019est tout. Pas de fioritures, pas de boutons partout, juste l\u2019essentiel. Vous tapez Cmd+Enter (ou Ctrl+Enter sur PC) et votre code s\u2019ex\u00e9cute en temps r\u00e9el. Le principe de son code en live est inspir\u00e9 des fragment shaders GLSL , sauf qu\u2019au lieu de pixels color\u00e9s, vous manipulez des caract\u00e8res. Vous avez acc\u00e8s \u00e0 des fonctions sp\u00e9cifiques telle que boot() qui s\u2019ex\u00e9cute une fois au d\u00e9marrage, pre() pour pr\u00e9parer vos donn\u00e9es, main() qui est appel\u00e9e pour chaque cellule de l\u2019\u00e9cran, et post() pour les modifications finales. Voici un exemple simple en javascript pour comprendre le d\u00e9lire : export function main(coord, context){ return String.fromCharCode((coord.y + coord.x) % 32 + 65) } Ce bout de code g\u00e9n\u00e8re un pattern de lettres qui change selon la position X et Y sur l\u2019\u00e9cran. C\u2019est tout con mais c\u2019est beau. Le playground propose \u00e9galement des dizaines d\u2019exemples tri\u00e9s par cat\u00e9gorie. Vous avez les basiques pour apprendre, des d\u00e9mos plus complexes comme \u201cDoom Flame\u201d qui recr\u00e9e l\u2019effet de flamme du jeu Doom en ASCII, ou encore \u201cDonut\u201d qui fait tourner un donut en 3D avec juste des caract\u00e8res. Y\u2019a m\u00eame une section \u201ccamera\u201d o\u00f9 vous pouvez manipuler votre webcam et la transformer en ASCII art en temps r\u00e9el. D\u2019apr\u00e8s le GitHub du projet , Andreas a cr\u00e9\u00e9 \u00e7a comme un hommage \u00e0 tous les artistes, po\u00e8tes et designers qui utilisent le texte comme medium. C\u2019est un projet minimaliste, avec presque pas d\u2019interface, juste le code et le r\u00e9sultat. M\u00eame les marges et les num\u00e9ros de ligne ont \u00e9t\u00e9 vir\u00e9s. Et tout \u00e7a tourne de mani\u00e8re fluide dans le navigateur et pour les dev qui veulent comprendre comment \u00e7a marche sous le capot, tout le code source est sur GitHub, et vous pouvez vraiment faire des trucs de ouf avec, par exemple des fractales, des simulations de fluides\u2026etc. C\u2019est compl\u00e8tement barr\u00e9. Mais pour commencer, le plus simple c\u2019est d\u2019explorer les exemples. Le classique \u201c10 PRINT\u201d recr\u00e9e le fameux one-liner du Commodore 64 qui g\u00e9n\u00e8re un labyrinthe infini. Les exemples SDF (Signed Distance Fields) montrent comment faire de la 3D avec des maths et des caract\u00e8res. Et si vous \u00eates chaud, vous pouvez lui envoyer vos propres cr\u00e9ations qui rejoindront la section \u201ccontributed\u201d. Andreas enseigne ces techniques dans ses cours, et apparemment les \u00e9tudiants adorent. C\u2019est vrai que c\u2019est une approche super p\u00e9dagogique du creative coding o\u00f9 on se prend pas la t\u00eate avec du WebGL ou des frameworks complexes\u2026 Non, faut juste pondre du code simple qui produit des r\u00e9sultats visuels imm\u00e9diats. Bref, play.ertdfgcvb.xyz c\u2019est le genre de site qu\u2019on bookmark et qu\u2019on ressort quand on veut se vider la t\u00eate en codant des trucs rigolos. C\u2019est gratuit, c\u2019est open source, et c\u2019est une belle d\u00e9monstration que l\u2019art et le code peuvent cohabiter sans avoir besoin de millions de polygones et de shaders complexes. Un grand merci \u00e0 Lorenper pour m\u2019avoir fait d\u00e9couvrir cette p\u00e9pite !<\/p>\n","protected":false},"author":1,"featured_media":1192,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1191","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1191"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1191\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/1192"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}