Introduction

L’approche rédactionnelle et théorique que j’ai souhaité convoquer dans cet article fait référence à la recherche-création, en cohérence avec ma pratique de designer et d’enseignant. Le sujet d’étude de l’article porte sur un projet de site web intitulé Cards & Coding, qui est l’espace numérique qui me permet aujourd’hui de créer et de problématiser le format de la carte numérique. Les questionnements qui traversent ma pratique portent sur les méthodes à employer pour penser et imaginer des cartes numériques (le mot anglais « cardist » contraction de « card » et « artist » est utilisé pour définir cette pratique). Le support numérique implique une conception éloignée de celle de l’impression d’une carte, mais elle peut y faire référence comme l’article va le démontrer. En quoi une carte numérique s’éloigne ou se rapproche-t-elle d’une carte papier ? Quels choix créatifs sont-ils à l’œuvre pour concevoir une carte numérique ? Le format de la collection est aussi un axe central de ce projet, il questionne des principes de consultations et d’interactions propres au web design, domaine dans lequel je me suis spécialisé depuis une quinzaine d’années. La consultation de cartes numériques aborde une question plus vaste : comment celles-ci font-elles face à l’histoire des jeux de cartes à collectionner ? Quelles nouvelles narrations se mettent-elles en œuvre dans les usages entre matérialité et numérique ? Ces problématiques, par le prisme de mon métier de designer, sont au cœur de cet article.

Un site web dédié à la création de cartes à collectionner numériques

J’ai démarré Cards & Coding en 2021 avec une idée précise : concevoir des cartes numériques qu’il sera possible d’observer et manipuler directement dans l’interface du site. À l’époque, poursuivant mes recherches sur l’expérience utilisateur du site et les enjeux d’une interactivité créative, je suis parti de la forme d’accessibilité qui me paraissait la plus évidente possible, en rangeant les cartes dans une collection unique. Je reviendrai en détail sur ces points plus loin dans le texte.

Le nom du site vient de l’association des deux points fondamentaux de la démarche, à savoir les cartes et la programmation. En effet, toutes les cartes sur le site devront être conçues, puis programmées de façon à pouvoir s’intégrer à la structure technique du site web. Le nom du site fait également référence au jeu américain Donjons & Dragons1 créé dans les années 1970 par Gary Gygax et Dave Arneson et qui est à la base de nombreux autres univers fantastiques et jeux actuels, notamment de cartes à jouer et à collectionner. La fonctionnalité première du site est donc de proposer aux visiteur·euse·s une collection de cartes numériques.

Figure 1

Crédits : Nicolas Tilly.
Source : Cards & Coding.

Une collection de liens

La collection est pour moi un principe important qui a structuré énormément de choses au fil du temps dans la conception du site. Cette collection peut évoquer une exposition à la manière d’une page d’un catalogue dans laquelle la carte alterne entre 2D et 3D lorsque l’utilisateur la manipule. Ce travail sur la 3D pour le web abordé ici, a notamment été théorisé par la designer d’interaction et chercheuse Nolwenn Maudet qui en rappelle les spécificités en ces termes : « Les interfaces 3D se voient surtout utilisées dans le cadre d’“expériences” ou d’“expositions” virtuelles, en particulier lorsqu’il s’agit de représenter et d’interagir avec des objets ou des espaces2. »

Mais elle a été aussi à la source de nombreux questionnements portant par exemple sur la façon de classer les cartes ou bien la manière de gérer les informations liées aux cartes comme leurs noms, leurs numéros, etc. Un modèle qui a servi d’inspiration pour le site est un album de Nintendo des années 1960 présentant les cartes que vendait la firme japonaise à cette période3. L’album contient dans ses pages une carte de chaque série afin de présenter aux magasins de jouets des échantillons des différents modèles produits par Nintendo. Si on connaît aujourd’hui les débuts de Nintendo dans les cartes à jouer, il est plus rare de voir un tel document de l’entreprise présentant la manière de montrer ses collections de cartes. Cette découverte m’a permis de définir la mise en page que je souhaitais appliquer pour le site : présenter des cartes différentes les unes à côté des autres au travers des diverses pages de l’album. Bien que le site ne contienne pas de page à tourner comme une édition papier, il reste néanmoins l’idée qu’une page dédiée du site contiendra cette fameuse collection et que cette page pourra être aussi longue que voulue4.

La collection reste cependant une approche assez classique lorsque l’on parle de cartes à jouer et à collectionner. Mais d’autres réflexions étaient présentes lors de la conception du site. Je parle de cartes à jouer et à collectionner, mais en vérité, seul le type des cartes à collectionner est retenu pour figurer dans le site. Aucun jeu ne sera possible avec les cartes présentées dans la collection, mais nous verrons que cela évoluera au fil du temps. Considérant les cartes comme différentes pièces d’un ensemble narratif (ou de multiples ensembles narratifs), j’ai retenu le modèle d’une collection composée de fragments qu’elles incarnent au sein de cette narration. M’appuyant sur les propos de David Peyron, cette approche « correspond à ce que Pierre Cuvelier nomme comme une “esthétique du fragment” pour reconstituer tout un univers de fantasy dans le jeu Magic : L’Assemblée. L’univers fictionnel est ainsi fragmenté en diverses entités, et l’activité des passionnés consiste à les rassembler pour retrouver la cohérence5 ».

