{"id":237,"date":"2018-01-19T11:55:50","date_gmt":"2018-01-19T11:55:50","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/?page_id=237"},"modified":"2018-01-30T13:51:46","modified_gmt":"2018-01-30T13:51:46","slug":"4-4-2-glitch","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/4-4-2-glitch\/","title":{"rendered":"4.4.2. Glitch<\/em>"},"content":{"rendered":"

Origin\u00e0riament, glitch<\/em> \u00e9s un terme t\u00e8cnic d\u2019enginyeria per a referir-se a una malfunci\u00f3 en un microprocessador. Quan, per un error inform\u00e0tic, una imatge no apareix de manera correcta es diu que t\u00e9 un glitch<\/em>.<\/p>\n

No obstant aix\u00f2, el terme glitch<\/em> ha anat evolucionant i ara es refereix tamb\u00e9 a una pr\u00e0ctica art\u00edstica low-tech<\/em> peculiar i original que consisteix a modificar i distorsionar una imatge de manera inesperada editant-la amb un processador de textos.<\/p>\n<\/div>\n

Ja hem esmentat la possibilitat d\u2019editar un SVG amb un editor de textos, ja que finalment aquestes imatges s\u00f3n XML: una descripci\u00f3 de formes geom\u00e8triques i corbes que pugui entendre el processador, i qualsevol fotografia de mapa de bits, un GIF, un JPEG, un PNG, \u00e9s finalment zeros i uns, i s\u00f3n accessibles des d\u2019un editor de textos com una col\u00b7lecci\u00f3 incomprensible d\u2019ASCII, o un editor una mica m\u00e9s elaborat, pensat per a desenvolupar programari, en codi hexadecimal.<\/span><\/p>\n

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

\n<\/div>\n

Considerem la figura 22, la primera foto d\u2019un grup musical (Les Horribles Cernettes) que es va pujar a la web.<\/p>\n

Si l\u2019obrim amb un editor de text pensat per a editar programari, t\u00e9 aquesta aparen\u00e7a:<\/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
(I el document segueix aix\u00ed una bona estona.)<\/p>\n
Es tracta d’una s\u00e8rie de nombres en format hexadecimal que l’ordinador interpreta com una graella de p\u00edxels i de la qual mostra la foto quan la llegim amb el nostre navegador o amb un programa d’edici\u00f3 d’imatges com Photoshop o Gimp.<\/p>\n
El m\u00e9s fascinant \u00e9s que si ara modifiquem a l\u2019atzar alguns d\u2019aquests nombres que apareixen, la imatge canviar\u00e0 dr\u00e0sticament. Segons on toquem, el dany a les dades ser\u00e0 massa greu i el nostre programa d\u2019edici\u00f3 es negar\u00e0 a obrir-lo, per\u00f2 si no som massa destructius podrem aconseguir efectes curiosos, com aquests:<\/p>\n
\"Fotos
Figura 23.<\/strong> Fotos distorsionades de Les Horribles Cernettes
Font: David Casacuberta a partir de la imatge de Wikimedia Commons<\/figcaption><\/figure>\n
Podem canviar nombres, esborrar-los, eliminar l\u00ednies senceres, afegir\u2026<\/p>\n
El codi hexadecimal \u00e9s simplement una altra manera d\u2019explicar: en lloc de tenir nombres del 0 al 9, i despr\u00e9s el 10 en el sistema hexadecimal, tenim 0, 1, 2\u2026 9, a, b, c, d, i, f, i despr\u00e9s 10, 11, 12\u2026 Aix\u00ed, doncs, quan modifiqueu una imatge per aconseguir un glitch<\/em> podeu introduir d\u00edgits del 0 al 9 sense problemes, per\u00f2 no inclogueu lletres m\u00e9s enll\u00e0 que la f de l\u2019abecedari, o tindreu un error autom\u00e0ticament. Respecteu tamb\u00e9 la divisi\u00f3 del text en blocs de quatre d\u00edgits.<\/p>\n
Per a fer aquests canvis, hem utilitzat el programa d\u2019edici\u00f3 del programari Sublim Text, disponible per a Linux, Windows i OS X, per\u00f2 podem aconseguir els mateixos resultats utilitzant el Notepad++ de Windows, el TexWrangler per a OS X, o Atom<\/a>, que \u00e9s gratu\u00eft i multiplataforma.<\/p>\n
Si us fa mandra o no veieu clar generar el glitch<\/em> amb un processador de textos, podeu utilitzar diversos recursos en l\u00ednia que us permeten glitchar la fotografia que vulgueu pujant-la al seu servidor. Aqu\u00ed en teniu un exemple: Image Glitch Tool<\/a>.<\/p>\n
Mosh<\/a> \u00e9s un programa similar, que a m\u00e9s de glitches<\/em> fa tot tipus d\u2019efectes en les fotos. Tamb\u00e9 permet treballar amb la c\u00e0mera web.<\/p>\n","protected":false},"excerpt":{"rendered":"
Origin\u00e0riament, glitch \u00e9s un terme t\u00e8cnic d\u2019enginyeria per a referir-se a una malfunci\u00f3 en un microprocessador. Quan, per un error inform\u00e0tic, una imatge no apareix de manera correcta es diu que t\u00e9 un glitch. Ja hem esmentat la possibilitat d\u2019editar un SVG amb un editor de textos, ja que finalment aquestes imatges s\u00f3n XML: una […]<\/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\/wp-json\/wp\/v2\/pages\/237"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":6,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/237\/revisions"}],"predecessor-version":[{"id":904,"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/pages\/237\/revisions\/904"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/prod-digital\/wp-json\/wp\/v2\/media?parent=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}