canvasを使用して波を作成してみた

5月のGWという大型連休も終わって早1週間。
GWは地元へ帰っていたんですが、当時毎日乗っていた地下鉄の各駅ごとにのっているロゴを見て、なんてセンスがあるんだろうと毎回思います。

話はそれましたが、これから来る夏を想像して今回は海をイメージできる「波」を、canvasを使用して作成してみました。

サイト作成のあらゆるところで使用できると思うので使ってみようと思っています。

ソースは以下のような感じです。

See the Pen wave by sayuri (@giraffeweb) on CodePen.0

 

lineTo()などを使用してcanvasを描画、波はSIN関数を使っています。
1つの波だけではインパクトが薄かったので今回は波をいくつか時間軸をずらして表現しました。

サイトの一部分に使うだけでも夏っぽさや、海の感じ、他にも緩さをだすときにも使用できると思います。ソースを少し書き換えるだけでも応用が利くので素敵ですよね!

これをすこしアレンジしてもっと面白いことができないか模索中です。
また良いものが作れたら、ここに書き込んでいこうとおもいます。

お楽しみに~!