V tomto tutoriálu si celkem podrobně předvedeme jak vytvořit jednoduchou formu vizuálního glitche a to konkrétně ve formátu JPG. Článek je učen spíše pro začátečníky a má dvě části. V první se seznámíme obecněji s pojmem glitch a způsobem jak na něj. Druhá část už může být pro někoho trochu technicky náročnější a pro její čtení se vyplatí mít alespoň elementární znalost programování.
Co že je to ten glitch ?
Předpokládám, že většina z těch kteří sem zavítali, už jisté povědomí o tom co je to glitch mají a mohou tak s klidem následující odstavce přeskočit. Pro ostatní zkusím alespoň základně přiblížit oč se jedná.
Slovo glitch lze z angličtiny přeložit nejlépe asi jako chyba a je používáno především v kontextu výpočetní techniky a souvisejících oborů. Glitch se většinou vyskytne ve chvíli, kdy v přenosu či zpracování dat nastane nějaká neočekávaná situace a ty se pak interpretují jinak než bylo původně zamýšleno.
Glitch může mít mnoho podob. Může se projevit jako zamrznutí systému, podivné zvuky linoucí se z reproduktorů, zkreslení obrazu, a tak podobně. Pokud vezmeme význam glitche v tom nejobecnějším slova smyslu, jeho existence nebývá zpravidla příliš vítaná. Výjimky ovšem existují. Pokud se totiž zabýváme produkcí hudby nebo grafiky, může nám taková „nevinná“ chyba přinést obrovské množství inspirace.
Chyba v obrazových nebo zvukových datech totiž může vygenerovat zcela nové a nečekané výsledky. Někdy se tak stane zcela náhodně a je už jen na nás, abychom svižně reagovali a ten prchavý moment nějakým způsobem zaznamenali. Takto pasivně čekat až se v daném systému nebo technologii vyskytne chyba by ovšem bylo poněkud nudné a zdlouhavé, a proto je výhodnější všemožně experimentovat a výskytu chyby tak nějakým způsobem „pomoci“. Jeden ze základních způsobů jak toho dosáhnout je ostatně i předmětem tohoto tutoriálu.
Jak vypadá JPG zevnitř
Možná se ptáte proč jsme si vybrali zrovna formát JPG. V současné době je to sice jeden z nejrozšířenějších typů souborů k ukládání obrazových dat, to ovšem pro nás není ten hlavní důvod. Různé typy souborů totiž mají různou strukturu a zrovna ten způsob jakým pracuje se svými daty formát JPG, je pro vznik vizuálně zajímavých chyb optimální.
Rozebírat podrobně jak vypadá struktura JPG by bylo poněkud složitější a zdlouhavé, proto zájemce odkážu na příslušný článek na serveru Root.cz. Co my v tuto chvíli potřebujeme vědět je pouze to, že stejně jako všechny ostatní typy souborů, je i JPG v základů jen určitá posloupnost znaků.
Schválně si vyberte jakýkoliv obrázek ve vašem počítači a zkuste si ho otevřít v nějakém textovém editoru. Pokud se vám to povede, uvidíte zcela nečitelnou změť písmen, číslic, případně i jiných znaků. Přesně takto vidí každý program daný soubor a pomocí předem stanovených pravidel z nich dokáže sestavit pěkný (nebo i nepěkný) obrázek.
Pro nás je opět důležité vědět jen to, že první část té změti znaků je tzv. hlavička kam se ukládají různá důležitá data ohledně souboru samotného a zbylá část reprezentuje už konkrétní obrazová data. Nás bude zajímat pouze ta druhá část, kterou si zjednodušeně můžeme představit tak, že jsou zde zapsány informace o použitých barvách a jejich umístění. Další důležitý fakt je ten, že formát JPG pracuje v tzv. šestnáctkové soustavě, což v praxi znamená, že je složen pouze z číslic 0-9 a písmen a-f (nelekejte se ovšem pokud se vám nějakém textovém editoru ukáže něco jiného).
Chyba kterou uděláme záměrně a rádi 🙂
Způsob, jakým do obrázku zanést nějakou chybu teď již může být celkem intuitivní. Stačí si otevřít JPG v nějakém sofistikovanějším textovém editoru a zde změnit náhodně několik znaků. Ideální editor pro naše účely by měl umět otevřít soubor v šestnáctkové (neboli hexadecimální) podobě. To znamená, že potom uvidíme pouze číslice a písmena a-f, jak jsme si řekli před chvíli. Mě osobně se pro takové experimenty osvědčil PSPad editor.
Nainstalujte si tedy uvedený editor a poté v něm otevřete libovolný JPG soubor(mimochodem je vhodné udělat si předem kopii obrázku, neboť jinak je možné, že už ho nikdy neuvidíte ve stejně podobě). Poté by jste před sebou měli vidět osm sloupců každý se čtyřmi znaky a dále napravo ještě jeden širší sloupec plný teček a občas nějakými čitelnými daty. Nás ovšem bude zajímat primárně těch osm sloupců nalevo.
Jak již bylo naznačeno výše, zkusíme v nich některé hodnoty přepsat. Je v zásadě jedno čím přesně a v jakém rozsahu původní obsah změníme, nicméně čím více nových dat zaneseme, tím více se nám snižuje pravděpodobnost, že poté obrázek půjde zobrazit. Přece jen bychom ale měli dodržet dvě důležitá „pravidla“. První je použití pouze znaků šestnáctkové soustavy (znovu připomenu, že se jedná o znaky v rozsahu 0-9 a a-f), druhé je pak zapisování mimo hlavičku souboru.
Pro začátečníka je trochu složitější určit kde v tom chaosu končí hlavičková část a kde začíná ta obrazová. Přibližně se to však dá poznat podle obsahu pravého sloupce. Dokud se tam vyskytuje větší množství teček a občas i nějaké to slovo, jsme zcela jistě ještě v hlavičce. Jakmile už vidíme pouze dlouhé řady zmatených symbolů, jsme pravděpodobně již v obrazové části, kde je naše pravé teritorium. Pro jednoduchost se tedy v souboru přesuňme nějak dostatečně dolů a přepíšeme pár znaků, a soubor uložíme, čímž je zanesení chyby dokonáno. Dále zbývá už jen doufat, že naše modifikace nebyla příliš destrukční a obrázek ještě půjde zobrazit.
Interpretace chyby
Poté co jsme data uložili, je třeba si obrázek zkusit zobrazit v nějakém vhodném grafickém programu. Může to být jak nějaký základní, tak i jakýkoliv složitější. Obecně řečeno, cokoli co máte po ruce. Každý takový program totiž čte data trošku odlišným způsobem, a tak je vhodné mít jich při ruce hned několik. Do souboru jsme totiž zanesli nějakou nečekanou část a každý z nich si s tímto faktem dokáže poradit jinak. Pokud se nám tedy obrázek nepodaří zobrazit v jednom, můžeme zkusit jiný a je zde šance, že to vyjde.
V zásadě mohou nastat tři situace:
- program suše oznámí, že soubor je poškozen a zobrazení není možné
- program nám neoznámí nic, zasekne se a zcela selže
- uvidíme nějaká obrazová data
Není třeba vysvětlovat, že bychom rádi dospěli k bodu 3, ovšem uvádím i ostatní případy, protože bod 3 není zas až tak samozřejmý. Proto by nás nemělo odradit ani několik po sobě jdoucích nepodařených pokusů. Přeci jenom saháme do něčeho, čemu tak úplně nerozumíme a namísto očekávání jistého podařeného výsledku bychom měli pouze doufat, že z toho alespoň něco kloudného vyleze. V tom je ostatně i celá ta krása vytváření glitchů – že nemůžeme víceméně vůbec předvídat jak to dopadne. Pak se můžeme z nějakého pěkného výsledku náležitě těšit a brát ho třeba i s určitou úctou 🙂
Uspokojivý výsledek tedy není nikdy zaručen, z čehož vyplývá potřeba náležitě experimentovat. Nelze tedy ani očekávat, že někde najdeme přesný popis toho co a jak dělat „správně“. Po určitém čase lze nalézt nějaké přibližné spojitosti a zanášet chyby s konkrétnějším záměrem. Jak již ale bylo řečeno, struktura JPG je dost složitá na pochopení a osobně si ani nejsem jist, zda je lidskému jedinci umožněno číst přímo v kódu a dokázat si spočítat jaký přesný důsledek bude mít určitá změna znaku. Na jednu stranu je to ale celkem dobře, protože pak by se tím odstranil ten prvek překvapení a tím i jistá zábavnost celého procesu.
Poslední důležitá věc, než přejdeme do druhé části článku je ta, že pokud už se nám podaří chybný obrázek v nějakém programu otevřít, je nanejvýš vhodné jej tzv. přeuložit, neboli jednoduše znovu uložit v grafickém editoru. Mohlo se to zdát jako zcela zbytečná činnost, ovšem není tomu tak. Pokud obrázek uložíme, bude poté strukturován zcela korektně a nebudeme si musel lámat hlavu s tím, zda nám ho nějaký jiný prohlížeč přečte a případně jak. Zkrátka přeuložení je nutná část takovéto tvorby glitchů. To je samozřejmě možné pouze tehdy, když obrázek otevřeme přímo v nějakém grafickém editoru. Pokud nám lze otevřít pouze v obrázkovém prohlížeči, nabízí se tu funkce Screenshotu.
Pojďme to trochu zautomatizovat
Postup, který jsme si vysvětlovali až doposud bývá sice často funkční, ale je poměrně časově náročný. Přeci jenom stále znovu a znovu ručně vepisovat náhodné znaky na náhodná místa v kódu a následně zkoušet zda soubor půjde otevřít se brzy stává dosti únavným. Navíc i když se chyba interpretuje do nějakého zobrazitelného výsledku, ne vždy má nějaké estetické kvality. Řešením jak si ušetřit mnoho práce je tuto činnost trochu zautomatizovat.
Přeci jenom se pohybujeme ve světě výpočetní! techniky, a tak není důvod proč dělat nějakou práci ručně, může-li ji za nás udělat počítač. V našem případě je například vhodné vytvořit si nějaký jednoduchý spustitelný program, který bude generovat automaticky náhodná čísla i znaky a umisťovat je na náhodná místa v kódu. Tím nám může vygenerovat celou dlouho řadu souborů a my už si z nich pak můžeme vybírat jen ty funkční a pro nás něčím zajímavé.
Napsat si nějaký program sice může pro někoho znít podobně složitě jako ulovit tygra, ale zase tolik složité to není a také je to o dost bezpečnější. Krom toho pokud se chceme glitchem zabývat více do hloubky, je třeba alespoň trochu vždy porozumět principům dané technologie, do které pak chceme nějakým způsobem zanést chybu. Níže si tedy uvedeme jednoduchý kus kódu, který nám může v našich snahách výrazně pomoci.
Programujeme
Jak již bylo uvedeno v úvodu, bude se hodit znát trochu programování, konkrétně základy jazyka PHP, a také vědět jak ho spustit. Celý princip je dost jednoduchý, takže pokud ovládáme nějaký jiný programovací jazyk, snadno si můžeme napsat něco podobného v něm.
Mimochodem uvedený kód (resp. jeho modifikaci) jsem před mnoha lety našel na serveru vj.cz, který už delší dobu nejeví známky života. Tenkrát to pro mě byla vstupní brána do světa glitchů, což se nyní snažím vrátit dalším generacím tímto článkem.
- <?php
- for ($x = 1; $x <= 30; $x++) {
- copy („image.jpg“, „image.jpg.tmp“);
- $fp = fopen („image.jpg“, „r+“);
- for ($i = 450; $i <= filesize („image.jpg“); $i = $i + rand (5000, 20000)) {
- fseek ($fp, $i);
- fwrite ($fp, dechex ($x));
- }
- fclose ($fp);
- if (file_exists („glitch_“.$x.“.jpg“)) unlink („glitch_“.$x.“.jpg“);
- rename („image.jpg“, „glitch_“.$x.“.jpg“);
- rename („image.jpg.tmp“, „image.jpg“);
- }
- ?>
Princip kódu byl již naznačen výše, nyní si ho však probereme řádek po řádku.
- Začátek PHP kódu.
- Celý zbylý kus kódu (uzavřený ve složených závorkách) se provede právě 30x přičemž v každém běhu bude za $x dosazeno číslo o jedna vyšší.
- Zkopírujeme náš soubor (jmenuje se image.jpg) do nějakého nového dočasného souboru.
- Soubor otevřeme, abychom z něj mohli číst a zapisovat do něj.
- Uvedený cyklus začíná s proměnnou $i nastavenou na 450, čímž zajistíme přeskočení hlavičky souboru. V každém běhu se k této proměnné připočte náhodné číslo v rozmezí 5000-20000 a to vše se bude dít stále dokola až do té doby, než $i dosáhne velikost souboru.
- Příkaz fseek() nás přesune ve zdrojovém kódu obrázku na pozici určenou $i.
- fwrite() zapíše na tuto pozici nějaký znak. V našem případě tam napíše proměnnou $x, kterou ještě předtím převedeme do šestnáctkové soustavy (k tomu příkaz dechex()).
- Konec vnitřního cyklu.
- Ukončíme práci s kódem obrázku.
- Tento řádek se může zdát trochu zbytečný. Zeptá se zda existuje daný soubor a pokud ano, tak ho smaže. Celé je to tam jen pro ten případ, že program pouštíme již po několikáté a z minulých pokusů nám tam zůstaly staré výsledky, které nyní chceme smazat.
- Obsah původního obrázku (v kterém jsou nyní zaneseny chyby) překopírujeme do nového souboru.
- Obsah dočasného souboru překopírujeme do image.jpg, což nám zajistí, že pro další běh cyklu máme k dispozici nezměněná data původního obrázku.
- Konec vnějšího cyklu.
- Konec PHP kódu.
Nakonec si to ještě vysvětlíme pěkně dohromady. Vnější cyklus se vykoná 30x za sebou, přičemž pokaždé vezme původní obrázek image.jpg a prochází jeho kód odshora dolů, řádek po řádku. Tam postupuje náhodně dlouhými kroky v rozmezí 5000-20000 znaků a na takto určená místa zapisuje hexadecimální hodnotu proměnné $x. Při každém běhu vnějšího cyklu se pak vytvoří nový soubor s daným pořadovým číslem, což znamená, že nakonec budeme mít 30 nových souborů pokaždé s trochu jinými chybami.
Spouštíme program
Další řádky jsou určeny pro ty, kteří nemají zkušenost s pouštěním PHP skriptů. Pokud mezi ně nepatříte, s klidem přeskočte celou podkapitolu.
Pro spuštění skriptu je třeba nějaký webový prostor a na něm nainstalovaný PHP server. Máme tedy dvě možnosti:
- Nainstalujeme si server na vlastní počítač. Doporučit můžu WampServer
- Využijeme nějakého hostingu a skript spustíme na jejich serveru.
Obecně mi přijde lepší varianta 1, nicméně nepopírám, že to pro začátečníka může být příliš mnoho nových informací najednou. Nicméně instalace je hezky klikací, vše se nastaví prakticky samo. Co je tam pro nás důležité je nastavit adresář na disku, kde bude poté tento virtuální server program spouštět. Vytvořme si tedy např. adresář C:/www a až se nás instalace bude ptát, kde že chceme mít hlavní adresář, vybereme tento.
Pokud zvolíme variantu 2, je třeba mít způsob jak nahrát data na jejich server. Některé hostingy na to mají přímo své webové rozhraní, pro jiné je třeba nějaký program schopný přenášet data přes protokol FTP. Nicméně prakticky každý hosting mívá podrobný návod jak tam vaše soubory nahrát.
Tak jako tak, potřebujeme dva soubory. Jeden bude váš zvolený JPG obrázek s názvem image.jpg a druhý soubor bude náš skript. Otevřeme si opět PSPad, založíme nový soubor typu PHP a vložíme do něj náš uvedený kód (včetně značek s otazníky). Soubor poté uložíme jako index.php.
Soubory nahrajeme na domácí virtuální server nebo na hosting (dle toho jakou variantu jsme si vybrali) a v internetovém prohlížeči zadáme danou adresu. V případě 2 to budě něco jako http://www.domena.cz/index.php, v případě 1 to bude něco jako http://localhost/index.php (příkaz localhost zacílí na adresář uvedený v instalaci). Adresy se samozřejmě můžou nějak lišit, záleží kam přesně jste ty dva soubory nahráli.
Na stránce nic neuvidíme (bude čistě bílá), ovšem v pozadí se bude dít spoustu výpočtů. Stránka se bude nějakou dobu jakoby načítat a až se načte, výpočet je hotov.
Vidíme výsledky
Pokud se nám podařilo skript úspěšně spustit, mělo by se nám vytvořit nových 30 souborů. Pokud máme data na hostingu, je vhodné si je přehrát k sobě do počítače, ovšem nutné to není. Každopádně poté tyto soubory zkoušíme otevírat podobně jako jsme to dělali při „ručním zpracování“ a pokud se nám líbí, nezapomínáme přeuložit! Nepočítejte ale s tím, že vám automatizace zajistí zobrazitelný výsledek. Někdy je chyba na tolik velká, že žádný z těch 30 obrázků není možné zobrazit.
Výhody skriptu jsou nyní zcela jasné. Po možném prokousávání toho jak funguje PHP server už máme vytvořen nástroj, který nám chrlí desítky pokažených obrázků a my si jen jednoduše vybíráme.
Experimentujeme
Nyní je čas vzít kód doslova do svých rukou a začít trochu experimentovat. Pokud jsme PHP viděli poprvé, řeknu na rovinu, že stačí měnit parametry funkce rand(), což znamená, že se znaky se budou přepisovat na jiných místech. Zde je ale důležité zvolit si čísla v závislosti na velikosti souboru. Pokud je soubor datově větší, je lepší i čísla volit vyšší, což způsobí nižší četnost přepisování dat. Pokud se totiž chyb do souboru vloží příliš mnoho, šance na jeho otevření se výrazně snižuje.
Možné je experimentovat například i s hodnotou ve funkci dechex() a zkoušet do ní vkládat jiné hodnoty.
Tímto samozřejmě potenciál možných experimentů nebyl vyčerpán. Je už jen na vás, jak se k tomu postavíte. Pokud ovládáte PHP nějak více, můžete si se skriptem libovolně vyhrát.
Shrnutí. A taky kam dál….
V článku jsem ukázal jednu ze základních možností jak vytvořit vizuální glitch. Je to ovšem jen kapka v moři možností. Jak už bylo řečeno, experimentování je pro tvůrce glitchů naprostou nutností. A nemusí se to omezovat na měnění dat v souborech, či na psaní skriptů. Glitche můžou vznikat i za naprosto jiných podmínek.
Jednou z možností může být například i přetížení systému (např. přehřátí počítače), další škála možností se nabízí při modifikaci různých optických zařízení (dokážu si představit např. nějaké působení magnetu na kameru, fotoaparát, atp.). Není také třeba zůstávat jen u obrázků. Experimentovat můžeme třeba i s videem, se zvukem, 3D grafikou, a tak dále. Zkrátka možnostem se meze nekladou a není třeba se omezovat ani na prostředí počítačů.
Základní cíl však zůstává – hledat nečekané (vizuální) reprezentace v digitálním prostředí, které nás obklopuje. Zachycovat tu krásnou nahodilost, která se schovává kdesi v průrvě mezi fungujícím a nefungujícím světem. Překračovat domnělé hranice možností a nacházet ve stroji skrývanou nedokonalost jeho stvořitele.
No a pokud náhodou vše funguje jak má, je potřeba tomu podat berličku…….
……a případně ji pak i podkopnout…..