Jeffrey Cross
Jeffrey Cross

Kodak Codebox: Buat Filem Ken Burns Menggunakan Flickr dan Pemprosesan

Codebox ini menunjukkan cara menggunakan Flickr API untuk membuat filem gaya Ken Burns dari foto anda, seperti ini untuk Maker Faire:

Anda perlu membekalkan muzik masa lapang anda sendiri.

Sediakan lakaran

Perkara pertama yang perlu anda lakukan ialah mencipta akaun (jika anda tidak mempunyainya) dan log masuk ke Flickr. Sebaik sahaja anda log masuk, langkah seterusnya adalah untuk mendapatkan kunci API untuk mengenal pasti secara unik aplikasi anda. (Nah, kunci tidak banyak mengenal pasti aplikasi itu kerana ia mengenal pasti itu anda sedang menjalankan aplikasi.) Anda akan diminta untuk memberi nama aplikasi (saya memanggilnya "Ken Burns App") dan keterangan.

Sebaik sahaja anda membuat rekod aplikasinya, anda akan mendapat dua maklumat: satu "kunci aplikasi" yang secara unik mengenalpasti aplikasinya, dan "rahsia," yang digunakan secara kriptografi menandatangani URL. (Kami tidak akan menggunakan URL yang ditandatangani dalam contoh ini, tetapi saya boleh menyiarkan kod jika anda berminat. Hanya tinggalkan komen jika anda mahu melihatnya.) Ia sepatutnya kelihatan seperti ini:

Sebaik sahaja anda mempunyai kunci, api sehingga Pemprosesan dan tampal ken_burns_flickr_final.pde ke dalam tetingkap lakaran. Inilah codebox itu:

Anda perlu menggantikan pembolehubah apiKey dan sharedSecret dengan nilai yang anda dapat dari Flickr. Walaupun anda berada di situ, anda juga boleh mengelirukan dengan beberapa pembolehubah lain. Contohnya, jika anda ingin mencari istilah lain daripada "faire," anda boleh menukar pembolehubah "tag". (Perhatikan bahawa anda perlu URL menyandikan sebarang nilai yang anda cari, yang kebanyakannya bermakna bahawa anda perlu menggantikan ruang dengan tanda "+".) Atau, jika anda ingin lebih banyak (atau kurang) imej dalam filem, anda boleh mengemas kini yang numPhotos pembolehubah.

Perbincangan

Ini adalah salah satu projek yang lebih kompleks dalam siri ini, jadi saya telah membincangkan perbincangan tersebut ke dalam ember berikut:

  • Menarik data dari Flickr
  • Mengamalkan dan zum imej
  • Membuat filem

Kami akan menggunakan kelas XMLElement dan ArrayList dan sedikit baik. Sekiranya anda memerlukan penyegaran yang cepat, semak Amuse diri dengan Google Autocomplete dan Swat An (Arraylist) Of Sasaran. Mereka harus memberikan latar belakang yang anda perlukan untuk mengikuti contoh-contoh jika anda merasa hilang.

Menarik data dari Flickr

Flickr api membolehkan anda membaca (dan menulis, tetapi kami tidak akan melakukannya di sini) data tentang imej, kumpulan, koleksi, dan gambar di laman web ini. Data dikembalikan dalam XML, walaupun format lain tersedia.

Jadi, mari menyelam masuk dan lihat flickr.groups.pools.getPhotos. Panggilan ini mengembalikan senarai foto kolam untuk kumpulan tertentu. Ia boleh menerima pelbagai parameter, seperti api_key (ini diperlukan untuk hampir semua panggilan), yang group_id (ID kumpulan MAKE adalah [email dilindungi]), yang tag anda mahu imej itu sepadan, dan bilangan hasil yang anda inginkan pada setiap halaman (dipanggil setiap muka surat).

Jika anda menatal ke bahagian bawah halaman dokumentasi panggilan, anda akan menemui pautan berguna yang dipanggil API Explorer: flickr.groups.pools.getPhotos. Pautan ini ke bentuk interaktif di mana anda boleh mencuba pelbagai parameter dan mendapatkan hasil panggilan; setiap panggilan dalam API mempunyai fungsi yang sama. (Juga, saya dapati saya menggunakan Firefox untuk melihat output XML. YMMV.) Pilih "Jangan menandatangani panggilan" dalam butang radio kerana (seperti dibincangkan sebelumnya) kita tidak akan menggunakan panggilan API yang disahkan.