La collection sur le site s’inscrit donc complètement dans cette démarche, imaginant un univers fragmenté à rassembler. David Peyron, dans son article aborde un autre axe intéressant :

Certains fans possèdent même des cartes sans jouer au jeu, sans même parfois en connaître les règles […] Ces cartes sont alors de simples rappels de cette fiction […] Elles s’inscrivent dans une culture de la collection et du renvoi hypertextuel (comme un lien sur lequel on clique)6.

Les propos de David Peyron résonnent particulièrement bien avec le projet Cards & Coding, des cartes perçues comme des liens, l’image ne peut pas être plus parlante pour aborder la collection dans le site. Chaque carte sera donc un lien qui permettra l’interaction et la lecture en détail.

On pourra également mentionner dans une approche très différente l’application mobile Card Binder7 qui permet de gérer sa collection de cartes Magic : L’Assemblée. L’application possède une fonctionnalité de détection de carte par le biais de l’appareil photo d’un smartphone. Une fois détectée, l’application donne des informations sur la carte (extension, illustrateur·rice, textes divers, prix, etc.) et permet ensuite de l’ajouter dans sa collection sur l’application. Ainsi, le collectionneur·euse se retrouve avec les centaines, voire les milliers de cartes de sa collection directement dans sa poche. À l’heure où j’écris ces lignes, un nouveau jeu de cartes à jouer et à collectionner vient de paraître. Il s’agit de Lorcana8 et il est possible de télécharger la companion app du jeu afin d’y gérer sa collection de cartes. Le principe est simple : une fois que le collectionneur·euse a acheté des cartes, il·elle peut les enregistrer dans l’application afin de voir la progression de sa collection.

Partager pour échanger

Le dernier axe de recherche engagé en 2021, lors de la conception du projet, concernait la question de l’échange. Échanger des cartes semble une chose parfaitement évidente quand on parle de cartes à collectionner. Toutefois, dans Cards & Coding, les cartes ne sont pas des morceaux de papier que l’on manipule de mains en mains, elles sont numériques et classées dans les pages du site web. J’ai donc choisi non pas la possibilité d’échanger la carte consultable dans la collection du site (par exemple via l’utilisation d’une blockchain), mais plutôt de partager le processus de création. Échanger devient partager.

Pour ce faire, j’ai lancé, lors de la sortie du site, une chaîne9 sur la plate-forme Twitch, afin de diffuser en vidéo les différentes étapes de la conception d’une carte numérique. J’y présente l’utilisation des différents logiciels de création et de librairies de programmation open source (le code servant à afficher et rendre interactif une carte), mais également mes tâtonnements. L’ensemble des recettes et des coulisses techniques de la conception d’une carte est ainsi mis à nu. Certains points, comme la programmation, ne sont pas à la portée de tous et toutes, mais les interactions avec les spectateur·rice·s durant le live permettent déjà de procéder à des échanges de méthodes et de résoudre des problématiques. Sur Cards & Coding on ne peut pas échanger une carte contre une autre, mais le partage d’informations via les lives peut donner l’envie à des personnes, habituées aux jeux de cartes, de se lancer dans la programmation et le design, etc. Et si cela passe par la conception de cartes interactives numériques, le désir initial de partage fonctionne ! Peut-être pas dans une forme simple de troc de cartes, mais dans un échange de compétences liées aux sujets de la conception de cartes numériques.

La genèse d’une carte

Revenons maintenant à ce qui fait la spécificité du site, à savoir imaginer des cartes numériques et trouver des façons de les concevoir avec des outils compatibles pour le web. Chaque carte présentée sur le site aborde une démarche particulière, allant du design à la programmation, dans des allers-retours constants entre conception formelle et technique. Nous allons voir dans ce chapitre comment la carte change de format, basculant du carton à l’écran, avec pour fil rouge la manipulation et l’interaction de celle-ci par l’intermédiaire de la souris de l’ordinateur ou du doigt sur smartphone. La carte s’envisage ici comme un potentiel de création, franchissant les frontières du bout de carton et de sa surface rectangulaire pour devenir « une certaine manière d’être au monde10 ».

Figure 2

Crédits : Nicolas Tilly.

