{"id":713,"date":"2018-01-30T10:32:44","date_gmt":"2018-01-30T10:32:44","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=713"},"modified":"2018-01-30T18:10:30","modified_gmt":"2018-01-30T18:10:30","slug":"4-4-2-glitch","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/4-4-2-glitch\/","title":{"rendered":"4.4.2. Glitch<\/em>"},"content":{"rendered":"

Originariamente, glitch<\/em> es un t\u00e9rmino t\u00e9cnico de ingenier\u00eda para referirse a una funci\u00f3n incorrecta en un microprocesador. Cuando, por un error inform\u00e1tico, una imagen no aparece de manera correcta se dice que tiene un glitch<\/em>.<\/p>\n

Sin embargo, el t\u00e9rmino glitch<\/em> ha ido evolucionando y ahora se refiere tambi\u00e9n a una pr\u00e1ctica art\u00edstica low-tech<\/em> peculiar y original que consiste en modificar y distorsionar una imagen de manera inesperada, edit\u00e1ndola con un procesador de textos.<\/p>\n<\/div>\n

Ya hemos mencionado la posibilidad de editar un SVG con un editor de textos, puesto que finalmente estas im\u00e1genes son XML: una descripci\u00f3n de formas geom\u00e9tricas y curvas que pueda entender el procesador, y cualquier fotograf\u00eda de mapa de bits, un GIF, un JPEG, un PNG, es finalmente ceros y unos, y son accesibles desde un editor de textos como una colecci\u00f3n incomprensible de ASCII, o un editor algo m\u00e1s elaborado, pensado para desarrollar software, en c\u00f3digo hexadecimal.<\/p>\n

<\/p>\n
\"Les
Figura 22.<\/strong> Les Horribles Cernettes
Fuente: Wikimedia Commons<\/figcaption><\/figure>\n

\n<\/div>\n

Consideremos la figura 22, la primera foto de un grupo musical (Les Horribles Cernettes) que se subi\u00f3 a la web.<\/p>\n

Si la abrimos con un editor de texto pensado para editar software, tiene esta apariencia:<\/p>\n

ffd8 ffe0 0010 4a46 4946 0001 0101 0096\r\n\r\n0096 0000 ffe1 0040 4578 6966 0000 4949\r\n\r\n2a00 0800 0000 0100 6987 0400 0100 0000\r\n\r\n1a00 0000 0000 0000 0200 02a0 0400 0100\r\n\r\n0000 6201 0000 03a0 0400 0100 0000 1901\r\n\r\n0000 0000 0000 ffdb 0043 0008 0606 0706\r\n\r\n0508 0707 0709 0908 0a0c 140d 0c0b 0b0c\r\n\r\n1912 130f 141d 1a1f 1i1d 1a1c 1c20 242i\r\n\r\n2720 222c 231c 1c28 3729 2c30 3134 3434\r\n\r\n1f27 393d 3832 3c2i 3334 32ff db00 4301\r\n\r\n0909 090c 0b0c 180d 0d18 3221 1c21 3232\r\n\r\n3232 3232 3232 3232 3232 3232 3232 3232\r\n\r\n3232 3232 3232 3232 3232 3232 3232 3232<\/pre>\n
(Y el documento sigue as\u00ed un buen rato.)<\/p>\n
Se trata de una serie de n\u00fameros en formato hexadecimal que el ordenador interpreta como una parrilla de p\u00edxeles, y cuya foto muestra cuando la leemos con nuestro navegador o con un programa de edici\u00f3n de im\u00e1genes como Photoshop o Gimp.<\/p>\n
Lo m\u00e1s fascinante es que, si ahora modificamos al azar algunos de estos n\u00fameros que aparecen, la imagen cambiar\u00e1 dr\u00e1sticamente. Seg\u00fan d\u00f3nde toquemos, el da\u00f1o a los datos ser\u00e1 demasiado grave y nuestro programa de edici\u00f3n se negar\u00e1 a abrirlo, pero si no somos demasiado destructivos, podremos conseguir efectos curiosos, como estos:<\/p>\n
\"Fotos
Figura 23.<\/strong> Fotos distorsionadas de Les Horribles Cernettes
Font: David Casacuberta a partir de la imagen de Wikimedia Commons.<\/figcaption><\/figure>\n
Podemos cambiar n\u00fameros, borrarlos, eliminar l\u00edneas enteras, a\u00f1adir, etc.<\/p>\n
El c\u00f3digo hexadecimal es simplemente otra manera de contar: en lugar de tener n\u00fameros del 0 al 9, y despu\u00e9s el 10 en el sistema hexadecimal, tenemos 0, 1, 2\u2026 9, a, b, c, d, y, f, y despu\u00e9s 10, 11, 12\u2026 As\u00ed pues, cuando modifiqu\u00e9is una imagen para conseguir un glitch<\/em> pod\u00e9is introducir d\u00edgitos del 0 al 9 sin problemas, pero no incluy\u00e1is letras m\u00e1s all\u00e1 que la f del abecedario, o tendr\u00e9is un error autom\u00e1ticamente. Respetad tambi\u00e9n la divisi\u00f3n del texto en bloques de cuatro d\u00edgitos.<\/p>\n
Para hacer estos cambios, hemos utilizado el programa de edici\u00f3n del software Sublim Text, disponible para a Linux, Windows y OS X, pero podemos conseguir los mismos resultados utilizando Notepad++ de Windows, TexWrangler para OS X, o Atom<\/a>, que es gratuito y multiplataforma.<\/p>\n
Si os da pereza o no veis claro generar el glitch<\/em> con un procesador de textos, pod\u00e9is utilizar varios recursos en l\u00ednea que os permiten \u00abglitchar\u00bb la fotograf\u00eda que quer\u00e1is, subi\u00e9ndola a su servidor. Aqu\u00ed ten\u00e9is un ejemplo de esto: Image Glitch Tool<\/a>.<\/p>\n
Mosh<\/a> es un programa similar que, adem\u00e1s de glitches<\/em>, hace todo tipo de efectos en las fotos. Tambi\u00e9n permite trabajar con la c\u00e1mara web.<\/p>\n","protected":false},"excerpt":{"rendered":"
Originariamente, glitch es un t\u00e9rmino t\u00e9cnico de ingenier\u00eda para referirse a una funci\u00f3n incorrecta en un microprocesador. Cuando, por un error inform\u00e1tico, una imagen no aparece de manera correcta se dice que tiene un glitch. Ya hemos mencionado la posibilidad de editar un SVG con un editor de textos, puesto que finalmente estas im\u00e1genes son […]<\/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\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/713"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/comments?post=713"}],"version-history":[{"count":2,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/713\/revisions"}],"predecessor-version":[{"id":1104,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/pages\/713\/revisions\/1104"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/es\/wp-json\/wp\/v2\/media?parent=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}