Vos actions : Créer un document, voir la page générale.

Cultures numériques

Cours de Bachelor 1

Des lettres avec Metapost

Isabelle/ Lucie/ Céline
Créer de la typographie grâce à du code ? C’est possible avec Metapost  !


Ce langage, que nous avons découvert durant le workshop, permet de placer des points sur un repère puis de les relier entre eux pour créer des figures géométriques, lettres, illustrations...
Le but final étant de réaliser un abécédaire, chaque personne à du créer sa propre lettre. L’abécédaire à ensuite été dessiné grâce à un plotter, qui suit les "instructions’’ du code.
Pour vous donner une idée, un plotter, c’est ça :

La technologie, c’est merveilleux.


Les étapes pour réaliser une lettre ou n’importe quel dessin sont les suivantes :

- On commence sur papier avec repère de préférence, puis on trace son dessin
- On place ensuite des points clés que l’on numérote suivant le dessin
- On repère les coordonnées de chaque point, pour ensuite pouvoir les entrer dans Metapost (exemple ci-dessous).
- On relie ensuite ces points par des lignes droites ou des courbes, selon le rendu souhaité.

On peut ensuite ajouter des couleurs (palette assez limitée), modifier l’épaisseur ou remplir la forme.
Le plotter se charge de tracer l’ensemble des lettres réalisées par chacun.

Voici quelques exemples de lettres réalisées durant le workshop :

Et voici le code correspondant à la lettre "L" :

% Letter L Isabelle
beginfig(76) ;
draw (0u, 0u)—(0u,10u)—(10u,10u)—(10u,0u)—cycle withcolor white ;
pickup pencircle scaled 30pt ;
z1=(1u,9u) ;
z2=(1u,5u) ;
z3=(0,2u) ;
z4=(5u,0) ;
z5=(8.5u,2u) ;
draw z1..z2..z3..z4..z5 withcolor green ;

pickup pencircle scaled 28pt ;
z6=(0,8u) ;
z7=(1.5u,3.5u) ;
z8=(1u,2u) ;
z9=(6.5u,0) ;
z10=(9u,0.8u) ;
draw z6..z7..z8..z9..z10 withcolor blue ;

pickup pencircle scaled 0pt ;
z18=(4u,6u) ;
z19=(4u,7u) ;
z20=(6u,6.5u) ;
z21=(5.5u,6u) ;
draw z18—z19—z20—z21—z18 ;
fill (4u,6u)—(4u,7u)—(6u,6.5u)—(5.5u,6u)—cycle withcolor blue ;

pickup pencircle scaled 0pt ;
z22=(6u,6.5u) ;
z23=(5u,7u) ;
z24=(4u,9u) ;
z25=(6u,8u) ;
draw z22..z23..z24—z25—z22 ;
fill (6u,6.5u)..(5u,7u)..(4u,9u)—(6u,8u)—(6.5u,6u)—cycle withcolor .5[red,blue] ;

pickup pencircle scaled 0pt ;
z26=(6.5u,6u) ;
z27=(8u,6u) ;
z28=(9u,4u) ;
z29=(7u,5u) ;
draw z26..z27—z28..z29..z26 ;
fill (6.5u,6u)..(8u,6u)—(9u,4u)..(7u,5u)..(6.5u,6u)—cycle withcolor .5[red,blue] ;

pickup pencircle scaled 0pt ;
z30=(6.5u,6u) ;
z31=(7u,4u) ;
z32=(6u,4u) ;
z33=(6u,5.5u) ;
draw z30—z31—z32—z33—z30 ;
fill (6.5u,6u)—(7u,4u)—(6u,4u)—(6u,5.5u)—cycle withcolor blue ;

pickup pencircle scaled 5pt ;
z34=(6.6u,7.5u) ;
z35=(6.6u,7u) ;
draw z34—z35 withcolor green ;

pickup pencircle scaled 5pt ;
z36=(7u,7u) ;
z37=(7.2u,7.1u) ;
draw z36—z37 withcolor green ;

pickup pencircle scaled 0pt ;
z11=(2u,1.9u) ;
z12=(4.5u,5u) ;
z14=(5.8u,6.5u) ;
z15=(7u,6.7u) ;
z16=(7u,6u) ;
z17=(5u,4.5u) ;
z18=(2.4u,1.9u) ;
draw z11..z12..z14..z15..z16..z17..z18..z11 ;
fill (2u,1.9u)..(4.5u,5u)..(5.8u,6.5u)..(7u,7u)..(7u,6.7u)..(5u,4.5u)..(2.4u,1.9u)—cycle withcolor green ;

endfig ;

Puis l’abécédaire complet tracé au plotter :

Les +  : C’est plutôt ludique et intéressant de pouvoir créer de l’image avec du code (autre qu’en CSS qui permet aussi de créer de l’image vectorielle)
Les -  : C’est assez long et il faut bien comprendre la logique du code, sinon on peut vite abandonner

Pour en savoir plus :
Page Wikipédia de Métapost
Un autre exemple avec le plotter et Metafont

Par Groupe 3, 12 décembre 2016