{"id":416,"date":"2022-10-06T10:16:09","date_gmt":"2022-10-06T08:16:09","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=416"},"modified":"2022-10-06T10:16:09","modified_gmt":"2022-10-06T08:16:09","slug":"6-4-el-metodo-map","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/6-4-el-metodo-map\/","title":{"rendered":"6.4. El m\u00e9todo map()"},"content":{"rendered":"

A la hora de utilizar la interactividad para controlar par\u00e1metros de nuestros sketches<\/em>, nos veremos muchas veces en la necesidad de tener que ajustar los valores que el dispositivo interactivo nos devuelve. Por ejemplo, podr\u00edamos querer usar la posici\u00f3n del rat\u00f3n en nuestro canvas<\/em> para controlar la transparencia de alguna de las figuras que dibujamos. Veamos un ejemplo sencillo:<\/p>\n

\"\"
Figura 73. Usando mouseX<\/span> para controlar la transparencia
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>Dado que nuestro canvas<\/em> mide 400 px de ancho, los valores de mouseX<\/span> tendr\u00e1n un rango que va desde 0 hasta 399. El problema viene cuando usamos mouseX<\/span> para determinar el valor de transparencia del relleno: como bien sabemos, el valor de transparencia puede ir de 0 a 255, por lo que, si movemos el rat\u00f3n dentro de los primeros 255 p\u00edxeles del canvas<\/em>, veremos c\u00f3mo la transparencia del relleno var\u00eda. Sin embargo, pasados los 255 p\u00edxeles no observaremos ning\u00fan cambio, ya que el alpha<\/em> del relleno no var\u00eda a partir de 255, puesto que es completamente opaco.<\/p>\n

Lo ideal ser\u00eda que pudi\u00e9semos ajustar el rango de los valores que mouseX<\/span> nos entrega para que se ajusten a los valores que fill()<\/span> espera para que la interacci\u00f3n tenga sentido. Para ello, podemos usar el m\u00e9todo map()<\/span><\/a>, al que pasamos como par\u00e1metros el valor que queremos \u00abremapear\u00bb, el m\u00ednimo y el m\u00e1ximo que estos valores pueden alcanzar y el nuevo rango al que los queremos ajustar.<\/p>\n

map(input, inputMin, inputMax, outputMin, outputMax);<\/pre>\n
En nuestro caso, el valor que queremos \u00abremapear\u00bb ser\u00eda mouseX<\/span>, cuyos l\u00edmites ser\u00edan 0 y el ancho de nuestro canvas<\/em> (width<\/em>), mientras que el m\u00ednimo y el m\u00e1ximo del nuevo rango ser\u00edan 0 y 255. Por lo tanto, el m\u00e9todo quedar\u00eda as\u00ed:<\/p>\n
map(mouseX, 0, width, 0, 255);<\/pre>\n
Pong\u00e1moslo en funcionamiento:<\/p>\n
\"\"
Figura 74. Usando map() para ajustar el rango de interacci\u00f3n
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En la figura 74 tenemos en la parte superior del canvas <\/em>un c\u00edrculo cuya opacidad no est\u00e1 ajustada al rango completo de valores posibles de mouseX<\/span>, mientras que el c\u00edrculo de la parte inferior s\u00ed tiene su opacidad ajustada del rango (0, 400) que puede alcanzar mouseX<\/span> al rango (0, 255) que puede tomar su opacidad.<\/p>\n","protected":false},"excerpt":{"rendered":"
A la hora de utilizar la interactividad para controlar par\u00e1metros de nuestros sketches, nos veremos muchas veces en la necesidad de tener que ajustar los valores que el dispositivo interactivo nos devuelve. Por ejemplo, podr\u00edamos querer usar la posici\u00f3n del rat\u00f3n en nuestro canvas para controlar la transparencia de alguna de las figuras que dibujamos. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/416"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/416\/revisions"}],"predecessor-version":[{"id":417,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/416\/revisions\/417"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}