ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

インタラクティブコーディング勉強会 第2回「三角関数」でプロペラを回す

2014/11/01, cocopon

先週開催された第1回に引き続き、第2回の参加記録。前回から参加者がさらに増えて、勉強会感も増してきた。

(勉強会のまとめページはこちら)

今回のお題は「三角関数」

三角関数。「サイン、コサイン、タンジェント」の呪文は、多くの人が覚えているはず。肝心の中身はすっかり忘れてしまったという人もいるだろうけど…。

ある人にとっては、角度からX, Y座標が計算できる便利な道具。
Untitled

またある人にとっては、一定周期で振動する波。
sincos

その性質さえ押さえておけば、深い知識がなくてもインタラクションデザインに活かすことができる。三角関数の簡単な説明のあとは、先週と同じくひたすらもくもく作業する。

深津さんによる作例「宇宙の標本」

講師役をつとめる深津さんの作品、宇宙の標本

space

三角関数の組み合わせで座標を弾き出して点を打ちまくり、その残像のカタマリをひとつの「銀河」として、パラメータを変えたものを並べ…といった感じだと予想。大きなキャンバスに並んだ様子が圧巻。

いわや氏の作品

THE GUILD期待のスーパーアルバイターいわや氏の作品。

静止画は油絵のようでもあり、重ね塗りされていく様子は動脈のようでもあり、とてもおもしろい。深津さんと奥田さんの2人にチューニングされていく様子もすごかった。

あるみかん先生の作品

あるみかん先生の作品は、ゴッホのストロークを三角関数で再現したもの。

「Processingは久しぶり」と言いつつ、形になるまでが光速だった。絵をベースにしているから質感もあるし、重ね塗りや曲線によって本物に近い雰囲気が出ている。すごすぎる…。

自分の作品1: 星クズ

自分はというと、なかなか形にできず腐りかけていた……○| ̄|_

苦しみつつも、何とかひとつこさえる。

20141030_stardust

下図のような軌跡で等間隔に点を打つ。残像を残しつつ花びらの数をアニメーションさせていく。

IMG_3174

一応完成はしたけど、何だか納得できない…。このスケッチからは三角関数の匂いがしない。この日はここで切り上げ、後日リベンジすることに。

作品2: RGBライト

寝るときも通勤時も三角関数が頭をぐるぐるする。その中で出てきたのが、「円周に三角関数の波を乗せるといい感じの形になるのでは」というアイディア。

image

さっそく実験してみると…いける!そのまま一気に仕上げる。

20141031_rgb

赤、緑、青、それぞれの色で円形を作り、加算方式で色を重ねた。フニフニ具合がいい感じに出たと思う。

作品3: プロペラ

調子に乗って、そのまま3作目。前作の形を応用し、パラメータを変えてプロペラに。回転するとだんだん円に近くなり、速度が戻るころには羽の枚数が変わっている…というもの。

20141101_spinner

速度の変化にも三角関数を使っているのだけど、そのままでは加速感が弱い。強調するために、こんな感じでパラメータを調整することにした。

2014-11-01 20.04.09

縦軸が回転速度。bの値を変えることで、三角関数の波を歪ませることができる。

speed

これを大きめに設定してやれば、はじめはゆっくり、途中から急に加速する動きが表現できる。

成果のまとめ

この勉強会の成果は、ひとまずTumblrにまとめていくことにした。よかったらこちらも見てやってください。

(勉強会のまとめページはこちら)