L'instruction littérale, et le premier pixel

Brogan Bunt et Lucas Ihlein présentent l'expérience en 2012 à la conférence CODE, à Melbourne. Un groupe se coupe en deux, de part et d'autre d'une cloison. D'un côté, ceux qui voient l'image et n'ont pour la transmettre qu'un objet sonore : un bocal de pièces, deux cuillères en bois. De l'autre, ceux qui la redessinent au marqueur sur du papier kraft, à l'oreille. Personne ne fournit de code, chaque groupe invente le sien avant de commencer, et deux groupes n'inventent pas le même.

Groupes de quatre à six, un seul objet sonore par groupe, et une cloison par groupe.

Consigne. Inventer un code qui transmette un dessin par le son, et par rien d'autre. Vingt minutes pour l'écrire sur une feuille, avant la moindre transmission. Un son, une marque. Le code s'écrit en double, un exemplaire pour chaque camp.

Le groupe se coupe ensuite en deux, de part et d'autre de la cloison. Les émetteurs voient l'image, les récepteurs dessinent.

1. L'essai. Un dessin simple passe une première fois. Le code se corrige à chaud, sur ce qu'il ne sait pas encore dire : une diagonale, une courbe, une taille.
2. L'épreuve. Une image que le groupe n'a jamais vue. Les émetteurs la reçoivent, les récepteurs ne la voient à aucun moment. Personne ne parle, et rien ne passe par un autre canal que l'objet.
3. La reprise. L'original et le dessin côte à côte, le code corrigé une dernière fois, une deuxième image.

Les feuilles de code sont affichées au mur à la fin, toutes ensemble.

Par binômes, sans machine. Chaque binôme reçoit une enveloppe contenant une figure imprimée, que les autres ne voient pas.

Consigne. Dix minutes pour écrire, sur une feuille, les instructions permettant de reproduire cette figure au tableau. Celui qui exécutera ne verra jamais l'original, ne pourra poser aucune question, et appliquera à la lettre. Ce qui n'est pas écrit n'existe pas.

Les feuilles circulent ensuite, pas les enveloppes. Chaque binôme exécute au tableau les instructions d'un autre, sans rien interpréter. Si l'instruction dit « trace un trait », le trait fait la longueur que veut l'exécutant.

Les six figures vont de la plus simple à la plus longue à décrire. Aucune ne porte de nom qui la résume. Jusqu'à la cinquième, aucune n'a de symétrie qui laisse deviner la moitié manquante. Elles existent en trois séries, de sorte que deux binômes voisins ne décrivent jamais le même dessin.

Les dix-huit figures tiennent dans dictee-figures.pdf, une par page A4.

Le dépouillement des feuilles devrait faire apparaître quatre pannes.

Chaque figure vise d'abord l'une des quatre. Ce sont aussi les quatre causes des messages d'erreur, et l'on y renverra à chaque séance.

La quatrième figure, la grille à rayures, fait exception. Elle ne s'écrit pas sans répéter la même phrase case après case tant que la règle de remplissage n'est pas trouvée : elle est laissée de côté, et rouverte en séance 4.

La sixième figure est une fleur : le même pétale, répété autour du centre, tourné d'un cran à chaque fois. Six pétales à 60° d'écart en série A, cinq à 72° en série B, huit à 45° en série C. Décrit pétale par pétale, avec des formes inclinées à chaque fois, le texte remplit la feuille et se trompe d'angle en route.

La version courte décrit le pétale une fois, debout, en mesurant chaque forme depuis le centre de la fleur. Ce point de référence s'appelle le point d'ancrage : tourner le pétale revient à le faire pivoter autour de lui. Il reste à écrire « dessiner le pétale, tourner de 60°, six fois ». Donner un nom à une suite d'instructions pour l'appeler autant de fois qu'il faut, c'est une fonction, reprise en séance 5.

Sol LeWitt conçoit Wall Drawing #118 en 1971. Le mur n'est pas peint par lui : il est décrit — cinquante points placés au hasard, tous reliés par des lignes droites — et exécuté par d'autres, à partir d'un certificat. Deux exécutions du même texte, dans deux musées, ne donnent pas le même mur. L'instruction est l'œuvre, l'exécution varie. Il en a écrit plus de mille : les Wall Drawings.

Trois d'entre eux, et ce que l'instruction laisse à celui qui l'exécute.

#118, 1971. Cinquante points au hasard, répartis uniformément sur le mur, tous reliés par des lignes droites. Le hasard est borné, le reste est mécanique : relier chaque point à tous les autres. C'est le programme des séances 3 et 4.

#46, 1970. Des lignes verticales, pas droites, qui ne se touchent pas, couvrant le mur régulièrement. Aucun nombre dans la phrase. « Pas droites » confie le tracé à la main, et deux exécutants ne rendent pas le même mur.

