{"id":2008,"date":"2019-07-10T17:05:42","date_gmt":"2019-07-10T15:05:42","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=2008"},"modified":"2019-08-17T22:01:18","modified_gmt":"2019-08-17T20:01:18","slug":"4-3-tipografia","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/4-3-tipografia\/","title":{"rendered":"4.3. Tipograf\u00eda"},"content":{"rendered":"

Con p5.js podemos escribir textos en la posici\u00f3n que queramos del canvas<\/em>. Solo hace falta que usemos la funci\u00f3n\u00a0text()<\/span><\/a> pas\u00e1ndole como par\u00e1metros el texto a escribir, la posici\u00f3n x<\/strong> y la posici\u00f3n y<\/strong>. Como este ejemplo:<\/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
Esto nos dibujar\u00e1 este canvas<\/em>:<\/p>\n
\"\"<\/p>\n
Pero este texto es muy peque\u00f1o. Lo podemos hacer m\u00e1s grande usando la funci\u00f3n\u00a0textSize()<\/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
Ahora tendremos este canvas<\/em>:<\/p>\n
\"\"<\/p>\n
Otro cambio que podemos hacer es variar el tipo de letra. Lo haremos con la funci\u00f3n\u00a0textfont()<\/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
Y ahora tendremos esto:<\/p>\n
\"\"<\/p>\n
Esto tiene una pega, solo funcionar\u00e1 si el usuario tiene el tipo de letra instalado en su ordenador; si no, ver\u00e1 el texto pero con una tipograf\u00eda seleccionada por su sistema.<\/p>\n
Si queremos asegurarnos de que usamos una tipograf\u00eda que sea visible en cualquier lugar, entonces tenemos dos opciones:<\/p>\n
    \n
  1. Cargar una tipograf\u00eda desde un servicio en l\u00ednea (como Google). En este caso, habr\u00e1 que cargar la tipograf\u00eda en el fichero index.html.<\/li>\n
  2. Cargar una tipograf\u00eda que tengamos en nuestro ordenador. En este caso, tendremos que cargar la tipograf\u00eda desde nuestro programa.<\/li>\n<\/ol>\n
    Uso de tipograf\u00edas en l\u00ednea<\/span><\/h2>\n
    Si queremos usar tipograf\u00edas de un servicio en l\u00ednea, entonces tendremos que cargar la tipograf\u00eda (o tipograf\u00edas) que queremos usar, en el fichero index.html<\/strong>. Para probarlo, usaremos las tipograf\u00edas que ofrece Google y que podemos ver en\u00a0https:\/\/fonts.google.com\/<\/a>.<\/p>\n
    Hemos seleccionado una concreta: Pattaya<\/a> y en la web de Google veremos una pantalla con informaci\u00f3n sobre la tipograf\u00eda y un enlace como este:<\/p>\n
    \"\"<\/p>\n
    Si lo clicamos, en la parte inferior de la ventana aparecer\u00e1 esto:<\/p>\n
    \"\"<\/p>\n
    Y si clicamos encima, esto:<\/p>\n
    \"\"<\/p>\n
    Si nos fijamos, desde esta ventana podemos bajar la tipograf\u00eda, pero tambi\u00e9n podemos ver que tenemos que poner en el archivo index.html<\/strong> para cargarla. En concreto este:<\/p>\n
    <link href=\"https:\/\/fonts.googleapis.com\/css?family=Pattaya\" rel=\"stylesheet\"><\/pre>\n
    Ahora, nuestro archivo index.html<\/strong> tendr\u00e1 este aspecto:<\/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
    Nuestro programa es este:<\/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
    Y, finalmente, lo que aparecer\u00e1 en el navegador ser\u00e1 esto:<\/p>\n
    \"\"<\/p>\n
    Podemos cargar m\u00e1s de una tipograf\u00eda y, por lo tanto, escribir diferentes textos con diferentes tipograf\u00edas.<\/p>\n
    Ejercicios<\/span><\/h2>\n
    Ahora podemos hacer un canvas<\/em> m\u00e1s grande y hacer que:<\/p>\n
      \n
    1. El texto se mueva siguiendo el rat\u00f3n.<\/li>\n
    2. El texto se haga m\u00e1s grande o m\u00e1s peque\u00f1o seg\u00fan la posici\u00f3n x<\/strong> del rat\u00f3n.<\/li>\n
    3. Escribir dos textos con dos tipograf\u00edas diferentes.<\/li>\n
    4. Escribir un texto y, cuando se haga un clic con el rat\u00f3n, que cambie la tipograf\u00eda.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      Con p5.js podemos escribir textos en la posici\u00f3n que queramos del canvas. Solo hace falta que usemos la funci\u00f3n\u00a0text() pas\u00e1ndole como par\u00e1metros el texto a escribir, la posici\u00f3n x y la posici\u00f3n y. Como este ejemplo: function setup() { createCanvas(200, 200); } function draw() { background(220); text(\u00abLorem ipsum…\u00bb,50,100); } Esto nos dibujar\u00e1 este canvas: Pero […]<\/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\/es\/wp-json\/wp\/v2\/pages\/2008"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=2008"}],"version-history":[{"count":8,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/2008\/revisions"}],"predecessor-version":[{"id":3991,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/2008\/revisions\/3991"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=2008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}