@fladdictさんのインタラクティブ・プログラミング勉強会で「手触りの作り方」を学ぶ

@fladdictさん（＝深津さん）が開催する勉強会に参加するようになって半年が経ったのでまとめてみます。すごく楽しい。

■ これまでのあらすじ

1. 「インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict」を見かける。
2. こ、こういうのが知りたかった！ということで深津さんに速攻連絡、「立ち見でいいので参加させてください！」と前のめりに頼み込む。
3. 勉強会に初めて参加したのが2014年の年末あたり。THE GUILDの若手メンバーのレベルの高さや、「え、あの作品つくったのあなたですか！？」的なすごい人に萎縮しつつも勉強開始。
4. なんだかんだと毎回勉強会に参加。毎回、新しい発見があって楽しすぎる。
5. （周りのメンバーに比べるとまだまだですが）ようやく勘所っぽいものがわかってきたのでブログにまとめてみる（← イマココ）。

■ 何の勉強会？

上に紹介したブログでも紹介されていますが、インタラクションをデザインするためのプログラミングを学ぶ会です。以下、深津さんのブログから引用。

巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。

文章で表現するのは難しいのですが、「うにょうにょしたり」「もにゅもにゅしたり」といった「手触り感」を実現するための基礎が学べます。個人的には自分に足りていない「オシャレ」とか「イケてる」感を論理的に学べるのがとっても嬉しい。

■ 勉強会では何をしているの？

1. 毎回のテーマごとに深津さんがライブコーディングしながら講義をしてくれます。「色」「乱数」「ばね」とか。15分のこともありますし、30分ぐらいのこともあります。ちなみにツールはProcessingを使います（Java）。
2. そのあとは「じゃ、何か作ってください」と突き放されます笑。90分から2時間ぐらい個々人でテーマに沿った作品を作ります。わからなくなったり、詰まったりしたら深津さんに聞くとアドバイスを貰えます（後述しますがこれがすごい）。
3. 最後に個々人が作ったものを発表して終了です。

■ 何が楽しいの？

深津さんの講義自体は基本の公式とか、ちょっとしたコツとか簡単なものなのですが、個々人が作った作品に対するアドバイスが的確で毎回感動します。

「あー、これはですね、ここをこうするともうちょっとオシャレになりますよ」といいながら2、3行加えるだけで「うぉ、まじか！」みたいになるので、「この人の引き出し、どれだけ・・・」とクラクラきちゃいますね。

彼が付け加えるコードはほんの数行だったりするのですが、「あぁ、そういう使い方か！」という論理的な発見があって勉強になりまくりです（軌跡を半透明にすることで煙のようなエフェクトを出したり、さらにパラメータを変えて粒子が輝くようにしてみたり）。

深津さんによくよく話を聞くと「これに気付くまでに一年ぐらいかかりましたね」といった技もするりと教えてもらえたりするので、あぁ、なんかありがたいなぁ涙・・・と感動してしまうことしきりです。

↑ 勉強会だけでは追いつかないので自習もしています。

↑ あとで紹介しますが、この本がとにかくすごい。

■ で、何つくったの？

他のメンバーの方のレベルが高すぎるので自分的にはかなり恥ずかしいのですがいくつかご紹介。こういう動きを作ってみたかったのですよね・・・。

↑ 初歩の初歩ですが・・・。音声なしです。

ちなみに音声なしなので登場順でつくったものをご紹介。

1. 立体キューブ。マウスの動きでズームします。何もしていないときでもゆっくり動いているのがお気に入り。
2. 立体キューブをたくさん。ちょっと動きがばらけていますが・・・。パラメータをインタラクティブに操作できるパネルをつけはじめたのもこのあたりから。
3. ベジェ曲線のツールもどき。マウスで何かをドラッグする、という動きを作れて嬉しかった。
4. 正方形のフラクタル。ちと色味があれですが・・・。ただフラクタルの仕組みがわかって勉強になりました。
5. 円の変形エフェクト。簡単なものですが、自分の意図する動きになった時は感動・・・。
6. 円をたくさん跳ねさせています。クラスを使ったり、物理演算したり、位置/速度/加速度が指になじんできた感じです。
7. フラクタルの勉強で作った漫画的エフェクト。個人的には黒い円が回転するのがお気に入り。
8. バネを使ったうにゃうにゃ的なエフェクト。バネが作れるようになるとすごく表現に幅が出てきますね。

■ 3冊のバイブル・・・！

深津さんにおすすめしてもらったこの3冊が神すぎる・・・。これ系の業界の人にとっては常識っぽいのですが、個人的には「こんな体系的に教えてくれる本があったなんて！」という意味で衝撃的でした。

ちなみに勉強会は週一なので、平日はこの本のサンプルを写経していたりします。かーなーりー勉強になります。この3冊をマスターすればかなりすごいことになるのではないでしょうか・・・。

まずは「ジェネラティブ・アート」。Processingを使ったレベルの高いアート作品が紹介されています。打ち込んで実行すると「おぉ！」となるので、プログラミング初心者に戻ったような感覚を味わうことができました笑。

そして次が「Generative Design」。英語オンリー＆1万円オーバーなのでかなりハードルは高いのですが、深津さんの勉強会でカバーするようなトピックが解説されています。現在せっせと写経中ですが、先がかなり長い汗。

最後が「Nature of Code」。物理的な現象をコードで表現するための理論が学べます。和訳というか本の体裁がちょっと微妙なので本家サイトで見るのもいいかもしれません（英語ですが中身は一緒です）。

ちなみに著者のDanielさんはProcessing界では有名な人ですね。彼の講義ビデオはVimeoにあがっているので（英語ですが）興味がある人は是非どうぞ。すごくわかりやすいです。

↑ この人です。テンションがやばい笑。

■ その他、参考情報

勉強会のログはこちらでもまとめられています。これを書いている@cocoponさんのレベルが高すぎて毎回へこむ苦笑。

» インタラクティブコーディング勉強会 | ここぽんのーと

また勉強会に興味のある人はFacebookグループを覗いてみるといいかもしれません。

» Interactive Coding

ツイッターもやっています！