{"id":932,"date":"2019-07-07T20:13:17","date_gmt":"2019-07-07T18:13:17","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=932"},"modified":"2019-08-17T22:01:43","modified_gmt":"2019-08-17T20:01:43","slug":"4-3-tipografia","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/4-3-tipografia\/","title":{"rendered":"4.3. Tipografia"},"content":{"rendered":"

Amb p5.js podem escriure textos a la posici\u00f3 que vulguem del canvas<\/em>. Nom\u00e9s cal que fem servir la funci\u00f3 text()<\/span><\/a> indicant-li com a par\u00e0metres el text a escriure, la posici\u00f3 x<\/strong> i la posici\u00f3 y<\/strong>. Com en aquest exemple:<\/p>\n

function setup() {\r\n createCanvas(200, 200);\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n text(\"Lorem ipsum...\",50,100);\r\n}<\/pre>\n
Aix\u00f2 ens dibuixar\u00e0 aquest canvas<\/em>:<\/p>\n
\"\"<\/p>\n
Per\u00f2 aquest text \u00e9s molt petit. El podem fer m\u00e9s gran fent servir la funci\u00f3 textSize()<\/span><\/a>:<\/p>\n
function setup() {\r\n createCanvas(200, 200);\r\n textSize(20);\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n text(\"Lorem ipsum...\",50,100);\r\n}<\/pre>\n
Ara tindrem aquest canvas<\/em>:<\/p>\n
\"\"<\/p>\n
Un altre canvi que podem fer \u00e9s variar el tipus de lletra. Ho farem amb la funci\u00f3 textfont()<\/span><\/a>:<\/p>\n
function setup() {\r\n createCanvas(200, 200);\r\n textSize(20);\r\n textFont(\"Times New Roman\");\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n text(\"Lorem ipsum...\",50,100);\r\n}<\/pre>\n
I ara tindrem aix\u00f2:<\/p>\n
\"\"<\/p>\n
Aix\u00f2 t\u00e9 una pega, nom\u00e9s funcionar\u00e0 si l\u2019usuari t\u00e9 el tipus de lletra instal\u00b7lat al seu ordinador, sin\u00f3, veur\u00e0 el text per\u00f2 amb una tipografia seleccionada pel seu sistema.<\/p>\n
Si ens volem assegurar que fem servir una tipografia que sigui visible a qualsevol lloc, aleshores tenim dues opcions:<\/p>\n
    \n
  1. Carregar una tipografia des d\u2019un servei online<\/em> (com Google). En aquest cas, caldr\u00e0 carregar la tipografia al fitxer index.html.<\/li>\n
  2. Carregar una tipografia que tinguem al nostre ordinador. En aquest cas, haurem de carregar la tipografia des del nostre programa.<\/li>\n<\/ol>\n
    \u00das de tipografies online<\/em><\/h2>\n
    Si volem fer servir tipografies d\u2019un servei online<\/em>, aleshores haurem de carregar la tipografia (o tipografies) que volem fer servir al fitxer index.html<\/strong>. Per a provar-ho, farem servir les tipografies que ofereix Google i que podem veure a https:\/\/fonts.google.com\/<\/a>.<\/p>\n
    Hem seleccionat una concreta: Pattaya<\/a> i al web de Google veurem una pantalla amb informaci\u00f3 sobre la tipografia i un enlla\u00e7 com aquest:<\/p>\n
    \"\"<\/p>\n
    Si el cliquem, a la part inferior de la finestra apareixer\u00e0 aix\u00f2:<\/p>\n
    \"\"<\/p>\n
    I si cliquem a sobre, aix\u00f2:<\/p>\n
    \"\"<\/p>\n
    Si ens fixem, des d\u2019aquesta finestra podem baixar la tipografia, per\u00f2 tamb\u00e9 podem veure qu\u00e8 hem de posar a l\u2019arxiu index.html<\/strong> per a carregar-la. En concret aquest:<\/p>\n
    <link href=\"https:\/\/fonts.googleapis.com\/css?family=Pattaya\" rel=\"stylesheet\"><\/pre>\n
    Ara, el nostre arxiu index.html<\/strong> tindr\u00e0 aquest aspecte:<\/p>\n
    <html>\r\n <head>\r\n  <script type=\"text\/javascript\" src=\"js\/p5.min.js\"><\/script>\r\n  <script type=\"text\/javascript\" src=\"js\/sketch.js\"><\/script>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css?family=Pattaya\" rel=\"stylesheet\">\r\n <\/head>\r\n <body>\r\n <\/body>\r\n<\/html><\/pre>\n
    I el nostre programa aquest:<\/p>\n
    function setup() {\r\n createCanvas(200, 200);\r\n textSize(20);\r\n textFont(\"Pattaya\");\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n text(\"Lorem ipsum...\",50,100);\r\n}<\/pre>\n
    I, finalment, el que apareixer\u00e0 al navegador ser\u00e0 aix\u00f2:<\/p>\n
    \"\"<\/p>\n
    Podem carregar m\u00e9s d\u2019una tipografia i, per tant, escriure diferents textos amb diferents tipografies.<\/p>\n
    Exercicis<\/h2>\n
    Ara podem fer un canvas<\/em> m\u00e9s gran i fer que:<\/p>\n
      \n
    1. El text es mogui seguint el ratol\u00ed.<\/li>\n
    2. El text es faci m\u00e9s gran o m\u00e9s petit segons la posici\u00f3 x<\/strong> del ratol\u00ed.<\/li>\n
    3. Escriure dos textos amb dues tipografies diferents.<\/li>\n
    4. Escriure un text i, quan es faci un clic amb el ratol\u00ed, que canvi\u00ef la tipografia.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      Amb p5.js podem escriure textos a la posici\u00f3 que vulguem del canvas. Nom\u00e9s cal que fem servir la funci\u00f3 text() indicant-li com a par\u00e0metres el text a escriure, la posici\u00f3 x i la posici\u00f3 y. Com en aquest exemple: function setup() { createCanvas(200, 200); } function draw() { background(220); text(“Lorem ipsum…”,50,100); } Aix\u00f2 ens dibuixar\u00e0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/932"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/comments?post=932"}],"version-history":[{"count":9,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/932\/revisions"}],"predecessor-version":[{"id":3992,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/pages\/932\/revisions\/3992"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-json\/wp\/v2\/media?parent=932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}