#797, 1995. Un premier dessinateur trace une ligne horizontale irrégulière en haut du mur. Le deuxième la recopie juste en dessous, sans la décalquer ; le troisième copie la deuxième, et ainsi de suite jusqu'en bas. Chacun a sa couleur. L'écart s'accumule à chaque copie, et le bas du mur ne ressemble plus au haut.

Écrire du code, c'est écrire une partition. La suite est technique.

L'outil du cours est p5.js 2.x, une bibliothèque JavaScript pour dessiner dans le navigateur, utilisée depuis l'éditeur en ligne editor.p5js.org : un compte gratuit, aucune installation, un lien à partager pour chaque sketch. La Processing Foundation, qui la publie, en donne un aperçu de quatre minutes.

La même chose existe en version interactive, où le code se modifie pendant la lecture, sur hello.p5js.org.

function setup() {
  createCanvas(800, 600);
}

Un rectangle gris apparaît. Deux nombres, une surface : la largeur, puis la hauteur.

function setup() {
  createCanvas(800, 600);
  background(20);
  circle(0, 0, 100);
}

Le cercle est coupé, en haut à gauche. L'origine du repère se trouve dans ce coin, et l'axe vertical descend. C'est contre-intuitif pour qui se souvient des mathématiques, familier pour qui a déplacé un calque dans un logiciel de montage.

Le centre du canvas est donc circle(400, 300, 100). Les trois arguments sont une position horizontale, une position verticale et un diamètre, dans cet ordre, et l'ordre n'est pas négociable. C'est la dictée de figures, en machine.

Les autres formes se donnent de la même façon : rect, square, ellipse, line, triangle. Le nombre d'arguments change d'une forme à l'autre, leur ordre est fixe.

Le point que désignent les deux premiers nombres change aussi. C'est le point d'ancrage de chaque forme : le centre pour circle et ellipse, le coin supérieur gauche pour rect et square. circle(200, 200, 100) et square(200, 200, 100) ne se superposent pas : le carré part du centre du cercle.

function setup() {
  createCanvas(800, 600);
  background(20);
  circle(400, 300, 100);
  fill(230, 60, 40);
}

Rien ne change, le cercle reste gris. Le fill remonté d'une ligne, au-dessus du circle, et le cercle devient rouge. C'est la panne de l'ordre, revenue en machine.

fill et noFill vont par paire, stroke et noStroke aussi : le premier de chaque paire allume, le second éteint. strokeWeight() donne l'épaisseur du contour.

width et height valent les dimensions du canvas. Elles évitent de réécrire les nombres à la main : circle(width / 2, height / 2, 100) reste au centre même si le canvas change de taille.

Kandinsky peint Einige Kreise en 1926, au Bauhaus de Dessau. Le tableau n'est fait que de disques posés sur un fond sombre, de tailles et de couleurs différentes. Il se reproduit avec background, fill, noStroke et circle, le même appel répété avec d'autres nombres.

Consigne. Reproduire la composition projetée. Quelques cercles suffisent, à condition qu'ils soient aux bonnes places. Ce qui compte, c'est que ça ressemble.

Les cercles du tableau se chevauchent en transparence. Voir fill() pour voir comment changer de couleur de remplissage.

Il est aussi possible d'utiliser blendMode(), qui décide comment une forme se mélange à ce qui est déjà dessiné. MULTIPLY assombrit, SCREEN éclaircit, et sur un fond presque noir les deux ne donnent pas le même tableau. À essayer une fois la composition debout.

Contraintes supplémentaires, une fois la composition finie :

• (a) La même composition sans utiliser circle.
• (b) La même composition en deux couleurs seulement.
• (c) La même composition retournée — le haut en bas.

Trois erreurs couvrent presque tout ce qui risque d'arriver lors de cette première séance.

circle(400, 300);

`Expected at least 3 arguments, but received fewer in circle()` — il manque un nombre. La machine dit précisément ce qui manque, et c'est rare : en profiter.

Circle(400, 300, 100);

`Circle is not defined` — la majuscule. p5 ajoute une suggestion (« you may have accidentally written "Circle" instead of "circle" »), mais ne corrige rien : le sketch reste arrêté tant que le mot n'est pas réécrit.

circle(400, 300, 100

`SyntaxError: missing ) after argument list` — et le numéro de ligne indiqué est celui d'après. Le numéro dit où la machine a buté, pas où est la faute.

La méthode, quand rien ne s'affiche ou que le message n'aide pas, tient sur une page : protocole-de-panne.

Les liens de tous les sketches sont affichés côte à côte sur la page partagée, à la fin de chaque séance. Deux sont ouverts au hasard, trente secondes chacun. Le mur ne note rien et ne relève pas ce qui manque.

La grille du rendu final est donnée dès cette séance, et pas plus tard : rendu-note.

Un autoportrait, sur un canvas de 400 × 500 imposé à toute la classe. Les formes et les couleurs de la séance, rien d'autre : pas d'image importée, pas de texte.

Personne ne juge la ressemblance. Un détail suffit à reconnaître quelqu'un : des lunettes, une mèche.

Poster le lien vers le sketchbook sur la classroom.