Daily Codingをはじめよう

Zachary LiebermanのInstagramとMediumに触発され、2017年は毎日スケッチを書こうとしたが8日分しか書けなかった。

高尾くんの記事やJohn Resigの記事を読み直し、再度やってみようと思い年末から少しずつ準備していた。前回の反省はVanilla JavaScriptでやろうとしたことと、特に目標がなかったこと。それを踏まえて今回はp5.jsを使い、テーマ別に書いていくつもり。

ソースコードは全てGithubに上げているのだけど、Github Pagesでリポジトリからそのままホスティングできるのは非常に便利。

https://hysysk.github.io/dailycoding/

今まで自分がよく書いてきた処理をまとめたり、気になってた表現のアルゴリズムを調べたりして、あれってどうやるんだっけなと思った時にすぐ使えるようにしたい。ライブラリほど作り込まない、スニペットのようなもの…というところまで考えて、アドベントカレンダーに書いたメタ-デザインと繋がることに気付いた。ガイドラインを規則として言葉で定義するのではなく、実行可能なデザインシステムとして思想や手法をコードに落とし込むこと。

手始めに気持ちいい動きを作るべくeasingを調べていたら、flash時代のPenner Easingから洗練されてきた歴史があるという発見があった。それまではパラメータを4つほど渡していたのだが、さまざまな工夫の甲斐あって、0から1までの値を受け取って、何らかの式を通して0から1までの値を返せば良いということになっている。非常にシンプルなので再利用性が高く、他の言語にも簡単に移植できる。その上でどれだけ遊べるかというのは、日々のスケッチで挑戦していくことだ。

ひとまずこれまで書いたものを振り返る。

• 20171230 とりあえず並べてみた。複数のオブジェクトに異なるアニメーションを適用。
• 20171231 ローディングアニメーション的な動き。
• 20180104 複数のアニメーションを続けて実行。定義部分と実行部分を分離できた。
• 20180105 Tween系ライブラリにあるDelay機能を再現し、エフェクトを作った。

単にスキンを変えてバリエーションを作るのではなく、ロジック面でも変化がないと成長しないと思うので、そこを意識して振り返るようにしたい。