Quels sont les défis qui nous attendent lorsque l’on crée des cartes à collectionner pour le web ? Quelles sont les spécificités de ce petit objet ? Travailler avec des cartes c’est aborder finalement un format très commun, comme nous le dit en substance Jude Talbot, au sujet de ses travaux menés dans le cadre de l’inventaire du fonds des jeux et ensembles de cartes de la BNF conservées au département des estampes : « Quoi de plus banal, quoi de plus répandu, quoi de moins extraordinaire en somme qu’un paquet de cartes à jouer11 ? ». Je vais exposer ici, en prenant plusieurs exemples de cartes exposées dans la collection du site Cards & Coding, les différents procédés qui m’ont amené à concevoir des cartes particulières tant sur la forme que le fond ; démontrant ainsi que ce format « banal » qu’est la carte à jouer possède un potentiel infini.

Reproduire le tangible pour proposer de nouvelles formes à explorer

La carte est un morceau de carton, et c’est de ce constat de départ que j’explore, façonne et invente en tant que designer interactif. Dans ma démarche, il y a l’idée de copier la carte et son format, sa texture et sa spatialité12 pour ensuite l’amener vers de nouvelles configurations esthétiques et d’utilisations numériques. Tout commence donc dans un carnet et se poursuit par la manipulation à l’écran.

Le premier exemple que je vais utiliser pour illustrer mon propos est celui de la carte intitulée « Where is the bat? » L’idée initiale est la suivante : faire sortir de l’obscurité la carte dans la page. Pour ce faire, j’ai réalisé ce que j’appelle un dessin manifeste qui illustre de façon immédiate et un peu hâtive le concept. Les deux axes graphiques à développer pour concevoir la carte sont donc : un fond noir et une carte à peine visible sortant de la pénombre. Une fois le dessin posé dans la page de mon carnet, j’étais prêt à l’adapter dans sa version numérique. L’orientation que je cherchais avec cette carte était de me concentrer autant sur le contexte de présentation de la carte, avec ce fond noir qui absorbe la carte, que sur la carte elle-même. Lors de sa programmation pour le site, j’ai fait le choix de passer le fond de la page en noir (ce qui est une exception puisque toutes les cartes ont la même couleur de fond) effaçant par la même occasion l’interface du site. Le visiteur ou la visiteuse du site se retrouve plongé·e dans l’obscurité avec pour seul repère dans la page du site les trois petites formes colorées du logo en haut à gauche. Pour la carte, j’ai choisi de faire un effet lumineux qui permet de mettre en avant une surbrillance sur la surface de la carte lorsque l’on passe la souris dessus. C’est cet effet qui suggère l’idée de révélation, permettant ainsi de rendre la carte légèrement visible si on joue à déplacer la souris dans la page jusqu’à apercevoir les contours et le dessin de la carte.

Figure 3

Crédits : Nicolas Tilly.
Source : Cards & Coding.

Pour le second exemple, j’ai choisi la carte « The Physiognomy of Hands » que l’on retrouve dans la collection du site et que j’ai réalisée en avril 2022. Comme pour la carte précédente, j’ai formalisé l’idée avec un dessin manifeste rapidement exécuté, non pas dans un carnet de dessin, mais sur une tablette. La raison de ce choix porte sur la texture de la carte que je voulais à l’époque tramée. Je n’ai finalement pas conservé cette idée dans la version finale préférant piocher dans la collection d’images du site The Public Domain Review. Le principe de « The Physiognomy of Hands » repose sur la manipulation et le pliage d’une carte, comme un clin d’œil à la matérialité de la carte devenue numérique. « Objet résolument matériel du point de vue de l’art, la carte à jouer tend néanmoins à se dématérialiser du point de vue du jeu13 ». Cette citation de Jude Talbot révèle les liens complexes entre les règles du jeu, absentes de la collection du site dans une forme classique, mais présentes dans une forme libre de jouet numérique. La matérialité de la carte se pense ici par le biais de la manipulation numérique à l’écran.

Figure 4

Crédits : Nicolas Tilly.

Cette idée de pliage est venue lors de mes recherches sur les tours de magie faisant disparaître des cartes (la carte « Where is the bat? » est également issue de cette recherche sur la disparition). Il est assez rare que j’aie tout de suite en tête une technologie ou un outil me permettant de programmer la carte pour le site, et qui respecte l’idée de départ, à savoir le pli. Mais dans ce cas précis, je connaissais une librairie JavaScript du nom de OriDomi14 qui pouvait parfaitement répondre à mes besoins. Le slogan de la librairie est « The web is flat, but now you can fold it up15 » : l’idée de départ et cet outil ne pouvait pas être plus en adéquation ! La plupart du temps, lorsque je conçois de nouvelles cartes, la recherche des outils, librairies et autres systèmes représente la moitié du travail (mais cela est amené à changer de plus en plus avec l’arrivée d’un agent conversationnel utilisant l’IA comme ChatGPT16). Une fois la librairie OriDomi en place dans la page de la carte, celle-ci pouvait maintenant se plier et se déplier en tirant la carte avec la souris du bas vers le haut.

Figure 5

Crédits : Nicolas Tilly.
Source : Cards & Coding.

