モーションプログラミング日和(1)

モーションプログラミング日和(1)

北千住デザイン
北千住デザイン (ID225) 公認maker 2014/04/24
0

1. トゥイーンとイージング

はじめに

はじめまして、北千住デザインの渡邊と申します。普段は、プログラムを書いて、音やら映像やらを組み合わせたインタラクティブなコンテンツを作っています。

この連載では、プログラムで円周率を求めたり…将棋でプロと対戦したり…ということではなくて、プログラムを使って、絵を動かす、映像やアニメーションを作る、ということに焦点を当てていきます。具体的には、毎回、よくつかわれる技法や仕組みをひとつ取り上げ、それを簡単に説明しながら、ブラウザで見られる形にしてみようと思います。

特に、これを読んだからと言ってプログラミングができるようになる!ということではないと思うのですが、プログラミングを知らない人が、そういう原理でつくられてるんだ~とか、こんなこともできるんだ~とか、偶然道で100円拾ってラッキ~☆……くらいのお得感を目指し、がんばります。

プログラムで絵を描く・動かす…とはなにか!?

筆や絵の具を使って、絵を描いたり、それを何枚も書いてアニメーションさせたりするように、プログラムを使って、絵を描いたりいたりアニメーションさせたりすることができるんです。例えば、僕はこんなものを、夜な夜な趣味で作っています。

ランダムにドットが動き続けるモーショングラフィック時計 (http://kitasenjudesign.com/work/05/)

マウスの動きに合わせ映像が移動し、複雑なコラージュ画像を生成するミュージックビデオ (http://kitasenjudesign.com/work/19/roy.html)

これらが、既存の映画やYOUTUBEの映像と違うのは、入力データ(たとえばマウスの動きとか、音声や画像などデータ化できるものなんでも)をリアルタイムに処理して、映像として出力しているという点です。なので、インタラクティブなものにもできるし、ランダムなアニメーションを永遠と流すこともできます。

そんなプログラムが作りだす映像は、既存の映像とは作り方も異なり、データをどのように処理して、どのような仕組みやルールで、映像を作り出すか、というところを設計する必要があります。
作られたプログラムは、精密に作られた時計のように設計したルールに従い、データを処理・解析し変容させ、ソフトウェアが終了されるまで、駆動し続けます。そうして出来上った映像は独特の趣や面白さがあって、とても好きなんです。

そんなプログラミングでよくつかわれる基礎的な技法や仕組みを紹介しながら、毎回、何かを作っていこうと思います。

第1回目 トゥイーンとイージング

第1回目はトゥイーン(tween)とイージング(easing)を紹介します。

トゥイーン
トゥイーンとはin-betweenの略らしいんですが、AからBという状態に、オブジェクトを動かす(あるいはモーフィングさせる)現象やプログラムのことをいいます。例えば、始点(x=0)と終点(x=100)の位置を指定すると、その間を補間して、アニメーションさせてくれるわけです。たとえばこんな感じです。

ここでは簡単に位置の移動をしていますが、同時に角度を変えたり、スケールを変えたり、さまざまなパラメータを変化させアニメーションを作ります。

イージング
トゥイーンの移動量に強弱をつけるプログラムをイージング(easing)と言います。緩和みたいな意味だそうです。最初早くてゆっくりと待ったりすると、一定のスピードで動くよりなぜか気持ちよく見えたりします。軌跡を見てみると同じAからBの移動でも、かなり違います。

例としてiPhoneのアプリ起動のアニメーションをスローで見てみましょう。トラッキングを手動でやったんで汚くいんですが、最初遅くて加速してまたゆっくりになってることがわかります。

このトゥイーンとイージングを駆使し、気持ちの良いモーショングラフィックをつくりだしたりします。まあプログラムを書かなくても、映像編集ソフトにも搭載されています。

では、このトゥイーンとイージングをテーマに何か作ってみます!

「トゥイーンとイージング」をテーマに つくってみた!

トゥイーンとイージングってモーショングラフィックでは必ず使うんで、それをテーマに何か作る、って逆に超マニアックだと思います。あなたなら何を作りますか・・?

僕は、知らない人を対象に、ちょっとわかるようになる、という連載にしてみようかな、と思っていまして、これを見たり触ったりしたら、気持ちいいトゥイーンが分かるようなものを作ろうかなと思いました。また、プログラムでしかできないアニメーションという観点でもつくっています。そう思って作ったものはこちらです!!!!!(画面をドラッグしてください)

いかがでしょう?このシステマチックに動く感じがなんか楽しいですよね!!いとおしいですよね?!そうでもないですか?!もっと凄いものを期待しましたか??トゥイーンやモーショングラフィックが分かりましたか??

まあ、これがすごくなくても、自分で考えて作って動かしてみると楽しかったりします。僕は実のところこの世界のことの大半には興味を持てないけれど、自分が作ったものとなると、他人より1.8倍くらい、好きだし没入できる気がします。作ったものがより良くなっていく過程も楽しいです。
ぜひみなさんもプログラミングやモノづくりしてみてください!

次回は「ランダム」をテーマにやってみます。またコードも公開できるように準備していきます。では、また次回。

参考にしてくれた記事

記事が登録されていません。
この記事を参考にして、新しく記事を投稿しよう!

違反について