Jeffrey Cross
Jeffrey Cross

Kódové pole: Vytvořte film ve formátu Ken Burns ve stylu Flickr a Processing

Tento Codebox ukazuje, jak používat rozhraní Flickr API k vytvoření filmu ve stylu Ken Burns z vašich fotografií, jako je tento pro Maker Faire:

Budete muset dodat svou vlastní melancholickou dobovou hudbu.

Nastavte náčrt

První věc, kterou musíte udělat, je vytvořit účet (pokud ho ještě nemáte) a přihlásit se do služby Flickr. Po přihlášení se dalším krokem je získání klíče API, pomocí něhož můžete aplikaci jednoznačně identifikovat. (No, klíč tak moc neidentifikuje aplikaci, jak to identifikuje vy budete vyzváni, abyste aplikaci pojmenovali (nazval jsem ji „Ken Burns App“) a popisem.

Jakmile vytvoříte záznam aplikace, dostanete zpět dvě informace: „klíč aplikace“, který jednoznačně identifikuje aplikaci, a „tajemství“, které adresu URL používá k šifrování. (V tomto příkladu nebudeme používat podepsané adresy URL, ale pokud máte zájem, můžete tento kód zaúčtovat. Pokud chcete, můžete jej napsat.)

Jakmile máte klíč, zapálte Zpracování a vložte ken_burns_flickr_final.pde do okna náčrtu. Zde je kódová schránka:

Proměnnou budete muset nahradit apiKey a sharedSecret s hodnotami, které jste dostali od Flickr. Zatímco se nacházíte, můžete se také zabývat některými dalšími proměnnými. Pokud chcete například vyhledat jiný termín než „faire“, můžete změnit proměnnou „tags“. (Nezapomeňte, že je třeba kódovat všechny hodnoty, které hledáte, což většinou znamená, že je třeba nahradit mezery znaménkem „+“.) Pokud chcete ve filmu zobrazit více (nebo méně) obrázků, můžete aktualizovat numPhotos proměnná.

Diskuse

Jedná se o jeden z komplexnějších projektů v této sérii, takže jsem rozdělil diskusi do následujících oblastí:

  • Vytáhnutí dat z Flickr
  • Posouvání a přibližování obrázků
  • Vytvoření filmu

Budeme používat třídy XMLElement a ArrayList a dobrý kousek. Pokud potřebujete rychlou aktualizaci, podívejte se na Amuse s Google Autocomplete a Swat An (Arraylist) cílů. Pokud se cítíte ztraceni, měli byste vám poskytnout pozadí, které budete muset následovat.

Vytáhnutí dat z Flickr

Aplikaci flickr api umožňuje číst (a psát, ale nebudeme to dělat zde) data o obrázcích, skupinách, sbírkách a fotografiích na webu. Data jsou vrácena v XML, i když jsou k dispozici jiné formáty.

Pojďme se ponořit přímo dovnitř a podívat se na flickr.groups.pools.getPhotos. Toto volání vrací seznam fotografií fondu pro danou skupinu. Může akceptovat různé parametry, jako je např api_key (toto je vyžadováno pro téměř všechny hovory), group_id (ID skupiny MAKE je [chráněno e-mailem]) tagy chcete, aby se obrázek shodoval, a počet výsledků, které chcete na každé stránce (voláno) na stránku).

Pokud přejdete do dolní části stránky s dokumentací o volání, naleznete praktický odkaz nazvaný API Explorer: flickr.groups.pools.getPhotos. Tento odkaz odkazuje na interaktivní formulář, kde si můžete vyzkoušet různé parametry a získat výsledky hovoru; každý hovor v API má podobnou funkčnost. (Také jsem zjistil, že musím použít Firefox, abych viděl výstup XML. YMMV.) V přepínači vyberte možnost „Nepodpisovat volání“, protože (jak bylo uvedeno výše) nebudeme používat ověřená volání API.

