Jeffrey Cross
Jeffrey Cross

Kôdni kod: izradite film u stilu Ken Burns koristeći Flickr i Obradu

Ovaj kodni kôd pokazuje kako koristiti Flickr API za izradu filma u stilu Ken Burns s vaših fotografija, kao što je ovaj za Maker Faire:

Morat ćete opskrbiti vlastitom melankoličnom glazbom.

Postavite skicu

Prvo što trebate učiniti je stvoriti račun (ako ga već nemate) i prijaviti se na Flickr. Nakon što se prijavite, sljedeći korak je da dobijete API ključ za jedinstveno identificiranje aplikacije. (Pa, ključ ne prepoznaje toliko aplikaciju koliko to identificira vas pokreću aplikaciju.) Od vas će se tražiti da aplikaciji date ime (nazvao sam je "Ken Burns App") i opis.

Kada stvorite zapis aplikacije, dobit ćete dva podatka: "ključ aplikacije" koji jedinstveno identificira aplikaciju i "tajnu" koja se koristi kriptografski potpisivanjem URL-a. (U ovom primjeru nećemo upotrebljavati potpisane URL-ove, ali ako vas zanima mogu postaviti kôd. Samo ostavite komentar ako ga želite vidjeti.) Trebao bi izgledati ovako:

Kada dobijete ključ, pokrenite Obradu i zalijepite ken_burns_flickr_final.pde u prozor skice. Evo šifre kôda:

Morat ćete zamijeniti varijablu apiKey i sharedSecret s vrijednostima koje ste dobili od Flickra. Dok radite na tome, možete se i zabrljati s nekim drugim varijablama. Na primjer, ako želite tražiti drugi pojam od "faire", možete promijeniti varijablu "oznake". (Imajte na umu da trebate URL kodirati sve vrijednosti koje tražite, što uglavnom znači da trebate zamijeniti razmake znakom "+".) Ili, ako želite više (ili manje) slika u filmu, možete ažurirati NUMPHOTOS promjenjiva.

Rasprava

To je jedan od složenijih projekata u ovoj seriji pa sam raspravu podijelio u sljedeće skupove:

  • Povlačenje podataka s Flickra
  • Pomicanje i zumiranje slika
  • Izrada filma

Koristit ćemo klase XMLElement i ArrayList i dobar dio. Ako trebate brzo osvježavanje, provjerite Zabavite se s Google Autocomplete i Swat An (arrailistom) ciljeva. Trebali bi vam dati pozadinu koju ćete morati slijediti ako se osjećate izgubljeno.

Povlačenje podataka s Flickra

Aplikacija flickr omogućuje vam čitanje (i pisanje, ali to nećemo raditi ovdje) podataka o slikama, grupama, zbirkama i fotografijama na web-lokaciji. Podaci se vraćaju u XML-u, iako su dostupni drugi formati.

Stoga ronimo pravo na flickr.groups.pools.getPhotos. Ovaj poziv vraća popis fotografija za bazen za danu grupu. Može prihvatiti različite parametre, kao što je API_KEY (ovo je potrebno za gotovo sve pozive), group_id (MAKE-ov ID grupe je [zaštićen e-poštom]), oznake želite da se slika podudara i broj rezultata koje želite na svakoj stranici (zove se po stranici).

Ako se pomaknete na dno stranice s dokumentacijom poziva, pronaći ćete praktičnu vezu pod nazivom API Explorer: flickr.groups.pools.getPhotos. To povezuje interaktivni obrazac u kojem možete isprobati različite parametre i dobiti rezultate poziva; svaki poziv u API-ju ima sličnu funkcionalnost. (Također, otkrio sam da moram koristiti Firefox da vidim XML izlaz. YMMV.) Odaberite "Ne potpisuj poziv" u radio gumbu jer (kao što smo već spomenuli) nećemo koristiti autenticirane API pozive.

Evo slike koja bi trebala objasniti što se događa:

Explorer je najbolji način da brzo vidite XML podatke koji se vraćaju pozivom. U ovom slučaju, XML izgleda ovako:

... ...

Podaci o fotografijama koje slijedi nalazi se u prvom podređenom elementu izvan korijenskog čvora. Naš kôd morat će preći preko svih tih dječjih čvorova, izvaditi atribute koji nas zanimaju i pohraniti ih u ArrayList za kasniju upotrebu.

Konačno, pronaći ćete URL koji je potreban za generiranje tih podataka u okviru XML okvira. Evo ga:

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

Dakle, sada kada znamo koji URL trebamo i XML koji ćemo dobiti, možemo napisati neki kod za analizu podataka. Evo ga:

// Izvlači prvih 100 fotova u makezin flickr poolu void getPhotosByGroup (String _groupId, String _tags) {// Postavite poziv da dobijete Token, kao što je opisano ovdje: // 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 i per_page = "+ NUMPHOTOS; String [] rezultati = loadStrings (url); // Učitaj URL XMLElement xml = new XMLElement (pridruži se (rezultati, "n")); // Skupi elemente niza u niz String [] errCodes = getStatus (xml); // Povucite kodove pogreške (ako ih ima) iz XML-a (errCodes [0] .equals ("ok")) {XMLElement root = xml.getChild (0); za (int i = 0; i <root.getChildCount (); i ++) {String id = root.getChild (i) .getStringAttribute ("id"); Vlasnik niza = root.getChild (i) .getStringAttribute ("vlasnik"); String title = root.getChild (i) .getStringAttribute ("naslov"); photos.add (nova fotografija (id, naslov, vlasnik)); }} else {println ("Greška! Ovdje su neki kodovi: n" + errCodes); }}

