KeiSato Design works works

2015.03.18

CANVAS, DESIGN, JS

CANVAS

I designed a new expression method by canvas. I used a Paper.js.

最近CANVASを使用したサイトが増えてきましたので、
僕も挑戦してみることにしました。

 

自分の描いたPANDAを読み込み、マウス位置との距離から移動させるアニメーション。

01

 

4色のラインをパスから構築しsin関数と時間から波打たせるアニメーション。

 

02

 

マウスで描けるラインアニメーション。

03

 

宇宙って確かこんな感じ、を表現したユニバース。

04
3日間ほど試した結果、なかなか面白いデザインになりました。一昔前までFlashでなければ難しい表現がCANVASでここまで再現できるのは驚きですね。SPでもものによっては軽快に動きます。

 

見切れる場合はリロードしてご覧ください。
Links:
PANDA
LINE
Feeling
My universe