「Processing」をいじるのが楽しい。コーディングの面白さを体感できる
お恥ずかしながら「Processing」というものを全く知らなかったのですが、この度初めて知り、いろいろと試してみています。「Processing」は Wikipedia によると「電子アートとビジュアルデザインのためのプログラミング言語」とのことです。簡単に言うとプログラミングで絵を描こう、という感じです。
コードを書いて確認して、求めていたものができたら成功、という流れが楽しいです。プログラミングの醍醐味ですね。
私が「Processing」で初めて作ったものを載せてみます。
取りあえずインタラクティブなもの
取りあえずインタラクティブなものを作ってみようと思い、円を並べて、その円がマウスのカーソルを避けるというものを作ってみました。
アニメーション GIF です。
「作ってみました」と文字では簡単に書いていますが、結構時間がかかっています。大きな円はマウスのカーソルの周りに作っています。大きな円の枠まで白い円が逃げます。
取りあえずやってみたいことができたので、次は円の移動速度を変えてみます。
移動速度の変更
マウスカーソル(大きな円の中心)に近いほど、白い円は頑張って遠くへ逃げようとする、というコンセプト。速度が大きいほど色を赤くしてみました。
ここでは "Easing" を自分で作ってみました。マウスカーソルに近いと速度が多くなりますが、遠くなると徐々に速度を緩めます。色々な曲線があると思いますが、easing には手軽に cos() を使ってみました。
ここまでで、なかなか満足のいくものが作れました。
ベジェ曲線を使ってみる
しかし、下のサイトを読んでみると、速度に合わせて円の形が変わるのが面白そうです。やってみましょう。
インタラクティブコーディング勉強会 第1回「ランダム」ウォークでフニフニ微生物 | ここぽんのーと
円は Processing で簡単に作れるのですが、それを使わずにベジェ曲線で円を描かないと動的な変化を加えられません。ベジェ曲線はフォトショップやイラストレーターの「パスツール」などで使われているアレです。
Processing では描くベジェ曲線を座標で指定しなければならないので感覚的にはできません。しかし円っぽい形ができれば良いので取りあえず座標を入力し、後から修正を加えていきました。
ぱっと見ると普通の円っぽいですが、ベジェ曲線です。逃げるときにしっぽを出すようにしてみました。
また、これまでは円が逃げるときに八方向にしか逃げていなかったのですが、より自由な角度へ移動できるようにしました。こういう細かいところが見た目(完成度)にかなり影響します。
円を潰してみる
ベジェ曲線で円を表現するのは何とかなりましたが、今度は円を潰してみたい欲求に捕らわれました。やってみるとこれが意外と難しい…。ベジェ曲線を座標で表現するのは大変です。
何とかなりました。速度に合わせて円が潰れます。これによって動きにだいぶ柔らかさが出ていて、生物感があります。
面白い!
こんな感じで徐々に機能を加えて行くのが面白いです。今回作ったもので何となく Processing を掴めたような気がします。
Processing に触り始めたときは、オブジェクトのA地点からB地点への移動を、時間を基にして行おうとしていましたが、移動速度を指定する方が簡単だと気付きました。オブジェクトに速度を持たせれば良いので分かり易いし、移動できる場所に制限を掛ければ止まってくれます。
今回のコーディングで学んだベジェ曲線や角度の求め方は他の場面でも使えそうです。本当に勉強になりました。
Processing は弄っていると「あれは表現できるだろうか」「あれもやってみたい」と試してみたいことが浮かび上がります。アイデア次第で良いものが作れるというのは面白いですね。
たくさんの人が Processing を使っているので、他の人が作った作品を見ると良い刺激になります。「これはどうやってコードで書くのだろう」「自分でもできるだろうか」と試してみたくなります。他の人の作品を見るには「OpenProcessing」というサイトが良いです。
興味が湧いた人は是非やってみましょう。Processing は公式サイトにあるソフトでコードを書いてすぐに試せて、本当に手軽に始められます。エラーもしっかり出してくれますし、分かり易いです。
これからも少しずつ弄っていこうと思います。