Ako ste slijedili ostale stupce u ovoj seriji, ništa ne bi trebalo izgledati nepoznato. Sve što radimo je stvaranje niza koji je predložak za URL koji nam treba, povlačeći sadržaj stranice pomoću loadString (), a zatim je obrađuje pomoću XMLElement.

Možda je jedina bora to što radimo provjeru pogrešaka koristeći postupak koji se zove getStatus () kako bi se vidjelo je li nešto krenulo u krivu. Na primjer, ako u URL-u unesemo nevažeći ključ API-ja, umjesto korisnih informacija, u XML-u ćemo dobiti kôd pogreške:

Nakon što pročitamo meta podatke o slikama, trebamo koristiti flickr.photos.getSizes da bismo pronašli URL-ove za različite slike povezane s određenim ID-om fotografije. Poziv vraća strukturu s informacijama o različitim veličinama slika (minijature, kvadrat, mali, veliki itd.) Flickr pohranjuje za svaku fotografiju. Evo primjera:

Ovaj kod je obrađen u getPhotoURL () metoda, koja je gotovo identična strukturi getPhotosByGroup (), Kada dobijemo URL, možemo učitati sliku pomoću loadImage ().

Pomicanje i zumiranje

Kada povučemo sliku, spremni smo početi pomicanje i zumiranje u stilu Ken Burns. Kao što je prikazano u ovom primjeru velike slike iz zajednice obrade, možemo koristiti buffer za stvaranje efekta pomicanja. Na svakoj iteraciji crtati(), ažurirat ćemo koordinate (x, y) međuspremnika tako da se glatko kreće uz unaprijed određeni vektor. Ova slika prikazuje ključne uključene varijable:

Zumiranje je još lakše - samo povećavamo naziv varijable zum po malom postotku zoomFactor, a zatim upotrijebite Obrada skala () funkcija za obavljanje odgovarajuće transformacije.

Sva ažuriranja različitih varijabli napravljena su u crtati() metoda.

Izrada filma

Izrada filma je malo složenija. Pa, uzmem to natrag - stvaranje filmske datoteke i dodavanje okvira je jednostavno, zahvaljujući velikom Tvorac filmova pridonijeli su knjižnici. Knjižnica radi sav neuredan, težak posao. Da bismo je koristili, ponovili smo novo Tvorac filmova objekt u postaviti(), dodajte okvire u nju crtati(), a zatim nazovite Završi() kada završimo. Zanosan dio je kontrola onoga što ti okviri sadrže i koliko su dugo prikazani.

Sadržaj je prilično jednostavan - to je spremnik za kopiranje koji smo upravo raspravili u odjeljku za pan i zoom. Svaka iteracija od crtati() daje nam malo drugačiji okvir. Slaganje okvira zajedno stvara lijepu, animiranu sliku. Sve što trebamo je napisati svaki kadar u animaciji u filmsku datoteku. Pogodno, MovieMaker's addFrame () metoda čini upravo to - sprema sve što je trenutno prikazano u prozoru prikaza skice u datoteku filma. Da bi film bio malo autentičniji - i samo kako bi pokazao kako se to radi - dodao sam u naslovnu traku s naslovom slike i kreatorom. To se radi samo pomoću standardnih grafičkih naredbi Processing.

Kontroliranje broja okvira za generiranje po slici je nezgodan dio. Prva stvar koju treba razumjeti je da je brzina snimanja skice (broj puta) crtati() izvršava sekundu) razlikuje se od broja sličica kadra filma. Na primjer, pretpostavimo da ste postavili brzinu kadrova filma na 60 sličica u sekundi (FPS). Bez obzira koliko je vremena potrebno za generiranje slike na zaslonu, ta će se slika prikazati u jednoj šezdesetoj sekundi u filmu. Dakle, iako imate brzinu od 6 sličica u sekundi u skici jer je potrebno 10 sekundi za prikaz neke složene slike, brzina kadra filma je konstantna. Potrebno je 600 sekundi vremena obrade kako bi se generiralo 1 sekundu vremena filma.

Za upravljanje tim vremenskim prekidom potrebno je da ručno pratimo broj okvira koje smo dodali filmu. U primjeru Ken Burnsa to se radi u varijabli panFrameIdx, koji se povećava na svakom prolazu crtati(), Skica uspoređuje ovu vrijednost s osnovnom linijom koja nam govori koliko okvira želimo prikazati po slici. Nakon malo eksperimentiranja, otkrio sam da je pomicanje i zumiranje između 2 i 4 sekunde dalo najbolje rezultate, kao što je ovaj:

plutaju MIN_PAN_SECS = 2; // Min vrijeme prikaza foto plovak MAX_PAN_SECS = 4; // Maksimalno vrijeme prikaza fotografije ... framesToDisplay = (int) (FPS * slučajno (MIN_PAN_SECS, MAX_PAN_SECS)); ako (panFrameIdx> framesToDisplay) {...

Kada skica generira broj okvira potrebnih za sliku, učitava se na sljedećoj slici i ponavlja postupak.

U skladištu za kavu:


Početak rada s obradom Naučite programiranje računala na jednostavan način s obradom, jednostavnim jezikom koji vam omogućuje da koristite kod za izradu crteža, animacije i interaktivne grafike. Programski tečajevi obično počinju s teorijom, ali ova knjiga omogućuje vam da skočite izravno u kreativne i zabavne projekte. Idealan je za svakoga tko želi naučiti osnovno programiranje i služi kao jednostavan uvod u grafiku za osobe s određenim vještinama programiranja.

Udio

Ostavite Komentar