Le troisième et dernier exemple porte sur une série de cartes dessinées en 2021 dans un carnet destiné à accueillir l’ensemble des croquis. À la différence des deux autres cartes isolées, cette série avait pour intention première le dessin et les variations que celui-ci pouvait apporter au regard du dispositif mis en place. En effet, j’ai d’abord fait une impression 3D d’un gabarit de carte me permettant de tracer les contours sur l’ensemble des pages du carnet, afin d’avoir une proportion et un espace commun à l’ensemble. Le protocole consistait ensuite à tracer des espaces rectangulaires fermés à l’intérieur du contour de la carte, puis d’y ajouter des gommettes colorées. J’ai produit une cinquantaine de cartes colorées et géométriques de cette façon.

Figure 6

Crédits : Nicolas Tilly.

Figure 7

Crédits : Nicolas Tilly.

Le passage vers le format numérique est encore à ce jour en cours de réalisation, du fait du grand nombre de cartes que comporte cette série. Seulement deux cartes ont été réalisées et il est fort probable que cela prenne encore du temps pour finir l’ensemble. Lors de différentes recherches sur les possibilités techniques que je menais en parallèle des dessins, j’ai découvert la librairie JavaScript qui m’a beaucoup plu : Matter.js17. Il s’agit d’une librairie pour ajouter de la matière à des éléments en deux dimensions dans une page web. Ce qui m’a attiré ici c’est que les gommettes rondes dans les dessins des cartes pouvaient me servir pour ajouter de l’animation et de la matière aux versions numériques. J’ai ainsi codé deux cartes sur ce principe : la première étape était de redessiner le modèle d’une carte dessinée dans une page du carnet en utilisant la librairie Matter.js, puis d’y donner de la matière en ajoutant également les cercles colorés en respectant les couleurs des gommettes des croquis.

Cela donne deux cartes animées et interactives, dans l’esprit du jouet d’adresse du labyrinthe à bille. Sauf qu’ici il n’y a pas de trou, juste la possibilité d’incliner la carte en la survolant avec la souris et ainsi, faire bouger dans toutes les directions les cercles colorés coincés dans leurs petites zones rectangulaires. Ce principe animé provient du code et c’est en examinant les possibilités offertes par la librairie que j’ai décidé d’intégrer cette interaction. La recherche formelle de ces cartes peut sembler minimaliste (parfois une interaction qui semble simple peut demander de grandes compétences techniques), mais c’est la variation des motifs qui en fait tout l’intérêt, renvoyant cette série à des domaines comme le graphisme. Je pense notamment au travail du designer Karl Nawrot et à ses recherches formelles et géométriques18. Le·la créateur·rice concevant des cartes peut aborder la chose au travers de domaines variés : « Les innombrables initiatives qui aujourd’hui enrichissent l’offre de cartes à jouer, avec le design, la typographie et le graphisme19. »

Figure 8

Crédits : Nicolas Tilly.
Source : codeopen.io

Figure 9

Crédits : Nicolas Tilly.
Source : codeopen.io

En continuité du travail sur le processus de dessin de cette série, je travaille sur une nouvelle série de cartes dessinées avec des tampons et des crayons de couleur. J’ai cette fois-ci utilisé un plotter20 à dessiner pour tracer les contours des cartes sur l’ensemble des pages d’un carnet, ce qui m’a permis d’aller plus vite et d’être plus précis dans la réalisation des gabarits. Le carnet devenant alors une collection de matrices à cartes, dont le processus de création alterne entre la machine à dessiner, l’ordinateur et la main.

Figure 10

Crédits : Nicolas Tilly.

Figure 11

Crédits : Nicolas Tilly.

Les rapports entre dessin et numérique sont donc assez nombreux dans les exemples présentés plus haut, ils me permettent d’inventer des va-et-vient constants dans les usages et manipulations des cartes, ainsi qu’au niveau des multiples recherches graphiques. Si le papier est la base sur laquelle je m’appuie pour l’ensemble du processus de création des cartes présentes sur le site, la connaissance de la programmation pour le web reste essentielle pour matérialiser une idée et la faire sortir d’une page d’un carnet. Le dessin et la programmation sont deux piliers de Cards & Coding et nous allons voir par la suite que le code créatif est un champ d’application possible de ces deux domaines, poussant encore un peu plus les spécificités qui font qu’une carte devient numérique et interactive.

Le code créatif sur le web comme domaine de recherche et de création

Tout d’abord, intéressons-nous à ce qu’est le code créatif avec la définition de l’artiste et enseignant américain Golan Levin :

Les « codeurs créatifs » sont des artistes, des designers, des architectes, des musiciens et des poètes qui utilisent la programmation informatique et les logiciels personnalisés comme média de prédilection. Ces praticiens brouillent la distinction entre l’art et le design, la science et l’ingénierie, et dans leur interdisciplinarité mouvante, c’est le mot allemand Gestaltern, ou « créateurs de formes », qui les décrit le mieux21.

On retiendra donc que le code créatif est un choix assumé d’utilisation du code afin de créer des formes tout en brouillant les pistes entre différents domaines, cela me semble parfait pour continuer à expliquer ma démarche de création dans les cartes qui suivent.

