Jeffrey Cross
Jeffrey Cross

Codebox: tehke Ken Burns-stiilis film Flickr ja töötlemise abil

See Codebox näitab, kuidas kasutada Flickr API-d, et luua oma fotodest Ken Burnsi stiilis filmi, nagu see on Maker Faire jaoks:

Peate esitama oma melanhoolse aja muusika.

Seadistage visand

Esimene asi, mida peate tegema, et luua konto (kui teil seda veel pole) ja logi sisse Flickrisse. Kui olete sisse loginud, on järgmine samm saada API-rakendus oma rakenduse üheselt identifitseerimiseks. (Noh, võti ei tuvasta rakendust nii palju, kui see seda tuvastab sina kasutate rakendust.) Teil palutakse anda rakendusele nimi (nimetasin seda "Ken Burnsi rakenduseks") ja kirjeldust.

Kui olete rakenduse kirje loonud, saate tagasi kaks teavet: rakenduse võti, mis üheselt identifitseerib rakenduse, ja „salajane”, mida kasutatakse URL-i krüptograafiliselt allkirjastamisel. (Me ei kasuta selles näites allkirjastatud URL-e, kuid kui sa tahad, võin selle koodi postitada. Lihtsalt jätke kommentaar, kui soovite seda näha.) See peaks olema selline:

Kui olete võtme kätte saanud, tule üles töötlema ja kleepige ken_burns_flickr_final.pde skeemi aknasse. Siin on kodeering:

Muutuja tuleb asendada apiKey ja jagatudSekret Flickrilt saadud väärtustega. Kui olete selle juures, võite mõnda muud muutujat segada. Näiteks, kui soovite otsida mõnda teist terminit kui “faire”, saate muuta sildi muutujat. (Pange tähele, et peate URL-i kodeerima kõik otsitavad väärtused, mis tähendab enamasti, et peate tühjendama tühikud „+” märgiga.) Või kui soovite filmis rohkem (või vähem) pilte, saate värskendada the numPhotos muutuja.

Arutelu

See on üks selle seeria keerulisemaid projekte, nii et olen katkestanud arutelu järgmistesse kopadesse:

  • Andmete tõmbamine Flickrilt
  • Piltide kopeerimine ja suurendamine
  • Filmi loomine

Me kasutame XMLElementi ja ArrayList-klasse ning hea natuke. Kui vajate kiiret täiendamist, vaadake Amuse ennast Google'i automaatse komplekteerimise ja Swat An (Arraylist) of Targets'ist. Kui teil on tunne kadunud, peaksid nad andma teile tausta, mida peate järgima.

Andmete tõmbamine Flickrilt

Flickr api võimaldab teil lugeda (ja kirjutada, kuid me ei tee seda siin) andmeid saidi piltide, rühmade, kogude ja fotode kohta. Andmed tagastatakse XML-is, kuigi muud formaadid on saadaval.

Niisiis, olgem sukelduda otse ja vaadake flickr.groups.pools.getPhotos. See kõne tagastab antud grupi piltide loendi. See võib aktsepteerida erinevaid parameetreid, nagu näiteks api_key (see on nõutav peaaegu kõigi kõnede puhul) group_id (MAKE grupi id on [email protected]), sildid soovite, et pilt sobiks, ja soovitud tulemuste arv igal lehel (kutsutud per_page).

Kui liigute kõne dokumenteerimislehe allosas, leiad mugav lingi nimega API Explorer: flickr.groups.pools.getPhotos. See viitab interaktiivsele vormile, kus saab proovida erinevaid parameetreid ja saada kõne tulemused; iga API-liidese kõne funktsioon on sarnane. (Samuti leidsin, et pean XML-väljundi vaatamiseks kasutama Firefoxi. YMMV.) Valige raadionupust „Ära kirjuta kõne”, sest (nagu eelnevalt kirjeldatud) me ei kasuta autentitud API-kõnesid.

Siin on joonis, mis peaks aitama selgitada, mis toimub:

Explorer on parim viis, kuidas kiiresti vaadata XML-andmeid, mis on tagasi saadetud. Sellisel juhul näeb XML välja järgmiselt:

... ...

Fotode andmed, mis me pärast seda oleme, asuvad esimeses lapselemendis juuremoodust välja. Meie kood peab läbima kõik need lapse sõlmed, tõmba need atribuudid, millest me oleme huvitatud, ja säilitame need ArrayListis hilisemaks kasutamiseks.

Lõpuks leiad URL-i, mis on vajalik nende andmete loomiseks XML-kasti all. Siin see on:

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

Nüüd, kui me teame URL-i, mida me vajame, ja XML-i, mida me kavatseme saada, saame kirjutada andmete töötlemiseks mõne koodi. Siin see on:

// Tõmbab esimesed 100 fotot makezin flickr pool void getPhotosByGroupis (String _groupId, String _tags) {// Määrake kõne Tokeni saamiseks, nagu siin kirjeldatud: // 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); // Laadige URL XMLElement xml = uus XMLElement (liituda (tulemused, "n")); // Collapse array elemendid stringiks String [] errCodes = getStatus (xml); // tõmmake XML-i veakoodid (kui need on olemas), kui (errCodes [0] .equals ("ok")) {XMLElement root = xml.getChild (0); jaoks (int i = 0; i <root.getChildCount (); i ++) {String id = root.getChild (i) .getStringAttribute ("id"); Stringi omanik = root.getChild (i) .getStringAttribute ("omanik"); String title = root.getChild (i) .getStringAttribute ("title"); photos.add (uus foto (ID, pealkiri, omanik)); }} else {println ("Viga! Siin on mõned koodid: n" + errCodes); }}

