hirax.net::Keywords::「アニメーション」のブログ



2006-10-01[n年前へ]

「2次元画像」を自由自在に変形(アニメーション)させる技術 

http://research.microsoft.com/users/kunzhou/ 「ビデオ」を眺めると、とても面白い「2次元画像を、リアルタイムに自由自在に変形(アニメーション)させる技術」
 こんな技術を使った「アニメ製作キット」が出てきたら面白いかも。こんな技術を使った「イルカ」にMicrosoft Officeのことを教わったりするのは…イヤだけど。

2007-03-24[n年前へ]

Imagination You Make 

使い方

 Imagination You Makeは画像加工をするためのWEBサイトです。ブラウザ上で画像をさまざまな効果を掛けたり、アニメーション画像を作成することができます。自分用のアカウントを作りログインすることで、手元の画像を他の人には見せずに自由に加工することができます。また、アカウントを作らない場合(ゲスト・モード)でも、サンプルファイルをに対して各種効果をかけることができます。(ただし、ゲスト・モードではサンプルファイル自体を書き換える画像間演算や、サンプルファイルに説明文・属性を付けたりする機能などは制限されています。)

 Imagination You Make で必要な作業は、「画像をマウスでつかんで動かす」「アイコンをクリックする」という2つだけです。たとえば、上・左右に配置されているアイコンをクリックすれば、"Processed Image"に対して、さまざまな画像効果がかかります。もちろん、処理を何回も次々と重ねていくことも可能です("Backup Image"として、処理を掛けている途中の画像を保存しておくこともできます。また、アップロードした画像に戻すこともできます)。

 また、ログインしていて、なおかつ、自分がアップロードしたファイルの場合、画面下部のサムネイル画像を"Processed Image"にドラッグアンドドロップすることで、異なる画像間で処理を行うことができます。

 "Processed Image"も"Backup Image"も自由にドラッグして移動できますから、机の上で絵を描いて遊ぶような感覚で操作することができます。また、他の画像を使って遊んでみたい場合には、画面下部からサムネイル画像を上の領域にドラッグ・アンド・ドロップして下さい。すると、その画像が画面に登場して、処理を行うことができるようになります。

アカウントを作る

 画面右上部の"Create new account"をクリックすると

  • 名前 "Name"
  • パスワード "Passwd"
  • パスワードの確認用 "Passwd"
の入力部が画面に現れます。そこで、適当に「ユーザ名」「パスワード」を入力し、"OK"ボタンを押すと、新しいアカウントが作成され、そのアカウントでログインした状態になります。ログインに失敗"Fail"する場合には、アカウント名を変える・パスワードを確認するなどしてみて下さい。

ログインする

 画面右上部の"Login your account"をクリックすると

  • 名前 "Name"
  • パスワード "Passwd"
の入力部が画面に現れます。そこで、あなたの「ユーザ名」「パスワード」を入力し、"OK"ボタンを押すと、そのアカウントでログインした状態になります。そのアカウントからログアウトしたい場合には、(ログインしている際に)画面上部に表示されている"Logout"をクリックして下さい。

画像をアップロードする

 ログインしている際に、画面上部に表示されている "Upload new image!" という部分をクリックして下さい。すると、画像のタイトル"Title", 説明文"Description"の入力欄とともに画像をアップロードすることができるフォームが画面に現れます。 画像のタイトル"Title", 説明文"Description"は省略可能ですので、この段階で必ず入力しなければならないわけではありません。また、後で入力・修正をすることもできます。なお、画像のタイトル"Title"や 説明文"Description"を使う画像処理機能もあります(吹き出し作成・ポラロイド写真加工・タイトル合成など)。

吹き出しや効果線の位置を決める「ターゲット"Target"」

 吹き出しや集中効果線は、画像中の顔や口を自動検出して自動配置させるようになっています。その位置を手動で決めたい場合には、"Processed Image"の上にある"Target"を好きな位置にドラッグして設定します。なお、Targetはログイン状態で、なおかつ、自分がアップロードした画像でないと見ることができません。

