ART No.1

2017/09/18

web制作

ART No.1の作り方を紹介します。
依存する外部JSは以下の二つです。

点と線はcanvas、グラデーションはcssで描画しています。

目次

  1. 完成形
  2. 点をランダムに配置する
  3. 点を線で繋ぐ
  4. 位置が近い点だけを線で繋ぐ
  5. 点の位置をアニメーションで動かす
  6. CSSのグラデーションをアニメーションさせる

完成形

まずは完成形を先にお見せします。


点をランダムに配置する

初めにcanvasから実装していきます。
ページを読み込む度に、点を10個ランダムに配置します。



点を線で繋ぐ

点の位置を取得して、線で繋いでみます。
(コードの差分をハイライトしています)


93行目に canvas の初期化を追加したので、88行目の描画処理を97行目に移動しています。

追加した linePathSet で全ての点の位置を line_path 配列に代入します。
lineDraw 内の move_toline_to を繰り返し、点を線で繋いでいます。

96行目の point(起点) を points[0] と仮定します。
102行目から始まるループで point の位置から points[0] ~ points[9] の位置に line_to で線を引きます。
線を引いた位置から point の位置に move_to で移動します。
この動作を繰り返す。

↓ 線を引き、元の位置に戻るを繰り返すイメージ

線を繋ぐ処理のイメージ


位置が近い点だけを線で繋ぐ

このままでは全ての点が線で繋がるので、見た目がぐちゃぐちゃします。
見た目を改善する為に、今度は点の数を絞りつつ位置が近いものだけを線で繋ぐようにします。


関数 getDist を追加しました。
これは、点1(x1、y1) と 点2(x2、y2) の距離を求める関数です。

次に linePathSet を、起点から近い位置だけを line_path に代入するよう調整しました。

join_len で線の数を定めています。
今回の場合1つの点に、2本の線を繋ぐようにしています。


点の位置をアニメーションで動かす

ここまで実装すれば、ほとんど完成しています。
あとは点の位置をアニメーションで動かして line_path の位置もアップデートするだけです。


Pointに move を追加し、set のタイミングで実行します。

move でTweenMaxのアニメーション機能を使い、位置(x, y)を動かしています。
移動する位置と、アニメーションに掛ける時間は乱数で取得。

onUpdate でアニメーション中の x, y を自身の位置に上書きしています。
onComplete でもう一度 move を実行し、アニメーションをループさせています。

点の位置が常に変わるようになったので linePathSetlineDrawlineAnim の中に移動して、ループさせます。

点の初期位置を決め打ちにする

64行目~65行目の x, y を中央に設定することで、完成系のように中央から広がる形になります。

これでcanvasの実装は完了です。


CSSのグラデーションをアニメーションさせる

背景をCSSのグラデーションで作成し、animationで左右に動かします。
最後にCSSのブレンドモードでcanvasと背景を馴染ませます。


完成です。
point_len で点の数、join_len で線の数を調整できます。
IE11、Edgeは mix-blend-mode に対応していません。
Can I use(mix-blendmode)


SNSでシェアする

コメントを残す