{"id":2004,"date":"2019-07-10T16:48:59","date_gmt":"2019-07-10T14:48:59","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=2004"},"modified":"2019-08-17T21:58:22","modified_gmt":"2019-08-17T19:58:22","slug":"4-2-importar-imagenes","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/4-2-importar-imagenes\/","title":{"rendered":"4.2. Importar im\u00e1genes"},"content":{"rendered":"

Hasta ahora, hemos creado dibujos hechos a partir de las formas que creamos con p5.js. Pero con p5.js podemos importar im\u00e1genes en formato jpg<\/strong> o png<\/strong> y usarlas para incluirlas en nuestros programas, pudiendo hacer composiciones m\u00e1s complejas.<\/p>\n

Para poder trabajar con im\u00e1genes necesariamente tendremos que trabajar en l\u00ednea, con el servidor FTP de la UOC, dado que por seguridad los navegadores no permiten la carga de archivos de manera local.<\/p>\n

Para ello, crearemos una carpeta nueva a la que llamaremos img<\/strong>, donde guardaremos las im\u00e1genes que usemos.<\/p>\n

Organizando el espacio del servidor<\/h2>\n

Vamos a ver cu\u00e1l ser\u00e1 la estructura que tenemos que tener en el servidor:<\/p>\n

\"\"<\/p>\n

Dentro de la carpeta js<\/strong> tendremos los dos archivos que ya ten\u00edamos, el p5.min.js<\/strong> y el sketch.js<\/strong>.<\/p>\n

Dentro de la carpeta img<\/strong> guardaremos las im\u00e1genes que vienen como ejemplo en el libro, disponibles para bajarla desde\u00a0http:\/\/p5js.org\/learn\/books\/media.zip<\/a>.<\/p>\n

Para poder usar una imagen, tendremos que hacer tres pasos previos:<\/p>\n

    \n
  1. Copiar la imagen en la carpeta donde tenemos nuestro c\u00f3digo.<\/li>\n
  2. Crear una variable que almacene la imagen.<\/li>\n
  3. Cargar la imagen con la funci\u00f3n\u00a0loadImage()<\/span><\/a>.<\/li>\n<\/ol>\n

    \u00bfC\u00f3mo hacemos estos tres pasos?<\/strong><\/p>\n

    El primer paso ya lo hemos hecho. Para tener nuestros ficheros muy organizados, hemos almacenado las im\u00e1genes en una carpeta que se llama img<\/strong>, pero veremos que no influye a la hora de hacer nuestros programas.<\/p>\n

    El segundo y tercer pasos los veremos en este ejemplo:<\/p>\n

    var img;   \/\/ Definimos una variable para almacenar la imagen\r\nfunction preload() {   \/\/ A\u00f1adimos una nueva funci\u00f3n que nos \r\n                       \/\/ carga la imagen\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); \/\/ Dibuja la imagen\r\n}\r\n<\/pre>\n
    La funci\u00f3n\u00a0preload()<\/a><\/span> se usa para cargar la imagen antes de ejecutar el c\u00f3digo. De hecho, si existe esta funci\u00f3n, la funci\u00f3n setup()<\/span>\u00a0esperar\u00e1 a ejecutarse a que la funci\u00f3n preload()<\/span>\u00a0haya finalizado (y por lo tanto, a que todas las im\u00e1genes est\u00e9n cargadas).<\/p>\n
    El resultado, si ejecutamos este programa, ser\u00e1 este:<\/p>\n
    \"\"<\/p>\n
    Pod\u00e9is ver este ejemplo funcionando en\u00a0http:\/\/cv.uoc.edu\/~ccasadom\/PDA\/html<\/a>.<\/p>\n
    Este ejemplo se corresponde con el ejemplo 7-1 del libro (atenci\u00f3n al cambio que se ha hecho en el c\u00f3digo \u2013en color rosa\u2013 especificando el directorio donde est\u00e1 la imagen almacenada).<\/p>\n
    Para dibujar la imagen hemos usado la funci\u00f3n\u00a0image()<\/span> que tiene esta sintaxis:<\/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 es f\u00e1cil; x<\/span> e y<\/span> indican la posici\u00f3n del canvas<\/em> donde se pondr\u00e1 la imagen (corresponde con la esquina superior izquierda de la imagen) y width<\/span> y height<\/span> el ancho y la altura. Si no indicamos estos dos datos, entonces usar\u00e1 las medidas originales.<\/p>\n
    La segunda es m\u00e1s compleja; dx<\/span> y dy<\/span> indican la posici\u00f3n de la imagen en el canvas<\/em>, dWidth<\/span> y dHeight<\/span>, el tama\u00f1o de la imagen en el canvas<\/em>, sx<\/span> y sy<\/span> a partir de qu\u00e9 posici\u00f3n de la imagen mostraremos y sWitdth<\/span> y sHeight<\/span> el tama\u00f1o que cogeremos de la imagen. Si sWitdth<\/span> y sHeight<\/span> son m\u00e1s peque\u00f1os que dWidth<\/span> y dHeight<\/span> el trozo de imagen que se muestre se har\u00e1 m\u00e1s grande y, en caso contrario, m\u00e1s peque\u00f1o.<\/p>\n
    En el ejemplo 7-2 se hacen dos cosas. Por un lado, se cargan dos im\u00e1genes. Por otra, a la hora de dibujarlas se usan diferentes efectos:<\/p>\n
    image(img1, -120, 0);<\/pre>\n
    Esto hace que la imagen que se carga lo haga 120 p\u00edxeles fuera del canvas<\/em>. El resultado es este:<\/p>\n
    \"\"<\/p>\n
    Hemos recortado la imagen por la izquierda.<\/p>\n
    Ahora a\u00f1adimos otra vez la misma imagen, pero cambiando la posici\u00f3n x<\/strong> (130 p\u00edxeles a la derecha) y recort\u00e1ndola (nos quedamos solo con 240 p\u00edxeles de anchura y 120 de altura).<\/p>\n
    image(img1, -120, 0);\r\nimage(img1, 130, 0, 240, 120);<\/pre>\n
    Este es el resultado:<\/p>\n
    \"\"<\/p>\n
    En el primer caso, como no hemos indicado el tama\u00f1o, ha intentado poner toda la imagen. Y ha salido la parte que cab\u00eda en el canvas<\/em>. En el segundo caso, hemos indicado el tama\u00f1o donde se ten\u00eda que encajar la imagen y la imagen se ha adaptado a la medida disponible<\/strong>.<\/p>\n
    Ahora a\u00f1adimos la segunda imagen:<\/p>\n
    image(img1, -120, 0);\r\nimage(img1, 130, 0, 240, 120);\r\nimage(img2, 300, 0, 240, 120);<\/pre>\n
    Y este es el resultado:<\/p>\n
    \"\"<\/p>\n
    Fijaos en que las im\u00e1genes se ponen encima unas de otras. La \u00faltima en dibujarse es la que estar\u00e1 m\u00e1s arriba.<\/p>\n
    Pod\u00e9is ver este ejemplo funcionando en\u00a0http:\/\/cv.uoc.edu\/~ccasadom\/PDA\/r5e2.html<\/a>.<\/p>\n
    En el ejemplo 7-3 el tama\u00f1o de la imagen var\u00eda seg\u00fan el movimiento del rat\u00f3n:<\/p>\n
    image(img, 0, 0, mouseX * 2, mouseY * 2);<\/pre>\n
    En este ejemplo se puede ver c\u00f3mo la imagen se adapta al tama\u00f1o que hemos dado a la funci\u00f3n image()<\/span>.<\/p>\n
    Pod\u00e9is ver este ejemplo en la direcci\u00f3n\u00a0http:\/\/cv.uoc.edu\/~ccasadom\/PDA\/r5e3.html<\/a>.<\/p>\n
    En los ejemplos 7-4 y 7-5 lo que tenemos son dos im\u00e1genes, una en formato gif<\/strong> y la otra en formato png<\/strong>, que tienen transparencia. El c\u00f3digo es el mismo en los dos casos, lo \u00fanico que cambia es la imagen. Pod\u00e9is ver estos dos ejemplos en las siguientes direcciones:<\/p>\n