Kui olete selle seeria teisi veerge jälginud, ei tohiks midagi sellist tunda. Kõik, mida me teeme, loovad stringi, mis on vajaliku URL-i mall, tõmmates lehe sisu loadString ()ja seejärel töödeldakse seda XMLElementiga.

Võib-olla on ainsaks kortsuks see, et me teeme natuke vea kontrollimist, kasutades selleks kutsutud protseduuri getStatus () et näha, kas kõnes on midagi valesti läinud. Näiteks kui me edastasime URL-is kehtetu API-võtme, saame XML-is vea koodi kasuliku teabe asemel:

Kui olete piltide metaandmetest lugenud, peame me kasutama flickr.photos.getSizes, et leida URL-e eri piltidega, mis on seotud konkreetse foto ID-ga. Kõne tagastab struktuuri, mis sisaldab teavet erinevate piltide suuruste kohta (pisipildid, ruudud, väikesed, suured jne). Siin on näide:

Seda koodi käsitletakse kõikides getPhotoURL () meetod, mis on struktuuriga peaaegu identne getPhotosByGroup (). Kui meil on URL, saame pildi laadida loadImage ().

Paneerimine ja suumimine

Kui oleme pildi tõmmanud, oleme valmis alustama Ken Burnsi stiili pioneerimist ja suumimist. Nagu näitas see Pan suur töötlemisühiskonna näide, saame kasutada puhverdamist panning-efekti loomiseks. Iga iteratsiooni kohta joonistama (), värskendame puhvri (x, y) koordinaate nii, et see liigub sujuvalt mööda etteantud vektorit. See joonis illustreerib olulisi muutujaid:

Suumimine on veelgi lihtsam - me lihtsalt suurendame muutujat suum väikese protsendi võrra zoomFactorja seejärel töötle skaala () funktsiooni, et teha sobiv ümberkujundamine.

Kõik eri muutujate värskendused tehakse joonistama () meetod.

Filmi loomine

Filmi loomine on veidi keerulisem. Noh, ma võtan selle tagasi - filmifaili loomine ja raamide lisamine sellele on lihtne tänu suurele MovieMaker panustas raamatukogu. Raamatukogu teeb kõik räpased ja rasked tööd. Selle kasutamiseks kasutame uut MovieMaker objekti seadistamine (), lisage sellele kaadrid joonistama ()ja helistage seejärel lõpetama() kui me oleme valmis. Keeruline osa on kontrollida, mida need kaadrid sisaldavad ja kui kaua neid kuvatakse.

Sisu on üsna lihtne - see on kopeerimispuhver, mida me lihtsalt panoraam- ja suumiosas käsitlesime. Iga iteratsioon joonistama () annab meile veidi erineva raami. Kaadrite ühildamine loob kena, animeeritud pildi. Kõik, mida me peame tegema, on kirjutada iga kaader animatsiooni filmifaili. Mugavalt, MovieMaker addFrame () meetod seda lihtsalt teeb - see salvestab filmi faili mis tahes, mis praegu kuvatakse skeemi kuvamisaknas. Filmi pisut autentsemaks muutmiseks - ja lihtsalt selleks, et näidata, kuidas see on tehtud - lisasin pildi pealkirja ja loojaga tiitliribale. Need on tehtud lihtsalt standardse graafika käskude abil.

Kontrollige, kui palju kaadreid ühe kujutise loomiseks on. Esimene asi, mida mõista, on see, et skeemi kaadrisagedus (kordade arv) joonistama () teine) on filmi kaadrisagedusest erinev. Oletame näiteks, et seadistate filmi kaadrisageduse kuni 60 kaadrit sekundis (FPS). Sõltumata sellest, kui kaua pildi loomiseks kulub, kuvatakse see pilt filmis ühe kuuekümnendiku võrra. Seega, kuigi teie skeemil võib olla efektiivne kaadrisagedus 6 kaadrit sekundis, sest keerulise pildi tegemiseks kulub 10 sekundit, on filmi kaadrisagedus konstantne. Filmi ajal 1 sekundi loomiseks kulub 600 sekundit.

Selle ajastuse katkestamise haldamine eeldab, et me jälgime käsitsi filmi lisatud kaadrite arvu. Ken Burnsi näites tehakse see muutujaga panFrameIdx, mis kasvab iga läbipääsu kaudu joonistama (). Joonisel võrreldakse seda väärtust baasjoonega, mis ütleb meile, kui palju kaadreid tahame ühe pildi kohta kuvada. Pärast natuke katsetamist leidsin, et 2–4 sekundi pikkune paanimine ja suumimine andsid parimaid tulemusi, nagu:

float MIN_PAN_SECS = 2; / / Miniaeg foto float kuvamiseks MAX_PAN_SECS = 4; // Maksimaalne aeg fotode kuvamiseks ... framesToDisplay = (int) (FPS * juhuslik (MIN_PAN_SECS, MAX_PAN_SECS)); kui (panFrameIdx> framesToDisplay) {...

Kui skeem on loonud pildile vajalike kaadrite arvu, laadib see järgmise pildi ja kordab protsessi.

Makeri varjus:


Töötlemise alustamine Lugege arvutiprogramme töötlemisel lihtsal viisil, mis on lihtne keel, mis võimaldab teil kasutada jooniseid, animatsioone ja interaktiivseid graafikaid. Programmeerimiskursused algavad tavaliselt teooriaga, kuid see raamat võimaldab teil hüpata paremale loomingulistele ja lõbusatele projektidele. See sobib ideaalselt kõigile, kes soovivad õppida põhiprogramme ja on lihtsad sissejuhatused mõnede programmeerimisoskustega inimestele.

Osa

Jätnud Kommentaari