先週開催された第1回に引き続き、第2回の参加記録。前回から参加者がさらに増えて、勉強会感も増してきた。
三角関数。「サイン、コサイン、タンジェント」の呪文は、多くの人が覚えているはず。肝心の中身はすっかり忘れてしまったという人もいるだろうけど…。
ある人にとっては、角度からX, Y座標が計算できる便利な道具。
またある人にとっては、一定周期で振動する波。
その性質さえ押さえておけば、深い知識がなくてもインタラクションデザインに活かすことができる。三角関数の簡単な説明のあとは、先週と同じくひたすらもくもく作業する。
三角関数の組み合わせで座標を弾き出して点を打ちまくり、その残像のカタマリをひとつの「銀河」として、パラメータを変えたものを並べ…といった感じだと予想。大きなキャンバスに並んだ様子が圧巻。
THE GUILD期待のスーパーアルバイターいわや氏の作品。
ヴィジュアルプログラミング勉強会 @ THE GUILD 開催中!今日のテーマは三角関数〜@fladdict さんと @alumican_net さんに教わりながらつくったものを,@cocoponさんのgif出力ライブラリにて出力! pic.twitter.com/W5j8etmovE
— akira108 (@hoshi_gaki) October 30, 2014
大きいサイズ! pic.twitter.com/lMHc0VX30Y
— akira108 (@hoshi_gaki) October 30, 2014
静止画は油絵のようでもあり、重ね塗りされていく様子は動脈のようでもあり、とてもおもしろい。深津さんと奥田さんの2人にチューニングされていく様子もすごかった。
あるみかん先生の作品は、ゴッホのストロークを三角関数で再現したもの。
ぐるぐる。 http://t.co/Qu2aW2SWkz
— Yukiya Okuda / THE GUILD / alumican (@alumican_net) October 30, 2014
「Processingは久しぶり」と言いつつ、形になるまでが光速だった。絵をベースにしているから質感もあるし、重ね塗りや曲線によって本物に近い雰囲気が出ている。すごすぎる…。
自分はというと、なかなか形にできず腐りかけていた……○| ̄|_
ふかつさんもおくださんもすごかったなー。積んできた経験の量が圧倒的にちがう。自分はシンプルな三角関数を前に、どうしたらきれいに見えるかまったく閃かなくて、手が止まってしまった。
— cocopon (@cocopon) October 30, 2014
苦しみつつも、何とかひとつこさえる。
下図のような軌跡で等間隔に点を打つ。残像を残しつつ花びらの数をアニメーションさせていく。
一応完成はしたけど、何だか納得できない…。このスケッチからは三角関数の匂いがしない。この日はここで切り上げ、後日リベンジすることに。
寝るときも通勤時も三角関数が頭をぐるぐるする。その中で出てきたのが、「円周に三角関数の波を乗せるといい感じの形になるのでは」というアイディア。
さっそく実験してみると…いける!そのまま一気に仕上げる。
赤、緑、青、それぞれの色で円形を作り、加算方式で色を重ねた。フニフニ具合がいい感じに出たと思う。
調子に乗って、そのまま3作目。前作の形を応用し、パラメータを変えてプロペラに。回転するとだんだん円に近くなり、速度が戻るころには羽の枚数が変わっている…というもの。
速度の変化にも三角関数を使っているのだけど、そのままでは加速感が弱い。強調するために、こんな感じでパラメータを調整することにした。
縦軸が回転速度。bの値を変えることで、三角関数の波を歪ませることができる。
これを大きめに設定してやれば、はじめはゆっくり、途中から急に加速する動きが表現できる。
この勉強会の成果は、ひとまずTumblrにまとめていくことにした。よかったらこちらも見てやってください。