Jeffrey Cross
Jeffrey Cross

Codebox:FlickrとProcessingを使ってKen Burns風のムービーを作る

このコードボックスは、Flickr APIを使用して、写真からKen Burns風のムービーを作成する方法を示しています。これはMaker Faire用のものです。

あなたはあなた自身の憂鬱な時代の音楽を供給する必要があるでしょう。

スケッチを設定する

あなたがする必要がある最初の事はアカウントを作成することです(まだ持っていない場合)、そしてFlickrにサインインする。ログインしたら、次はアプリを一意に識別するためのAPIキーを入手します。 (キーはアプリを識別するものではありません) 君は アプリの名前(私は「Ken Burns App」と呼びます)と説明を入力するように求められます。

アプリレコードを作成すると、2つの情報が返されます。アプリを一意に識別する「アプリキー」と、URLに暗号的に署名するために使用される「シークレット」です。 (この例では署名付きURLを使用しませんが、興味があればコードを投稿できます。見たい場合はコメントを入力してください。)このようになります。

キーを取得したら、Processingを起動して、スケッチウィンドウにken_burns_flickr_final.pdeを貼り付けます。これがコードボックスです。

あなたは変数を置き換える必要があるでしょう apiKey そして sharedSecret Flickrから得た値を使って。あなたがそれを見ている間、あなたは他の変数のいくつかを台無しにすることもできます。たとえば、 "faire"以外の用語を検索したい場合は、 "tags"変数を変更できます。 (検索する値はすべてURLエンコードする必要があることに注意してください。これは、スペースを「+」記号に置き換える必要があることを意味します。)または、ムービー内のイメージをもっと多く(または少なく)したい場合は、更新できます。の numPhotos 変数。

討論

これは、この連載の中でも最も複雑なプロジェクトの1つです。そのため、説明を次のようにまとめました。

  • Flickrからデータを取得する
  • 画像のパンとズーム
  • 映画を作る

XMLElementクラスとArrayListクラスを使用します。あなたが迅速なリフレッシュを必要とするならば、Google AutocompleteとSwat An(Arraylist)Of TargetsでAmuseをチェックしてください。迷子になったと感じた場合は、例に従う必要がある背景を説明してください。

Flickrからデータを取得する

flickr APIを使用すると、サイト上の画像、グループ、コレクション、および写真に関するデータを読み取ることができます(ただし、ここでは行いません)。データはXMLで返されますが、他の形式も利用可能です。

それでは、すぐに飛び込んで、flickr.groups.pools.getPhotosを見てみましょう。この呼び出しは、特定のグループのプール写真のリストを返します。以下のようなさまざまなパラメータを受け入れることができます。 api_key (これはほとんどすべての呼び出しに必要です)、 group_id (MAKEのグループIDは[電子メールで保護されています]) タグ 画像を一致させ、各ページに必要な結果の数を 1ページあたり).

通話のドキュメントページの一番下までスクロールすると、API Explorerという便利なリンク(flickr.groups.pools.getPhotos)が見つかります。これは対話型のフォームにリンクしており、そこでさまざまなパラメータを試して呼び出しの結果を取得することができます。 APIの各呼び出しにも同様の機能があります。 (また、XML出力を表示するにはFirefoxを使用する必要がありました。YMMV。)(前述のように)認証済みのAPI呼び出しは使用しないので、ラジオボタンで[呼び出しに署名しない]を選択します。

これは、何が起こっているのかを説明するのに役立つはずの図です。

エクスプローラは、呼び出しによって返されたXMLデータをすばやく確認するための最良の方法です。この場合、XMLは次のようになります。

... ...

後に続く写真データは、ルートノードの最初の子要素にあります。私たちのコードは、これらすべての子ノードをループ処理し、関心のある属性を取り出し、後で使用するためにそれらをArrayListに格納する必要があります。

最後に、このデータを生成するために必要なURLがXMLボックスのすぐ下にあります。ここにあります:

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

これで、必要なURLと取得するXMLがわかったので、データを解析するためのコードを書くことができます。ここにあります:

// makezin flickrプールの最初の100の写真を取得します。void getPhotosByGroup(String _groupId、String _tags){//ここで説明されているように、トークンを取得するための呼び出しを設定します。// http://www.flickr.com/ services / api / auth.howto.desktop.html文字列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); // URLをロードするXMLElement xml = new XMLElement(join(results、 "n")); //配列要素を文字列に折りたたむString [] errCodes = getStatus(xml); //(あれば)エラーコードをXMLから引き出すif(errCodes [0] .equals( "ok")){XMLElement root = xml.getChild(0); (int i = 0; i <root.getChildCount(); i ++){String id = root.getChild(i).getStringAttribute( "id");文字列owner = root.getChild(i).getStringAttribute( "owner"); String title = root.getChild(i).getStringAttribute( "title"); photos.add(新しい写真(ID、タイトル、所有者)); else {println( "エラー!これがいくつかのコードです:n" + errCodes); }}