Ces trois cartes sont le fruit de collaborations avec des artistes et des designer·euse·s dont je suivais les recherches et appréciais l’approche et la sensibilité (il y a au total sept collaborations sur le site en date de juillet 2023). Ma demande était à chaque fois identique : « faisons une carte pour Cards & Coding ensemble ! » Après un temps de réflexion et de production de leurs propositions (sous des formes variées comme des croquis, des descriptions, des références, etc.), je me mettais en mouvement pour trouver comment réaliser leurs idées. C’est là que le code créatif entre en jeu.

La première carte intitulée « Mekarte » est réalisée en juin 2023 par l’artiste 3D Metamorph. Spécialisé dans le design produit et les mechas22, sa proposition se base donc naturellement sur la création d’une carte en volume très mécanique. Le défi technique pour moi a été de pouvoir utiliser le fichier 3D de Metamorph réalisé avec le logiciel Blender, pour le consulter dans la page du site dédiée à sa carte. J’ai utilisé la librairie <model-viewer>23 qui permet d’afficher un fichier 3D interactif sur le web en ajoutant le code spécifique à la librairie dans la page HTML (mais également de le rendre consultable en réalité augmentée via un smartphone en consultant la page du site sur mobile). La 3D sur le web est un domaine que j’apprécie particulièrement, surtout en lien avec des cartes, car elle permet de trouver une forme de consultation en cohérence avec l’objet physique qu’est la carte. La tourner, la faire pivoter, la retourner, tout en observant les mécanismes animés de la carte furent des axes de travail rappelant qu’une carte doit pouvoir se manipuler, quel que soit son support.

Figure 12

Crédits : 3D Métamorph.
Source : Cards & Coding.

La deuxième carte intitulée « Sombre » a été réalisée en collaboration avec le designer Étienne Mineur en juillet 2022. Pour cette carte, il a décidé d’utiliser une intelligence artificielle pour la création des visuels et des textes de l’histoire (ce domaine étant en constante évolution, il s’agit des possibilités offertes par les IA en 2022) afin d’imaginer une carte narrative. Celle-ci comporte une narration visuelle et textuelle dont la manipulation est la suivante : chaque fois que l’utilisateur·rice clique sur la carte, celle-ci se retourne et affiche une nouvelle image et un texte jusqu’à la fin de l’histoire. Je n’ai pas utilisé de librairie pour la programmation de cette carte, mais du JavaScript vanilla, c’est-à-dire sans modification et ajout. Il est parfois plus simple de partir de zéro dans un projet afin de réaliser la fonctionnalité souhaitée, sans ajouter de complexités et d’éléments qui ne serviront pas dans le projet. Il n’y a pas de règles préétablies lorsque je code une carte.

Cette carte est très intéressante dans le sens où elle combine plusieurs spécialités issues du travail d’Étienne Mineur que sont la narration, l’interactivité et l’intelligence artificielle. Cette carte se raconte en images et sa surface est le support du récit, mais un récit dont on ne peut déceler la longueur lors de la première lecture, car celui-ci est imbriqué dans les différentes faces de la carte. Comme si les deux faces de la carte étaient composées en fait d’un paquet de plusieurs cartes, et que par magie celles-ci venaient se révéler sous les yeux du·de la visiteur·euse. La carte se transforme en récit et la manipulation induite par le fait de la retourner en boucle devient un jeu. En référence à la carte d’Étienne Mineur, on pourra citer le jeu Cards!24 sur iOS qui permet par la manipulation de cartes à l’écran de faire des choix dans un récit. Le jeu invite à actionner des cartes comportant des visuels précis (comme des accessoires et des objets) pour résoudre des énigmes et ainsi progresser dans l’histoire.

Figure 13

Crédits : Étienne Mineur.
Source : Cards & Coding.

Figure 14

Crédits : The Coding Monkeys.
Source : Cards!

La troisième carte intitulée « The Geometric Witch » a été conçue par l’artiste plurimédia Lucile Olympe Haute en juillet 2021. Son idée était de reprendre l’effet lenticulaire des cartes postales ou autre et qui permet en la déplaçant de faire bouger le motif imprimé, dans sa carte. Le défi pour moi était de trouver comment coder un tel effet. Là encore, je n’ai pas utilisé de librairie, car il était plus simple de décomposer les difficultés techniques pas à pas, afin de mieux organiser mon code. Lucile m’a donc envoyé des images issues d’une séquence vidéo qu’elle avait réalisée afin de les utiliser sur la carte pour reproduire le mouvement. J’ai conservé 25 images afin de garder une séquence courte, mais identifiable au niveau du mouvement. L’interaction finale programmée permet à l’utilisateur·rice de glisser la souris de gauche à droite sur la carte afin de jouer la séquence à l’endroit et à l’envers. La carte évolue en une interface de lecture, comme une micro timeline à orienter avec la souris de l’utilisateur·rice.