Inilah angka yang akan membantu menjelaskan apa yang berlaku:

Explorer adalah cara terbaik untuk cepat melihat data XML yang dikembalikan oleh panggilan. Dalam kes ini, XML kelihatan seperti ini:

... ...

Data foto kami selepas berada di unsur anak pertama dari nod akar. Kod kami perlu melengkung melalui semua nod kanak-kanak ini, menarik ciri-ciri yang kami minati, dan simpannya dalam ArrayList untuk kegunaan kemudian.

Akhirnya, anda akan menemui URL yang diperlukan untuk menjana data ini tepat di bawah kotak XML. Ini dia:

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

Jadi, sekarang kita tahu URL yang kita perlukan dan XML yang kita akan dapat, kita boleh menulis beberapa kod untuk menghuraikan data. Ini dia:

// Menarik 100 foto pertama dalam kolam flickr makezin void getPhotosByGroup (String _groupId, String _tags) {// Sediakan panggilan untuk mendapatkan Token, seperti yang dijelaskan di sini: // http://www.flickr.com/ perkhidmatan / 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); // Muat URL XMLElement URL = XMLElement baru (gabung (hasil, "n")); // Runtuhkan elemen array ke dalam String string [] errCodes = getStatus (xml); // Tarik kod ralat (jika ada) dari XML jika (errCodes [0] .equals ("ok")) {XMLElement root = xml.getChild (0); untuk (int i = 0; i <root.getChildCount (); i ++) {String id = root.getChild (i) .getStringAttribute ("id"); Pemilik strings = root.getChild (i) .getStringAttribute ("pemilik"); Tajuk rentetan = root.getChild (i) .getStringAttribute ("tajuk"); photos.add (Foto baru (id, tajuk, pemilik)); }} lain {println ("Ralat! Berikut adalah beberapa kod: n" + errCodes); }}

Sekiranya anda mengikuti lajur yang lain dalam siri ini, tidak ada yang sepatutnya melihat yang tidak dikenali. Apa yang kita lakukan ialah membuat rentetan yang merupakan templat untuk URL yang kita perlukan, menarik kandungan halaman menggunakan loadString (), dan kemudian memprosesnya dengan XMLElement.

Mungkin satu-satunya kedutan ialah kita melakukan sedikit pemeriksaan kesilapan menggunakan prosedur yang dipanggil getStatus () untuk melihat jika ada yang salah dalam panggilan. Contohnya, jika kami meluluskan kunci API tidak sah dalam URL, kami akan mendapat kod ralat dalam XML dan bukannya maklumat yang berguna:

Sebaik sahaja kita membaca dalam meta data mengenai imej, kita perlu menggunakan flickr.photos.getSizes untuk mencari URL untuk pelbagai imej yang dikaitkan dengan ID foto tertentu. Panggilan mengembalikan struktur dengan maklumat mengenai pelbagai saiz imej (imej kecil, persegi, kecil, besar, dll.) Flickr menyimpan untuk setiap foto. Contohnya:

Kod ini semua ditangani dalam getPhotoURL () kaedah, yang hampir sama dalam struktur ke getPhotosByGroup (). Sekali kita mempunyai URL, kita boleh memuatkan imej menggunakan loadImage ().

Panning dan zoom

Sebaik sahaja kami menarik dalam imej, kami bersedia untuk memulakan panning dan zum dalam gaya Ken Burns. Seperti yang ditunjukkan oleh Pan ini contoh imej yang besar dari komuniti Pemprosesan, kita boleh menggunakan buffering untuk menambah kesan panning. Pada setiap lelaran lukis (), kami akan mengemas kini koordinat penimbal (x, y) supaya ia bergerak dengan lancar sepanjang vektor yang telah ditetapkan. Angka ini menggambarkan pemboleh ubah utama yang terlibat:

Zoom lebih mudah - kami hanya menambah pembolehubah yang dipanggil zum dengan peratusan kecil dipanggil zoomFactor, dan kemudian gunakan Pemprosesan skala () berfungsi untuk melakukan transformasi yang sesuai.

Semua kemas kini kepada pelbagai pembolehubah dibuat dalam lukis () kaedah.

