前回から一か月くらい更新してません。
更新しようと思えばなんなりと書く事は有るのですが、やはりそれなりの気力と惰性が無ければなかなか難しいものですね。

ちょっと話が逸れるのですが、最近このブログへのアクセスが一時的に急激に伸びるという事件が有りました。
夜トイレに行くのが怖い事への自分なりの対処法を書いた記事だったのですが、有名 ( ? ) Twitter アカウントの方にその記事に関するツイートをして頂いた様です。アクセス数が今まで見た事の無い桁になったので驚きました。ありがとうございました。

自分で描いた女の子を動かしたい

さて、今回のメインはこちらです。
アニメを見ていると 「 何の変哲の無い造形のキャラクターでも、ストーリーや動きや声が付くと可愛らしさが何倍にも跳ね上がるのではないか 」 と思える事が多々有ります。
「 自分が描いた女の子でもその恩恵を受けられるのでは…? 」 この作品はそんな希望から生まれました。

wait

待ち合わせ女の子概要

この女の子は只々、雪降る待ち合わせ場所でなかなか来ない相手を待っています。
現在の所、
・ 雪が降る
・ キョロキョロする
・ 瞬きする
・ 白い息を吐く
以外のギミックは有りません。
お触り機能とか有りませんので悪しからず。
今後はひっそりバージョンアップするかもしれませんが、技術力と気力から考えて劇的に機能アップする事は無いでしょう。

一応画面に右下辺りにマウスカーソルと合わせると HELP へのリンクが現れますが、特に見るべきものは有りません。
ブラウザの開発者ツールのコンソールから操作するための関数を少し用意しています。

活用方法

特に無いと思いますが、女の子の視線が欲しいときはスマホで顔の部分を拡大表示してどこかに立てかけておけば良いと思います。

目の描画に HTML5 CANVAS を使用

視線と瞼の動きを別々で制御したかったので、瞳をマスク処理する必要が有りました。
ブラウザ上でマスクを実現する方法は幾つか有る様でしたが、より多くのブラウザでサポートされている CANVAS を利用する事にしました。

始めは clip() を使用してパスによるマスクを行っていたのですが、位置合わせが難しかったり画像をクリアしてもマスクの境界線にゴミが残ったりして使いにくいものでした。
最初は clip() によるマスクしか無いと思い込んでいたのですが、後で globalCompositeOperation = source-atop という最も理想的な手法が存在する事に気づき、最終的に非常に綺麗かつ簡単にマスクする事が出来ました。
source-atop は、Photoshop でいう所のクリッピングマスクと同じ効果になります。

【 参考資料 】
clip() メソッド - Canvasリファレンス - HTML5.JP
globalCompositeOperation プロパティ - Canvasリファレンス - HTML5.JP

Live2D Vector を思い出す

2次元を動かすと言えば Live2D が有名ですね。
僕も試しに自分の絵を元にして胸から上だけの作品を作った事があります。
探してみたらまだ素材集サイトにデータは残っている様でした。

Live2D Vectior 作品 : 試作女の子 ( 2013年 )

作業は非常に大変だった事を憶えています。Live2D Vector は、右上向き・上向き・左上向き…などの各ポイントの絵を登録する事で間をモーフィングの様に補完してくれる技術です。裏を返せば、それら全ての状態の絵を描く必要が有るのです。また、女の子の頭部の3Dイメージが自分の中で曖昧だった為、胡麻化しながら破綻させない様に見せるのにも苦労しました。

Live2D Vector は巷で話題になっている Live2D とは別です。アナログ風のイラストも動かせる本家とは違いベクターイラスト限定の製品で、当時無料で試せるのがそれだけだったと思います。
現在は本家の Cubism Editor が無料で使える様ですので、また機会と気力が有ったら挑戦してみたいです。

まとめ

最初に当ブログのアクセス数が一時的に増えた事を書きましたが、それはそれで嬉しいのですが、もっとイラストで注目させる事が出来たらと思う今日この頃です。