Figure 15

Crédits : Lucile Olympe Haute.
Source : Cards & Coding.

Le code créatif est aussi une façon d’envisager un peu différemment la relation entre le design et les outils. Les trois cartes présentées plus haut sont le fruit de collaborations et d’échanges qui abordent de manière créative, hors des sentiers battus, la conception et la fabrication de cartes numériques : 3D, narration et IA, animation. Le code est l’élément central du processus puisque l’on parle ici de web et d’interactivité à l’écran, mais au-delà de cette nécessité, l’approche est résolument inventive, au sens d’une démarche pleine de curiosité et de liberté. Que cela soit avec ou sans l’utilisation de librairies de creative coding, l’enjeu est aussi de garder un certain contrôle technique sur le site. Les cartes sont le contenu principal présenté sur Cards & Coding, mais il ne faut pas oublier l’interface, les animations, la typographie, la mise en page qui compose les différentes pages du site Tous ces points démontrent également le soin apporté au projet, qui sans le code créatif, n’aurait pas le même impact. Le code créatif est le point de rencontre entre la philosophie, la programmation et le design25.

La carte comme univers

Si le travail sur les interactions des cartes numériques est la pratique essentielle de ma recherche, l’aspect graphique est également fondamental. La carte ne peut rester vierge, elle doit attirer le regard et convaincre l’utilisateur·rice de la manipuler. La carte est un petit espace qui peut accueillir une infinité d’esthétiques, et l’aspect réduit du format est justement tout l’enjeu : « L’espace graphique réduit de la carte est lui aussi une contrainte importante du dispositif. Comment, dans quelques centimètres carrés, penser, réfléchir, et développer une démonstration26 ? » Si la collection de cartes numériques est le principal aspect de Cards & Coding, c’est bien aussi pour mettre en valeur des approches graphiques différentes. Cela peut faire écho à un type de vidéo très répandu sur YouTube et qui consiste en l’ouverture de boosters de jeu de cartes comme Magic ou Pokémon. Cette pratique se concentre en effet principalement sur l’excitation de la découverte portée par le hasard des cartes qui seront découvertes (ainsi que leurs raretés), mais il est impossible d’occulter l’intérêt graphique pour les cartes qui sont montrées en vidéo. Le youtuber français le plus connu dans ce type de vidéo est David Lafarge qui ouvre des boosters de cartes Pokémon depuis 201327.

Alors finalement, avec les cartes à jouer, peut-on aborder tous les sujets ? Il semble que oui comme nous le dit Jude Talbot :

[C]ertaines cartes deviennent les supports d’une information qui n’est pas destinée au jeu, mais que l’on espère transmettre plus facilement par son biais : la pédagogie, la publicité, la politique, la satire, l’érotisme, les galeries de personnalités, la mode trouvent dans les cartes un médium idéal que celles-ci n’abandonneront plus et qu’elles investiront davantage encore au xx^e siècle28.

La carte est un support et, aussi évident que cela puisse paraître, il s’agit bien de le prendre en compte dans la composition d’un message visuel. Les cartes, notamment numériques, sont des micro-univers en puissance. Par leurs effets visuels, leurs animations, leurs ambiances (sonores et visuelles), elles développent des approches particulièrement inventives.

On peut le voir dans le jeu vidéo par exemple, où le genre explose depuis une dizaine d’années sur la plate-forme Steam. Marvel Snap29 est un jeu de cartes sur mobile et PC dans lequel les joueur·euse·s collectionnent des cartes de l’univers de Marvel pour en faire un deck de douze cartes avec lequel ils vont pouvoir affronter des adversaires. Mais le point qui a retenu mon attention est celui du système de rareté et d’évolution des cartes. En effet, dans le jeu il est possible de faire progresser ses cartes en dépensant des points, ce qui les transforme pour devenir plus rares (il y a sept paliers de rareté). Une fois le dernier palier atteint, la carte se dédouble pour permettre de la modifier encore avec de nouveaux styles visuels comme des fonds, de couleur or ou en noir et blanc, ainsi que des effets de particules autour des cartes. Ce système d’évolution graphique des cartes dans le jeu s’intitule l’Infinity Split30 (la séparation infinie des cartes). Avec ce concept d’évolution visuelle des cartes inventé par le studio, on voit bien l’importance de celui-ci dans l’intérêt que portent les joueur·euse·s au jeu.

Les cartes en carton possèdent elles aussi de nombreuses qualités graphiques, j’en possède plusieurs milliers dans ma collection, rangées et triées dans des classeurs et des boîtes. Il est impossible de citer toutes les cartes qui ont retenu mon attention (si elles sont dans ma collection, c’est que c’est le cas pour chacune d’entre elles).