アイコンをクリックしてできること

 画面の上・右・左に並んでいるアイコンをクリックするとさまざまな画像加工を行うことができます。アイコンの機能は大きく分類すると次のようになっています。通常は、画面右上部に配置されているアイコンを使い、(適時、画面の右部のアイコンを使いつつ)反時計回りに順にを追った処理をかけていくと良いでしょう。

  • 画面右:行った処理を元に戻す機能といったヒストリ処理 / 画像間演算機能 / 動画作成機能
  • 画面上部:画像強調・色処理 / マンガ処理 / 絵画処理 / 美人化処理 など
  • 画面左部:写真フレーム・ジグソーパズル化 / 照明効果 / ミニチュア処理化など

 それぞれのアイコンの機能は次のようになります。

上部アイコン

  •  画像を鮮明にします
  •  明暗を強調します
  •  色合いを強調します
  •  画像中の「顔」をズームアップします
  •  画像中の「顔(瞳)」の化粧を落とします
  •  画像中の「顔(瞳)」に化粧をします
  •  アメリカ版画風イラストにします
  •   カラー木版画風にします
  •   白黒木版画風にします
  •  油絵絵画風にします
  •   鉛筆スケッチ風にします
  •   マンガの集中効果線を描きます。画像中の顔に自動的で効果線を集中させることもできますし、Targetを利用して位置を指定した上で、集中線を描かせることもできます
  •   マンガのような吹き出しを描きます。位置は画像中の「口」に自動配置することもできますし、Targetを利用して任意の位置に吹き出しを配置することもできます。吹き出しの内容は画像の説明"description"が使われます
  •  マンガの「タイトル」のように文字を描きます。内容は画像の題名"Title"が利用されます
  •    画像を印象的なセピア風にします
  •   画像を白黒写真にします

左部アイコン

  •  画像をミニチュア撮影風写真に加工します。ピント位置は"Target"を置いた位置になります
  •   画像をジグソーパズルにします
  •   LOMOカメラで撮影した写真風にします
  •  魚眼レンズで撮影したようにします
  •   ポラロイド写真風にします
  •   文字を書き入れたポラロイド写真風にします。文字は画像の説明"desciprion"が利用されます
  •    画像を燃やします
  •    右上から照明が当たっているような効果をかけます

右部アイコン

  •  最後の処理をかけない状態に戻します
  •  "Processed Image"と"Backup Image"をアップロードした画像に戻します
  •  "Processed Image"の内容を"Backup Image"の内容で書き換えます
  •  "Processed Image"と"Backup Image"を入れ替えます(要ログイン)
  •  "Processed Image"と"Backup Image"を合成します
  •  画像の左右反転させます
  •  「顔」のズームアップがされた状態の"Processed Image"と"Backup Image"を合成します
  •  "Processed Image"と"Backup Image"の間のモーフィング動画を作成します

サンプル画像

 Imagination You Make のサンプル画像にあります。

2007-05-04[n年前へ]

「現実世界」をコミック調にする 

撮影映像のアニメーション化

 実際の映像を、絵画・イラストレーション・コミック調に加工処理した映像がたまにあります。たとえば、古いところでは、A-haの「Take on me」のPVなどがありますし、最近では、キアヌ・リーブスが主演したアニメーション映画「A Scanner Darkly」などもそうです。好き嫌いがわかれそうですが、画像が単純化されたイラスト・マンガ風に映し出された世界にはやはり目が惹かれてしまう、という人も多いことでしょう。

 かつては、カメラで撮影した映像を1コマごと手作業でなぞる(参考:ロトスコープ)ことも多かったと言いますが、A Scanner Darkly の場合などでは、ボブ・サビストンが開発した Rotoshop が、実写をアニメーション化する際に活用され、撮影・作業工程がいくぶん楽になったとも言われています。

 デジカメで撮影した写真といった静止画像を各種イラストレーション調にするソフトウェアは数多くあります。また、動画処理ソフトウェアでも、ポスタリゼーション(減色処理)などの特殊効果を組み合わせれば、動画をイラスト風にすることができるものもいくつかあります。先日作成した、画像加工サービス Imagination You Make でも、各種絵画調に画像を変えるような処理が含まれていましたが、その中のイラストレーション調に画像を加工する部分などは、実は動画にも対応しています。Imagination You Make というWEBサービス 自体はJPEG画像のアップロード・加工にしか対応していないのですが、画像を処理・加工する部分に関しては動画の入出力(もちろん加工処理も)もできるようになっています。

