{"id":2070,"date":"2016-01-01T00:50:41","date_gmt":"2015-12-31T23:50:41","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2070"},"modified":"2016-10-02T15:35:23","modified_gmt":"2016-10-02T14:35:23","slug":"p5-js-10-media-charger-des-typos","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2070","title":{"rendered":"\/ p5.js \/ 10 \/ m\u00e9dia : charger des typos"},"content":{"rendered":"

<\/p>\n

Les typos peuvent \u00eatre charg\u00e9es de diff\u00e9rentes mani\u00e8res. Typos syst\u00e8mes, typos en lignes & typos install\u00e9es sur votre pc sont utilisables…<\/p>\n

Typos syst\u00e8mes<\/h4>\n
function setup() {\r\ncreateCanvas(800, 600);\r\ntextFont(\"Arial\");\r\ntextSize(102);\r\n}\r\nfunction draw() {\r\ntext(\"Hello world\", 50, 120);\r\n}<\/pre>\n
La commande text<\/em> n\u00e9cessite une “cha\u00eene de caract\u00e8res” \/ “string”, la position en x et en y.
\nRemarque<\/strong> : (x,y)<\/em> correspondent \u00e0 la ligne de base \u00e0 gauche du texte.<\/p>\n
Il est aussi possible d’int\u00e9grer le texte dans un “bo\u00eete”.<\/p>\n
function setup() {\r\ncreateCanvas(800, 600);\r\ntextFont(\"Arial\");\r\ntextSize(60);\r\n}\r\nfunction draw() {\r\ntext(\"Il est aussi possible d'int\u00e9grer le texte dans un bo\u00eete.\", 50, 50, 400, 400);\r\n}<\/pre>\n
Dans ce cas l\u00e0 les 4e<\/sup> et 5e<\/sup> param\u00e8tres d\u00e9terminent la taille du rectangle de la “bo\u00eete” et les coordonn\u00e9es (x,y)<\/em> sont en haut \u00e0 gauche comme pour un rectangle…<\/p>\n
Web fonts (Google fonts)<\/h4>\n
Ajouter le lien dans la page index.html<\/em> du projet.<\/p>\n
<link href='https:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed' rel='stylesheet' type='text\/css'><\/pre>\n
\"font\"<\/a><\/p>\n
Ajouter le nom de la typo dans votre script (tel qu’il figure sur le site Google Fonts) : ‘Roboto Condensed’<\/em><\/p>\n
function setup() {\r\ncreateCanvas(800, 600);\r\ntextFont('Roboto Condensed');\r\ntextSize(60);\r\n}\r\nfunction draw() {\r\ntext(\"Il est aussi possible d'int\u00e9grer le texte dans un bo\u00eete.\", 50, 50, 400, 400);\r\n}<\/pre>\n
Typos locales<\/h4>\n
Pour les fonts install\u00e9es en local la m\u00e9thode est similaire au chargement d’images.
\np5.js<\/em> supporte les fonts ttf<\/em> & les fonts otf
\n<\/em>Copier le fichier de la typo utilis\u00e9e dans le dossier de votre animation.
\nCr\u00e9er une variable.
\nDans la fonction preload<\/em> charger le fichier de la typo.<\/p>\n
var robotoCondensed;\r\n\r\nfunction preload(){\r\nrobotoCondensed = loadFont('RobotoCondensed-Regular.ttf');\r\n}\r\n\r\nfunction setup() {\r\ncreateCanvas(800, 600);\r\ntextFont(robotoCondensed);\r\ntextSize(60);\r\n}\r\nfunction draw() {\r\ntext(\"Il est aussi possible d'int\u00e9grer le texte dans un bo\u00eete.\", 50, 50, 400, 400);\r\n}<\/pre>\n
 <\/p>\n
Charles Csuri<\/a><\/p><\/blockquote>\n