J’affectionne particulièrement le jeu de cartes Combined Shapes Card Game du designer Brynjar Sigurðarson. Il consiste en un ensemble de dix-huit cartes de couleur en papier et perforées de diverses formes. Le but du jeu est de faire correspondre et d’emboîter les cartes entre elles pour former des motifs. Les cartes sont prises ici comme des objets à combiner afin de former des petites sculptures plates, dont le recto et le verso des cartes sont la clé de lecture des motifs. Cette approche d’emboîtement de cartes pourrait envisager des extensions numériques particulièrement intéressantes, jouant sur des manipulations en 2D et en 3D que j’essaye de développer dans mon travail.

Figure 16

Crédits : Brynjar Sigurðarson, photographie par Nicolas Tilly.

Je pourrai également citer le Jeu de mémoire à recopier de Supereditions qui propose un ensemble de dix-huit cartes comportant des formes géométriques et vingt cartes vierges sur lesquelles recopier les formes. Le but du jeu est de retourner deux cartes identiques en faisant appel à la mémoire des joueurs. Ce projet intègre l’idée que le jeu est incomplet et que le joueur doit contribuer en dessinant pour le compléter. Un paquet de cartes inachevé qui soulève l’idée que le fait main garde une importance réelle dans la création graphique. J’apprécie ce jeu de cartes, car il montre que le papier découpé et vierge d’une carte est une surface au potentiel énorme. Il fait écho à mon processus de création qui consiste à partir d’une page HTML initialement codée et qui présente une carte numérique également vierge. J’aborde alors la carte comme un format délimité dans lequel je vais m’attacher à ajouter des idées, des formes et du code. Dans cette approche de départ, une carte numérique conserve un certain format issu de son pendant physique. Ne reste plus qu’à trouver comment sortir de ce cadre.

Figure 17

Crédits : Supereditions, photographie par Nicolas Tilly.

Les jeux vidéo et les cartes en papier restent des références incontournables pour penser de nouvelles cartes sur le site Cards & Coding. Mon œil étant attentif aux aventures graphiques de projets variés, j’ai décidé lors de la sortie du site de faire une veille constante sur le web et les réseaux sociaux que je partage sur le site are.na31.

Dispositifs spécifiques : extension de la carte

En 2022, soit un an après la sortie du site, j’ai décidé d’ajouter une nouvelle rubrique au site intitulée Extensions. Il ne s’agit pas d’extensions en rapport avec la collection de cartes, mais plutôt des manières de voir des usages étendus sur la façon dont les cartes numériques sont présentées sur le site. La collection, bien que centrale, me semblait un peu limitée pour continuer à élaborer de nouveaux axes de recherches pour Cards & Coding. Les projets présentés ci-dessous sont une sélection des pôles périphériques au site et sur lesquels je travaille, en parallèle des cartes de la collection.

Figure 18

Crédits : Nicolas Tilly.
Source : Cards & Coding.

Une réflexion commune à cette envie d’étendre ma vision sur les cartes numériques porte sur le contexte du jeu de cartes. Plus précisément, elle accompagne la question suivante : dans quel(s) espace(s) sommes-nous quand on manipule une carte numérique ? Le projet intitulé Plateau de jeu est une expérimentation de manipulations de formes, faisant écho à de petits accessoires de jeu comme des pions et des jetons. Il consiste en un basculement de la page web en plateau de jeu, et est volontairement énigmatique quant à la règle à suivre avec les manipulations. Habituellement, la carte sur le site est seule posée au centre de la page, elle ne possède pas de contexte à proprement parler autre que celui d’un site web (avec sa barre de menu en haut), le Plateau de jeu propose une autre approche dans l’espace de la page et de l’écran, en prenant tout l’espace de la fenêtre et poussant ainsi le menu du site (mais pas le logo). J’ai codé celui-ci avec la librairie JavaScript Konva.js qui est spécialisée dans le déplacement de formes à l’écran (appelée aussi « drag & drop »), permettant ainsi de faire bouger les formes avec la souris. Les objets présents sur le plateau sont réalisés avec l’intelligence artificielle Midjourney, domaine que je souhaite questionner de plus en plus avec Cards & Coding.

Figure 19

Crédits : Nicolas Tilly.
Source : Cards & Coding.

Les liens entre papier et écran sont passionnants quand on parle de cartes numériques, et c’est assez naturellement que j’ai voulu étendre mes expérimentations avec l’impression. C’est alors qu’en juillet 2022 j’ai décidé de compiler dans une édition intitulée Les Cartes impossibles mes recherches graphiques de cartes avec les IA. J’ai conservé dans cette édition 81 cartes générées avec DALL·E 2. Chaque page de l’édition comporte une carte placée au centre, rappelant la mise en page des cartes sur le site. J’ai utilisé le même prompt (commande textuelle donnée à l’intelligence artificielle pour qu’elle l’interprète et réalise des images) pour générer les cartes, seul un mot placé également sur chaque page, en dessous des cartes, sera changé pour varier les itérations des images. Avec cette édition, la collection, ou plutôt la collecte, est encore questionnée puisqu’elle est composée d’une succession d’images. L’IA DALL·E 2 pouvant, moyennant finance, produire une gigantesque masse d’images, les enjeux ont été de faire des choix dans les visuels, de dompter l’IA pour essayer de contrôler les aspects graphiques des images et d’associer du texte à des images sur le principe du prompt. L’édition se présente comme un catalogue d’images, mais le rapport aux mots et au texte est sûrement le sujet central du projet, poussant les univers graphiques dans des contrées que je n’avais pas encore explorées.