Zde je obrázek, který by měl pomoci vysvětlit, co se děje:

Průzkumník je nejlepší způsob, jak rychle zobrazit data XML vrácená voláním. V tomto případě vypadá XML takto:

... ...

Data fotografií, která následují, jsou umístěna v prvním podřízeném prvku mimo kořenový uzel. Náš kód bude muset projít všemi těmito podřízenými uzly, vytáhnout atributy, které nás zajímají, a uložit je do seznamu ArrayList pro pozdější použití.

Nakonec najdete adresu URL potřebnou k vygenerování těchto dat přímo pod rámečkem XML. Tady to je:

http://api.flickr.com/services/rest/?method=flickr.groups.pools.getPhotos & api_key = 4bdfeb8048562c5d12d0c7cda3ae341e & group_id = 69453349% 40N00 & tags = faire & per_page = 5

Takže teď, když známe URL, které potřebujeme, a XML, který dostaneme, můžeme napsat nějaký kód pro analýzu dat. Tady to je:

// Vytáhne prvních 100 photů do makezin flickr pool void getPhotosByGroup (String _groupId, String _tags) {// Nastaví výzvu k získání Tokenu, jak je popsáno zde: // http://www.flickr.com/ services / api / auth.howto.desktop.html String url = "http://api.flickr.com/services/rest/?api_key="+apiKey+"&group_id="+_groupId+"&tags="+_tags+"&method=> flickr.groups.pools.getPhotos & per_page = "+ numPhotos; String [] results = loadStrings (url); // Načíst URL XMLElement xml = new XMLElement (spojení (výsledky, "n")); // Sbalit prvky pole do řetězce String [] errCodes = getStatus (xml); // Vytáhněte chybové kódy (pokud existují) z XML if (errCodes [0] .equals ("ok")) {XMLElement root = xml.getChild (0); for (int i = 0; i <root.getChildCount (); i ++) {String id = root.getChild (i) .getStringAttribute ("id"); String Vlastník = root.getChild (i) .getStringAttribute ("vlastník"); String title = root.getChild (i) .getStringAttribute ("title"); photos.add (nová fotka (id, titul, vlastník)); }} else {println ("Chyba! Zde jsou některé kódy: n" + errCodes); }}

Pokud jste sledovali ostatní sloupce v této sérii, nic by nemělo vypadat tak neznámě. Vše, co děláme, je vytvoření řetězce, který je šablonou pro adresu URL, kterou potřebujeme loadString ()a poté zpracování pomocí XMLElement.

Snad jen vráska spočívá v tom, že provádíme trochu chybovou kontrolu pomocí procedury nazvané getStatus () zjistit, zda se něco nepovedlo. Pokud jsme například v adrese URL zadali neplatný klíč API, namísto užitečných informací bychom do kódu XML dostali kód chyby:

Po přečtení metaúdajů o obrázcích musíme použít flickr.photos.getSizes k nalezení adres URL pro různé obrázky spojené s konkrétním ID fotografie. Hovor vrací strukturu s informacemi o různých velikostech obrázku (miniatury, čtverce, malé, velké atd.) Pro každou fotografii. Zde je příklad:

Tento kód je zpracován v getPhotoURL () metoda, která je téměř totožná se strukturou getPhotosByGroup (). Jakmile máme adresu URL, můžeme obrázek načíst loadImage ().

Posouvání a přibližování

Po stažení obrázku jsme připraveni začít posouvat a zvětšovat styl Ken Burns. Jak ukazuje tento příklad Pan velký obraz z komunity zpracování, můžeme použít vyrovnávací paměť k vytvoření efektu posouvání. Na každé iteraci kreslit(), aktualizujeme souřadnice (x, y) vyrovnávací paměti tak, aby se plynule pohybovaly podél předem určeného vektoru. Tento obrázek ilustruje klíčové proměnné:

Zvětšení je ještě jednodušší - zvětšíme proměnnou nazvanou zoom malým procentem zoomFaktora potom použijte Zpracování stupnice() provést příslušnou transformaci.

