{"id":723,"date":"2012-06-26T21:04:56","date_gmt":"2012-06-26T21:04:56","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/di\/?p=723"},"modified":"2012-06-26T21:04:56","modified_gmt":"2012-06-26T21:04:56","slug":"cas-destudi-io-brush-the-world-as-a-palette-pinzell-es-el-mon-com-a-paleta","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/di\/2012\/06\/26\/cas-destudi-io-brush-the-world-as-a-palette-pinzell-es-el-mon-com-a-paleta\/","title":{"rendered":"CAS D&#8217;ESTUDI :: I\/O BRUSH: The World As A Palette (Pinzell E\/S: el m\u00f3n com a paleta)"},"content":{"rendered":"<p><\/p>\n<h2>I\/O Brush: The world as a palette<\/h2>\n<p><a title=\"Web de Businessweek\" href=\"http:\/\/images.businessweek.com\/ss\/05\/06\/idea2005\/source\/139.htm\" target=\"_blank\"><strong><em>Gold Award &#8211; Industrial Design Society of America 2005 &#8211; Industrial Design Excellence Award\u00a0<\/em><\/strong><\/a><\/p>\n<ul>\n<li><a title=\"Web de Kimiko Ryokai en el MIT\" href=\"http:\/\/web.media.mit.edu\/~kimiko\" target=\"_blank\">Kimiko Ryokai<\/a> , <a title=\"Web de Stefan Marti en el MIT\" href=\"http:\/\/web.media.mit.edu\/~stefanm\" target=\"_blank\">Stefan Marti<\/a> , <a title=\"Web de Hiroshi Ishii en el MIT\" href=\"http:\/\/tangible.media.mit.edu\/people\/hiroshi.php\" target=\"_blank\">Hiroshi Ishii<\/a> \/ \u00a92003-2006 <a title=\"Web del MIT Media Lab\" href=\"http:\/\/www.media.mit.edu\/\" target=\"_blank\">MIT Media Lab<\/a><\/li>\n<li><a title=\"Projecto en la web de Ryokai\" href=\"http:\/\/web.media.mit.edu\/~kimiko\/iobrush\/\" target=\"_blank\">I\/O Brush [projecte]<\/a> [web \/ angl\u00e8s]<\/li>\n<li><a title=\"Video en la web de Ryokai\" href=\"http:\/\/web.media.mit.edu\/~kimiko\/iobrush\/iobrush_quicktime_medium.mov\" target=\"_blank\">I\/O Brush [Video]<\/a> [25MB \/ Quicktime]<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>T\u00e8cniques<\/h3>\n<ul>\n<li>HCI \u2192 H.5.1 [Interf\u00edcies d&#8217;informaci\u00f3 i presentaci\u00f3].<\/li>\n<li>Realitat artificial \/ augmentada \/ virtual.<\/li>\n<li>Enginyeria electr\u00f2nica.<\/li>\n<\/ul>\n<h3>An\u00e0lisis del disseny d&#8217;interacci\u00f3<\/h3>\n<h4>Descripci\u00f3<a href=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-734\" title=\"IO brush 1\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-1.jpg\" alt=\"\" width=\"275\" height=\"477\" \/><\/a><\/h4>\n<p><em>I\/O Brush<\/em>\u00a0\u00e9s una eina que permet l&#8217;usuari crear projectes art\u00edstics amb elements (color, textura i patrons en moviment) extrets directament del seu entorn inmediat. L&#8217;eina &#8220;I\/O Brush&#8221; te un aspecte semblant a un pinzell real per\u00f2 cont\u00e9 una c\u00e0mara de video, sensors t\u00e0ctils i fotosensors. Posant o arrossegant el pinzell a sobre d&#8217;objectes o superf\u00edcies es poden recollir colors, textures i moviments per tal de, a continuaci\u00f3, utilitzar aquesta &#8220;tinta&#8221; capturada i dibuixar sobre un llen\u00e7, que consisteix en un panell t\u00e0ctil a sobre d&#8217;una pantalla de projecci\u00f3 trasera. El panell tamb\u00e9 permet la interacci\u00f3 utilitzant els dits per a difuminar els tra\u00e7os realitzats.<\/p>\n<p>Durant el desenvolupament d&#8217;aquesta eina i despr\u00e8s de les proves amb usuaris es va coincidir en que seria molt \u00fatil poder veure quina mostra estava sent recollida amb el pinzell abans de pintar amb ella en el llen\u00e7. Una primera opci\u00f3 va ser mantenir una finestra en un rac\u00f3 de la pantalla que funcion\u00e9s com a vista preliminar, encara que feia nosa i obligava l&#8217;artista a fer cops d&#8217;ull a la pantalla cont\u00ednuament. La soluci\u00f3 va ser desenvolupar una paleta complement\u00e0ria que l&#8217;usuari podia tenir a prop, implementada en un tablet.<\/p>\n<blockquote><p><span style=\"color: #808080\">Un altre aspecte interessant del projecte \u00e9s que el sistema mant\u00e9 un historial de la proced\u00e8ncia de cada mostra o color utilitzat. La videoc\u00e0mara del pinzell envia constantment video en &#8220;streaming&#8221; a l&#8217;ordinador i emmagatzema els darrers cinc segons abans de que el pinzell faci un tra\u00e7 a la pantalla. Aquest historial es mapea juntament amb el tra\u00e7 realitzat talment que, quan es tocat, la pel\u00b7l\u00edcula amb la gravaci\u00f3 es reprodueix en el mateix llen\u00e7 i permet visualitzar l&#8217;origen de la mostra utilitzada.<\/span><\/p><\/blockquote>\n<h3>Diagrama de fluxe<\/h3>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-736 alignnone\" title=\"IO brush 3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-3.jpg\" alt=\"\" width=\"721\" height=\"409\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-3.jpg 721w, http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-3-300x170.jpg 300w, http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-3-624x353.jpg 624w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/a><\/p>\n<h3>Usabilitat<\/h3>\n<p>Utilitzar I\/O Brush \u00e9s molt semblant a utilitzar las eines cl\u00e0ssiques de pintura: <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-taula-cat.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-780\" title=\"IO brush taula cat\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-taula-cat.jpg\" alt=\"\" width=\"661\" height=\"202\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-taula-cat.jpg 661w, http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-taula-cat-300x91.jpg 300w, http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-taula-cat-624x190.jpg 624w\" sizes=\"auto, (max-width: 661px) 100vw, 661px\" \/><\/a> <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-737\" style=\"margin-right: 8px;border-width: 1px;border-color: black;border-style: solid\" title=\"IO brush 4\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-4.jpg\" alt=\"\" width=\"126\" height=\"136\" \/><\/a> La interacci\u00f3 amb el pinzell \u00e9s &#8220;natural&#8221;. Els sensors de pressi\u00f3 de l&#8217;I\/O Brush permeten variar el volum de tinta: quan major \u00e9s la pressi\u00f3 que es fa sobre la pantalla, m\u00e9s gross\u00e0ria\/densitat en t\u00e9 la tinta que flueix sobre el llen\u00e7, controlant-ne d&#8217;aquesta manera el tamany de la imatge sampleada. Per altre banda, el inclin\u00f2metre incl\u00f3s en el pinzell permet obtenir mostres que a m\u00e9s de la imatge capturen l&#8217;orientaci\u00f3. Aix\u00ed, l&#8217;expresivitat obtinguda amb el moviment del pinzell sumada a la pressi\u00f3 exercida al pinzell doten a l&#8217;I\/O Brush de capacitats expressives majors. \u00a0<a href=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-735\" style=\"border-width: 1px;border-color: black;border-style: solid;margin: 8px\" title=\"IO brush 2\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/files\/2012\/06\/IO-brush-2.jpg\" alt=\"\" width=\"150\" height=\"147\" \/><\/a><\/p>\n<p>Molt interessant \u00e9s, tamb\u00e9, la possibilitat d&#8217;interactuar amb l&#8217;historial de mostres. A mesura que s&#8217;utilitza l&#8217;I\/O Brush el sistema conserva un historial en video dels \u00faltims segons d&#8217;\u00fas fins que es pinta sobre el llen\u00e7. Aix\u00f2 possibilita que cada color del retrat tingui una pel\u00b7l\u00edcula documental associada referent a la proced\u00e8ncia de aquesta tinta. Quan es toca qualsevol zona del llen\u00e7, la pel\u00b7l\u00edcula amb aquest historial es reprodueix a sobre del mateix retrat durant uns instants.<\/p>\n<p>Un tercer element usable \u00e9s present en aquest projecte, i es tracta de la possibilitat d&#8217;actuar tamb\u00e9 sobre el llen\u00e7 (que es converteix en dispositiu d&#8217;entrada i sortida), mitjan\u00e7ant la t\u00e8cnica del difuminat.<\/p>\n<h3>Valoraci\u00f3 personal \/ Aportacions creatives<\/h3>\n<p>L&#8217;eina <em>tamp\u00f3 de clonar i motiu<\/em>\u00a0en Photoshop i d&#8217;altres editors d&#8217;imatge amb un &#8220;m\u00e0nec anal\u00f2gic&#8221;: aix\u00f2 sembla I\/O Brush. Aquest projecte afegeix un nou aspecte d&#8217;interactivitat a dues bandes -interactuar amb aquesta eina t&#8217;obliga a interactuar, a m\u00e9s, amb el teu entorn&#8230; i el resultat es converteix tamb\u00e9 en &#8220;entorn&#8221; (massa filos\u00f2fic?). Potser alguna millora a afegir a aquest interassant\u00edssim projecte seria augmentar les seves capacitats com per exemple:<\/p>\n<ul>\n<li>poder canviar la gross\u00e0ria del pinzell a voluntat<\/li>\n<li>tenir un major nombre de colors en la paleta (al m\u00e0xim \u00e9s de 5 a hores d&#8217;ara)<\/li>\n<li>poder actuar sobre aspectes del tra\u00e7 (m\u00e9s diluit, m\u00e9s pur&#8230;) i sobre tot<\/li>\n<li>fer-lo portable, inal\u00e0mbric. Poder utilitzar un color rosa a partir d&#8217;una rosa real, un lavanda, un violeta&#8230; i convertir-nos en els nous impressionistes.<\/li>\n<\/ul>\n<p style=\"text-align: center\">\u00a7<\/p>\n<h3>Bibliografia \/ Refer\u00e8ncies<\/h3>\n<ul>\n<li>RYOKAI, K., MARTI, S., ISHII, H. (2004), <em>I\/O Brush: Drawing with Everyday Objects as Ink<\/em>. In Proceedings of Conference on Human Factors in Computing Systems (CHI &#8217;04), (Vienna, Austria, April 24 &#8211; April 29, 2004)<\/li>\n<\/ul>\n<p><br \/>\n<\/p>","protected":false},"excerpt":{"rendered":"<p>I\/O Brush: The world as a palette Gold Award &#8211; Industrial Design Society of America 2005 &#8211; Industrial Design Excellence Award\u00a0 Kimiko Ryokai , Stefan Marti , Hiroshi Ishii \/ \u00a92003-2006 MIT Media Lab I\/O Brush [projecte] [web \/ angl\u00e8s] I\/O Brush [Video] [25MB \/ Quicktime] &nbsp; T\u00e8cniques HCI \u2192 H.5.1 [Interf\u00edcies d&#8217;informaci\u00f3 i presentaci\u00f3]. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/di\/2012\/06\/26\/cas-destudi-io-brush-the-world-as-a-palette-pinzell-es-el-mon-com-a-paleta\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abCAS D&#8217;ESTUDI :: I\/O BRUSH: The World As A Palette (Pinzell E\/S: el m\u00f3n com a paleta)\u00bb<\/span><\/a><\/p>\n","protected":false},"author":18,"featured_media":774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[30,31,32,39,42],"class_list":["post-723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles-2012","category-casosestudi-2012","tag-hiroshi-ishii","tag-io-brush","tag-kimiko-ryokai","tag-ruben-valero","tag-stefan-marti","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":0,"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/media\/774"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/di\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}