Figure 20

Crédits : Nicolas Tilly.

La question de l’espace dans lequel on manipule une carte numérique ainsi que la 3D sur le web m’a conduit à expérimenter avec la réalité augmentée (RA). Je travaillais déjà avec cette technologie depuis 2019, mais je souhaitais l’appliquer à la manipulation de cartes. Avec les dernières avancées des navigateurs web actuels, comme la librairie <model.viewer>, il est maintenant possible d’utiliser la RA directement dans une page web avec le smartphone de l’utilisateur·rice. Ma dernière expérimentation porte sur la reproduction en 3D de cartes japonaises de 1880 montrant des illustrations de feux d’artifices. Celles-ci sont placées dans une page web avec également des dés à jouer. Il est possible de déplacer les cartes et les dés dans la page, mais aussi de zoomer afin de voir les détails des illustrations des cartes. Si la page est consultée sur un smartphone il est alors possible de basculer en réalité augmentée via un bouton dédié, l’utilisateur·rice devra alors chercher une surface plane horizontale afin de « poser » les cartes sur une table par exemple. L’espace de consultation qu’est la page web change ici de paradigme, le contenu (les cartes) sort de la page permettant alors une tout autre consultation, puisque les cartes sont visibles dans le contexte réel qui entoure le visiteur·euse. La carte retourne sur la table et n’est plus dans le vide infini de l’espace numérique.

Figure 21

Crédits : Nicolas Tilly.

Pour finir, la matérialité de la carte numérique est également une question intéressante qui traverse mes dernières préoccupations. Dans ce contexte, j’ai réalisé une série d’expérimentations ayant pour but de présenter des cartes sur de petits écrans tactiles. Ils peuvent être manipulés, retournés, touchés et leurs tailles évoquent très sensiblement la proportion d’une carte à jouer. J’ai donc voulu expérimenter et tester les limites d’un tel dispositif amenant une nouvelle physicalité électronique à la carte. Les petits écrans renvoient aussi au ratio d’un écran de smartphone et la manipulation que celui-ci propose32. L’écran tactile devient le nouveau support de la carte numérique, hors du web, mais avec des propriétés similaires comme l’animation et l’interactivité.

Figure 22

Crédits : Nicolas Tilly.

Les extensions de la carte sont un axe majeur pour la continuité future de Cards & Coding, elles sont des expérimentations libres, avec des supports variés n’ayant pas la contrainte du format du site. De la même façon que le papier et l’écran s’influencent mutuellement dans la création des cartes, le web peut trouver une forme physique autre qu’avec l’ordinateur ou le mobile. Le web s’étend lui aussi dans ses usages (RA, VR, IA, etc.) et accompagne donc naturellement l’expansion du domaine de la carte numérique.

Conclusion

Depuis 2021 je cherche à définir Cards & Coding et ma pratique de designer de cartes numériques. Il ne s’agit peut-être finalement que d’un site web, d’un espace coincé dans un entre-deux et qui communique avec deux domaines aux temporalités éloignées. Le premier est celui des cartes à jouer dont l’apparition en Europe date du xvi^e siècle, et le second celui du jeu vidéo dont la jeune histoire est seulement d’un peu plus de soixante ans. Ces deux temporalités distantes mêlent aussi celle du web et ses évolutions importantes depuis le début des années 1990, que j’utilise pour inventer mes cartes. Pourtant celles-ci restent des copies des cartes papier en respectant le format très identifiable du rectangle aux bords arrondis. Mais n’y a-t-il pas là autre chose à jouer en transformant complètement cette approche ? Sur le site, la carte numérique est une interface qui copie le réel, ce qui n’est pas anodin sur notre rapport à l’ordinateur, comme le dit le designer graphique Emmanuel Debien :

Les concepteur·rices d’interfaces et les ingénieur·es informatiques semblent poursuivre le rêve de simuler le réel et ses phénomènes physiques (textures, reflets, irisations, particules, etc.), mettant en scène la puissance démiurgique de la machine33.

Si Cards & Coding est un entre-deux à l’interstice du jeu vidéo et du web, il est aussi composé de plusieurs combinaisons, le papier et l’écran, la collection et le jeu, l’immobilité et le mouvement, la simplicité technique et parfois la complexité. Cards & Coding est souvent à contre-courant et parfois accompagne les tendances sur le web. Pour terminer, je reprendrai les mots de Kenneth Goldsmith citant Andy Warhol : « Il fallait s’intéresser à ce qui n’intéresse personne et en commencer la collecte34. » À nous de mélanger les cartes !