Všechny aktualizace různých proměnných jsou prováděny v kreslit() metoda.

Vytvoření filmu

Vytvoření filmu je o něco složitější. No, vezmu si to zpět - vytvoření filmového souboru a přidání rámečků k němu je jednoduché, díky skvělé MovieMaker přispěla knihovna. Knihovna dělá všechny ty špinavé, tvrdé práce. Abychom ho mohli použít, zrealizujeme nový MovieMaker objekt založit(), přidejte do něj rámce kreslit()a potom zavolejte Dokončit() kdy jsme hotovi. Nejtěžší je ovládání toho, co tyto rámce obsahují a jak dlouho jsou zobrazeny.

Obsah je poměrně jednoduchý - je to kopírovací buffer, o kterém jsme právě hovořili v sekci pan a zoom. Každá iterace kreslit() dává nám trochu jiný rámec. Stringing snímků dohromady vytváří pěkný, animovaný obraz. Vše, co musíme udělat, je napsat každý snímek do animace do filmového souboru. Pohodlně, MovieMaker je addFrame () právě to - ukládá cokoliv, co je aktuálně zobrazeno v okně zobrazení náčrtu, do filmového souboru. Aby byl film o něco autentičtější - a jen aby ukázal, jak se to dělá - přidal jsem do titulního pruhu s názvem a tvůrcem obrázku. Jsou to právě standardní příkazy pro zpracování grafiky.

Kontrola, kolik rámců generovat na jeden obrázek je složitá část. První věc, kterou je třeba pochopit, je to, že počet snímků skici (počet opakování) kreslit() provede sekundu) je odlišný od obnovovacího kmitočtu filmu. Předpokládejme například, že nastavíte snímkovou frekvenci snímku na 60 snímků za sekundu (FPS). Bez ohledu na to, jak dlouho bude generování obrazu na obrazovce trvat, bude tento snímek zobrazen ve filmu v jedné šedesátině sekundy. Ačkoliv ve skice můžete mít efektivní snímkovou frekvenci 6 snímků za sekundu, protože vykreslení nějakého složitého obrazu trvá 10 sekund, je snímková frekvence snímku konstantní. Trvá 600 sekund času zpracování, aby se vygenerovala doba 1 sekundy videosekvence.

Správa tohoto odpojení načasování vyžaduje, abychom manuálně sledovali počet snímků, které jsme do filmu přidali. V příkladu Ken Burns se to provádí v proměnné panFrameIdx, který se zvyšuje na každém průchodu kreslit(). Náčrt porovnává tuto hodnotu se základní linií, která nám říká, kolik snímků chceme zobrazit na obrázku. Poté, co jsem trochu experimentoval, zjistil jsem, že posouvání a přiblížení mezi 2 a 4 sekundami dosáhly nejlepších výsledků, jako je tento:

float MIN_PAN_SECS = 2; // Min. Čas pro zobrazení float MAX_PAN_SECS = 4; // Maximální čas zobrazení fotografie ... framesToDisplay = (int) (náhodné FPS * (MIN_PAN_SECS, MAX_PAN_SECS)); if (panFrameIdx> framesToDisplay) {...

Jakmile náčrt vygeneroval počet snímků požadovaných pro obraz, načte se do dalšího obrázku a proces se opakuje.

V hale Maker:


Začínáme se zpracováním Naučte se programování počítače jednoduchým způsobem pomocí zpracování, což je jednoduchý jazyk, který umožňuje používat kód pro vytváření výkresů, animací a interaktivní grafiky. Kurzy programování obvykle začínají teorií, ale tato kniha vám umožňuje skočit přímo do kreativních a zábavných projektů. Je ideální pro každého, kdo se chce naučit základní programování a slouží jako jednoduchý úvod do grafiky pro lidi s některými programovacími dovednostmi.

Podíl

Zanechat Komentář