Membuat filem

Mewujudkan filem ini sedikit lebih rumit. Nah, saya mengambil semula itu - mencipta fail filem dan menambah bingkai padanya dengan mudah, terima kasih kepada yang hebat MovieMaker menyumbang perpustakaan. Perpustakaan tidak semua kerja keras dan sukar. Untuk menggunakannya, kita menyusun semula yang baru MovieMaker objek dalam persediaan (), tambah bingkai padanya lukis (), dan kemudian panggil selesai () kaedah apabila kami selesai. Bahagian yang rumit mengawal apa yang bingkai itu mengandungi dan berapa lama ia dipaparkan.

Kandungannya agak mudah - ia adalah penimbulan salinan yang baru kita bincangkan dalam bahagian pan dan zoom. Setiap lelaran lukis () memberi kita bingkai yang sedikit berbeza. Melangkah bingkai bersama-sama mencipta imej yang bagus dan animasi. Apa yang perlu kita lakukan ialah menulis setiap bingkai dalam animasi ke dalam fail filem. Mudah, MovieMaker's addFrame () kaedah hanya itu - ia menyelamatkan apa sahaja yang sedang dipaparkan dalam tetingkap paparan lakaran ke dalam fail filem. Untuk membuat filem itu kelihatan agak tulen - dan hanya untuk menunjukkan bagaimana ia dilakukan - Saya menambah dalam bar tajuk dengan tajuk dan pencipta gambar. Ini hanya dilakukan dengan perintah grafik Pemprosesan piawai.

Mengawal berapa banyak bingkai untuk menghasilkan setiap imej adalah bahagian rumit. Perkara pertama yang difahami adalah bahawa kadar bingkai lakaran (bilangan kali lukis () melaksanakan kedua) adalah berbeza daripada kadar bingkai filem. Contohnya, katakan anda menetapkan kadar bingkai filem kepada 60 bingkai sesaat (FPS). Tidak kira berapa lama masa yang dibutuhkan untuk menghasilkan imej pada skrin, imej itu akan dipaparkan dalam satu enam puluhan detik dalam filem. Oleh itu, sementara anda mungkin mempunyai bingkai yang berkesan sebanyak 6 bingkai sesaat dalam lakaran anda kerana ia mengambil masa 10 saat untuk memberikan beberapa imej kompleks, kadar bingkai filem adalah tetap. Ia akan mengambil 600 saat Masa pemprosesan untuk menjana 1 saat waktu filem.

Menguruskan pemutusan masa ini memerlukan kami untuk menjejaki bilangan bingkai yang telah kami tambahkan kepada filem secara manual. Dalam contoh Ken Burns, ini dilakukan dalam pembolehubah panFrameIdx, yang meningkat pada setiap lulus lukis (). Lakaran ini membandingkan nilai ini kepada garis asas yang memberitahu kita berapa bingkai yang kita mahu paparkan setiap imej. Selepas bereksperimen sedikit, saya dapati bahawa panning dan zoom antara 2 dan 4 saat memberikan hasil yang terbaik, seperti ini:

terapung MIN_PAN_SECS = 2; // Min masa untuk memaparkan float foto MAX_PAN_SECS = 4; / / Masa maksimum untuk memaparkan foto ... framesToDisplay = (int) (FPS * rawak (MIN_PAN_SECS, MAX_PAN_SECS)); jika (panFrameIdx> framesToDisplay) {...

Sebaik sahaja lakaran itu telah menghasilkan bilangan bingkai yang diperlukan untuk imej itu, ia dimuatkan dalam imej seterusnya dan mengulangi proses itu.

Dalam Maker Shed:


Bermula dengan Memproses Belajar pengaturcaraan komputer cara mudah dengan Pemprosesan, bahasa mudah yang membolehkan anda menggunakan kod untuk membuat lukisan, animasi, dan grafik interaktif. Kursus pengaturcaraan biasanya bermula dengan teori, tetapi buku ini membolehkan anda melompat ke dalam projek yang kreatif dan menyeronokkan. Ia sesuai untuk sesiapa sahaja yang ingin belajar pengaturcaraan asas, dan berfungsi sebagai pengenalan mudah kepada grafik untuk orang yang mempunyai kemahiran pengaturcaraan.

Kongsi

Meninggalkan Komen