このシリーズの他のコラムをフォローしているのであれば、それほどなじみのないものに見えるべきものはありません。必要なURLのテンプレートとなる文字列を作成し、ページのコンテンツを取得します。 loadString()その後、XMLElementで処理します。

おそらく唯一の問題は、次の手順を使用してエラーチェックを少し行っていることです。 getStatus() 電話で何か問題が発生したかどうかを確認します。たとえば、無効なAPIキーをURLに渡した場合、有用な情報の代わりにXMLにエラーコードが表示されます。

画像に関するメタデータを読み込んだら、flickr.photos.getSizesを使用して特定の写真IDに関連付けられているさまざまな画像のURLを見つける必要があります。この呼び出しは、さまざまな画像サイズ(サムネイル、正方形、小さい、大きいなど)に関する情報を含む構造体を返します。Flickrは各写真を保存します。例を示しましょう。

このコードはすべてで処理されます。 getPhotoURL() メソッドの構造はほとんど同じです。 getPhotosByGroup()。 URLを取得したら、次のようにして画像を読み込むことができます。 loadImage().

パンとズーム

画像を取り込んだら、Ken Burnsスタ​​イルでパンとズームを開始する準備が整いました。このPanがProcessingコミュニティからの大きな画像の例で示しているように、バッファリングを使用してパン効果を作り出すことができます。の各繰り返しで ドロー()バッファの(x、y)座標が所定のベクトルに沿って滑らかに移動するように更新します。この図は、関連する重要な変数を示しています。

ズーミングはもっと簡単です。 ズーム という小さな割合で zoomFactorその後、Processingの 規模() 適切な変換を行うための関数。

さまざまな変数に対するすべての更新は、 ドロー() 方法。

映画を作る

ムービーを作成するのは少し面倒です。ムービーファイルを作成してそれにフレームを追加するのは簡単です。 ムービーメーカー 寄贈された図書館この図書館は面倒で一生懸命働いています。それを使うために、我々は新しいを作ります ムービーメーカー オブジェクトイン セットアップ()フレームを追加する ドロー()それから、 仕上げ() 完了したら注意が必要なのは、それらのフレームの内容と表示される時間を制御することです。

内容はかなり簡単です。パンとズームのセクションで説明したコピーバッファです。の各繰り返し ドロー() 少し違うフレームを教えてください。フレームをつなぎ合わせると、素敵なアニメーション画像が作成されます。アニメーションの各フレームをムービーファイルに書き込むだけです。便利には、MovieMakerの addFrame() この方法で、スケッチの表示ウィンドウに現在表示されているものはすべてムービーファイルに保存されます。映画をもう少し本格的に見せるために - そしてそれがどうやって行われたかを示すために - 私は写真のタイトルと作成者と共にタイトルバーに追加しました。これらは標準のProcessingグラフィックスコマンドで行われます。

画像ごとに生成するフレーム数を制御するのは難しい部分です。最初に理解しておくべきことは、スケッチのフレームレート(回数) ドロー() 秒を実行します)は、映画のフレームレートとは異なります。たとえば、ムービーのフレームレートを毎秒60フレーム(FPS)に設定したとします。画面にイメージを生成するのにかかる時間に関係なく、そのイメージはムービーの60分の1秒で表示されます。そのため、スケッチには1秒間に6フレームの有効フレームレートがある場合がありますが、複雑な画像をレンダリングするには10秒かかりますが、ムービーのフレームレートは一定です。 1秒のムービータイムを生成するには、600秒の処理時間がかかります。

このタイミングの切断を管理するには、ムービーに追加したフレーム数を手動で追跡する必要があります。 Ken Burnsの例では、これは変数で行われます。 panFrameIdxパススルーごとに増加します ドロー()。スケッチは、この値をベースラインと比較して、画像ごとに表示するフレーム数を示します。少し試したところ、2〜4秒の間にパンおよびズームを行うと、次のように最良の結果が得られることがわかりました。

フロートMIN_PAN_SECS = 2。 //写真のフロートを表示する最小時間MAX_PAN_SECS = 4; //写真の最大表示時間... framesToDisplay =(int)(FPS *ランダム(MIN_PAN_SECS、MAX_PAN_SECS)); if(panFrameIdx> framesToDisplay){...

スケッチが画像に必要な数のフレームを生成すると、それは次の画像にロードしてプロセスを繰り返します。

メーカーの小屋で:


Processing入門Processing、コードを使用して図面、アニメーション、インタラクティブグラフィックを作成するための簡単な言語であるProcessingを使用して、コンピュータプログラミングを簡単に学ぶことができます。プログラミングコースは通常理論から始まりますが、この本では創造的で楽しいプロジェクトに飛び込むことができます。基本的なプログラミングを学びたい人には理想的で、プログラミングのスキルを持っている人のためのグラフィックスの簡単な紹介としても役立ちます。

シェア

コメントを残します