「二次元レッシグ」を作る

 Imagination You Make の「イラストレーション処理」の使用例は、たとえば次の2枚の画像です。
レッシグレッシグ
 左の1枚目の写真が実際の画像で、それに対して「イラストレーション化」をかけたものが右の2枚目の画像です(*)。「イラストレーション化」処理は、「カラー版画化」処理などと違って、輪郭線強調の度合いが小さいので、コミック調という感じではありませんが、それなりにイラストレーション風になっているのがわかります。

レッシグ 動画映像に「イラストレーション化処理」をかけてみた時に、どのような映像に見えるか・映像に対してどのような印象を持つかを知るために、今回、スタンフォード大学ロー・スクールのレッシグ教授のインタビュー映像に対してイラストレーション化処理をかけてみました。右のGIF画像はその結果です。QuickTime形式の動画ファイルは le.mov (16MB) になります(*)。ほんの数秒のアニメーションですが、実際の映像よりもずいぶん単純化されて、実写とは異なった雰囲気を感じます。長時間眺めると目が疲れてしまうそうな気もしますが、たとえばCM映像のようなごく短時間の映像であれば、一種独特に抽象化された世界を味わうことができるかもしれません。

現実世界のコミック化

 Podcast の音声部分をテキスト化するサービスはすでにあります。また、Imagination You Make のように、デジカメで撮影された画像中をコミック調にしたり、顔抽出を行い、適切な部分に吹き出しをつけることができるWEBサービスもすでにあります。こういった技術を組み合わせることで、Podcast などで配信されている実写映像をマンガ風・コミック調アニメーションにしたりするといったことは、ごく近いうちに実現できることでしょう。

 よくある街並みを撮影した映像や、よく知っている人たちが写っている映像をコミック調・イラストレーション化したら、どのような世界が見えるのでしょうか。そんな世界を眺めたら、どう感じるのでしょうか。アニメーション・映画作成会社でない普通の人でも、「ちょっとアニメーションを作ってみる」ということができたら面白いかもしれません。ちょっと作ってみたたくさんのアニメーション中から、いくつかの新しいものが生まれてくるかもしれません。商業的な映像を作り上げることは難しいかもしれませんが、「ちょっとアニメーションを作ってみる」ということは、もう簡単にできるようになっているのかもしれません。


* 使った素材は、NTTインターコミュニケーション・センター[ICC]によるHIVE インタヴュー・シリーズ 01:ローレンス・レッシグ のインタビュー映像です。そのため、上記映像をもとに作成された3枚の画像、および、QuickTime 映像はクリエイティブ・コモンズ 非営利-継承ライセンス になります。

2007-09-20[n年前へ]

油と時間 

 電車の中で、ゴッホの油絵の断面がどうなっているかを想像する。

カムチャツカの若者がきりんの夢をみているとき
広重「名所江戸百景 大はし阿たけの夕立」から、三十年の時を経て、ゴッホが"Bridge in the Rain (after Hiroshige)"を 描く。その二枚の絵を同時に眺めることができる動画を作ってみた。
シミュレーション計算を作ったり、使ったりするには、確信犯的でなければダメだ。
実は色は“その色”の中に“別の色”を持っていて“他の色”と組み合わされて“また別の色”を見せているのだと思います。
三十年の時間の違いも、江戸とパリの遠い距離も、アニメーションGIFではほんの一秒ほどになる。
メキシコの娘は朝もやの中でバスを待っている

2007-11-29[n年前へ]

手と砂で描くアート 

 TVで知った、手と砂で描く一種のアニメーション。不思議なくらい、自然に描かれる景色・姿が変わっていく。これほど上手く、とても奇麗に微粒子を動かすことができることに驚いてしまう。

Sand FantasyVideo Clips'Just imagine...' de Ilana YahavSand Art - Ilana Yahav - Let's Get TogetherSand Art








■Powered by yagm.net