{"id":891,"date":"2019-07-07T19:35:43","date_gmt":"2019-07-07T17:35:43","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=891"},"modified":"2019-08-17T21:58:39","modified_gmt":"2019-08-17T19:58:39","slug":"4-2-importar-imatges","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/4-2-importar-imatges\/","title":{"rendered":"4.2. Importar imatges"},"content":{"rendered":"

Fins ara hem creat dibuixos fets a partir de les formes que creem amb p5.js. Per\u00f2 amb p5.js podem importar imatges en format jpg<\/strong> o png<\/strong> i fer-les servir per a incloure-les als nostres programes, podent fer composicions m\u00e9s complexes.<\/p>\n

Per a poder treballar amb imatges necess\u00e0riament haurem de treballar en l\u00ednia, amb el servidor FTP de la UOC, at\u00e8s que per seguretat els navegadors no permeten la c\u00e0rrega d\u2019arxius de manera local.<\/p>\n

\u00c9s per aix\u00f2 que crearem una carpeta nova, a qu\u00e8 direm img<\/strong>, on guardarem les imatges que fem servir.<\/p>\n

Organitzant l\u2019espai del servidor<\/h2>\n

Vegem quina ser\u00e0 l\u2019estructura que hem de tenir al servidor:<\/p>\n

\"\"<\/p>\n

Dins la carpeta js<\/strong> tindrem els dos arxius que ja ten\u00edem, el p5.min.js<\/strong> i l\u2019sketch.js<\/strong>.<\/p>\n

Dins la carpeta img<\/strong>, guardarem les imatges que venen com a exemple al llibre, disponibles per a baixar-les des d\u2019http:\/\/p5js.org\/learn\/books\/media.zip<\/a>.<\/p>\n

Per a poder fer servir una imatge, haurem de fer tres passos previs:<\/p>\n

    \n
  1. Copiar la imatge a la carpeta on tenim el nostre codi.<\/li>\n
  2. Crear una variable que emmagatzemi la imatge.<\/li>\n
  3. Carregar la imatge amb la funci\u00f3 loadImage()<\/span><\/a>.<\/li>\n<\/ol>\n

    Com farem aquests tres passos?<\/strong><\/p>\n

    El primer pas ja l\u2019hem fet. Per a tenir els nostres fitxers ben organitzats, hem emmagatzemat les imatges en una carpeta que es diu img<\/strong>, per\u00f2 veurem que aix\u00f2 no influeix a l\u2019hora de fer els nostres programes.<\/p>\n

    El segon i el tercer passos els veurem en aquest exemple:<\/p>\n

    var img;   \/\/ Definim una variable per a emmagatzemar la imatge\r\nfunction preload() {   \/\/ Afegim una nova funci\u00f3 que ens \r\n                       \/\/ carrega la imatge\r\n  img = loadImage(\"img\/lunar.jpg<\/span>\");\r\n}\r\nfunction setup() {\r\n  createCanvas(480, 120);\r\n}\r\nfunction draw() {\r\n  image(img, 0, 0); \/\/ Dibuixa la imatge\r\n}\r\n<\/pre>\n
    La funci\u00f3 preload()<\/span><\/a><\/span> es fa servir per a carregar la imatge abans d\u2019executar el codi. De fet, si existeix aquesta funci\u00f3, la funci\u00f3 setup()<\/span> no s\u2019executar\u00e0 fins que la funci\u00f3 preload()<\/span> hagi finalitzat (i, per tant, que totes les imatges estiguin carregades).<\/p>\n
    El resultat, si executem aquest programa, ser\u00e0 aquest:<\/p>\n
    \"\"<\/p>\n
    Podeu veure aquest exemple funcionant a http:\/\/cv.uoc.edu\/~ccasadom\/PDA\/html<\/a>.<\/p>\n
    Aquest exemple es correspon amb l\u2019exemple 7-1 del llibre (atenci\u00f3 al canvi que s\u2019ha fet al codi \u2013en color rosa\u2013 especificant el directori on hi ha la imatge emmagatzemada).<\/p>\n
    Per a dibuixar la imatge, hem fet servir la funci\u00f3 image()<\/span> que t\u00e9 aquesta sintaxi:<\/p>\n
    image(img, x, y, [width], [height])\r\n\r\nimage(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight])<\/pre>\n
    La primera \u00e9s f\u00e0cil, x<\/span> i y<\/span> indiquen la posici\u00f3 del canvas<\/em> on es posar\u00e0 la imatge (correspon amb la cantonada superior esquerra de la imatge) i width<\/span> i height<\/span> l\u2019amplada i l\u2019al\u00e7ada. Si no indiquem aquestes dues dades, aleshores far\u00e0 servir les mides originals.<\/p>\n
    La segona \u00e9s m\u00e9s complexa, dx<\/span> i dy<\/span> indiquen la posici\u00f3 de la imatge al canvas<\/em>, dWidth<\/span> i dHeight<\/span> la mida de la imatge al canvas<\/em>, sx<\/span> i sy<\/span> a partir de quina posici\u00f3 mostrarem la imatge i sWitdth<\/span> i sHeight<\/span> la mida que agafarem de la imatge. Si sWitdth<\/span> i sHeight<\/span> s\u00f3n m\u00e9s petits que dWidth<\/span> i dHeight<\/span>, el tros d\u2019imatge que es mostri es far\u00e0 m\u00e9s gran i, en cas contrari, m\u00e9s petit.<\/p>\n
    En l\u2019exemple 7-2 es fan dues coses. Per una banda, es carreguen dues imatges. Per l\u2019altra, a l\u2019hora de dibuixar-les es fan servir diferents efectes:<\/p>\n
    image(img1, -120, 0);<\/pre>\n
    Aix\u00f2 fa que la imatge que es carrega ho faci 120 p\u00edxels fora del canvas<\/em>. El resultat \u00e9s aquest:<\/p>\n
    \"\"<\/p>\n
    Hem retallat la imatge per l\u2019esquerra.<\/p>\n
    Ara afegim un altre cop la mateixa imatge, per\u00f2 canviant la posici\u00f3 x<\/strong> (130 p\u00edxels a la dreta) i retallant-la (ens quedem nom\u00e9s amb 240 p\u00edxels d\u2019amplada i 120 d\u2019al\u00e7ada).<\/p>\n
    image(img1, -120, 0);\r\nimage(img1, 130, 0, 240, 120);<\/pre>\n
    Aquest \u00e9s el resultat:<\/p>\n
    \"\"<\/p>\n
    En el primer cas, com que no hem indicat la mida, ha intentat posar tota la imatge i ha sortit la part que cabia al canvas<\/em>. En el segon cas, hem indicat la mida on s\u2019havia d\u2019encabir la imatge i la imatge s\u2019ha adaptat a la mida disponible<\/strong>.<\/p>\n
    Ara afegim la segona imatge:<\/p>\n
    image(img1, -120, 0);\r\nimage(img1, 130, 0, 240, 120);\r\nimage(img2, 300, 0, 240, 120);<\/pre>\n
    I aquest \u00e9s el resultat:<\/p>\n
    \"\"<\/p>\n
    Fixeu-vos que les imatges es posen unes a sobre de les altres. La darrera a dibuixar-se \u00e9s la que estar\u00e0 m\u00e9s amunt.<\/p>\n
    Podeu veure aquest exemple funcionant a http:\/\/cv.uoc.edu\/~ccasadom\/PDA\/r5e2.html<\/a>.<\/p>\n
    En l\u2019exemple 7-3, la mida de la imatge varia segons el moviment del ratol\u00ed:<\/p>\n
    image(img, 0, 0, mouseX * 2, mouseY * 2);<\/pre>\n
    En aquest exemple es pot veure com la imatge s\u2019adapta a la mida que hem donat a la funci\u00f3 image()<\/span>.<\/p>\n
    Podeu veure aquest exemple a l\u2019adre\u00e7a http:\/\/cv.uoc.edu\/~ccasadom\/PDA\/r5e3.html<\/a>.<\/p>\n
    En els exemples 7-4 i 7-5, el que tenim s\u00f3n dues imatges, una en format gif<\/strong> i l\u2019altra en format png<\/strong>, que tenen transpar\u00e8ncia. El codi \u00e9s el mateix en els dos casos, l\u2019\u00fanica cosa que canvia \u00e9s la imatge. Podeu veure aquests dos exemples a les adreces seg\u00fcents:<\/p>\n