javascript particles.jsで幾何学的な模様の作り方&使い方 – 背景の設定サンプル付き!

particles.jsとは、幾何学的な模様をcanvas要素で描くライブラリの1つです。

ライブラリとは、行わせたい動作ごとにファイルを分け、使用したり使いやすくしたプログラムの塊のことです。

このライブラリを使うと、ITやAIに関するサービスの最先端感を出したWebページを簡単に作れるようになります。

particles.jsとは?

particles.jsとは、下記のように様々な幾何学的な模様をWebページ上で表示することが出来るjavascriptライブラリです。

 

このように、幾何学的な様々な模様を表現することが出来ます。

参考 公式サイトvincentgarreau

参考 ソースコードGitHub

particles.jsの使い方

particles.jsの使い方を解説します。particles.jsを使うには、2つの手順をを踏む必要があります。

  1. particles.jsブラウザに読み込ませる
  2. HTMLを表示させる場所に設置する
  3. particles.jsを起動&表示させる
  4. particles.jsにどのような表示にするか設定をする

順番に解説していきます。

particles.jsブラウザに読み込ませる

ブラウザに読み込ませるには、HTMLのscriptタグを使ってファイルを指定する必要があります。そのファイルですが、ネット上のCDNを使う方法ソースコードをダウンロードして自分のWebサーバーに設置する方法の2種類があります。

一番簡単なのは、ネット上のCDNを使う方法です。CSNで有名なのが、「cdnjs」「jsdelivr」の2サイトです。今回は「cdnjs」を使います。

STEP.1
particles.jsを検索します

検索窓に「particles.js」と入力します

STEP.2
一番上のライブラリを選択します

一番上にparticles.jsのライブラリが表示されます。GitHubの表示部に「VincentGarreau/particles.js」と書いてあることを確認し、選択します。

1つ下のは、本家のparticles.jsを改造して別の人が提供しているものなので、使わないようにしましょう。

STEP.3
ライブラリのURLをコピーします

ライブラリには、「圧縮済み(.min)」のものと、「未圧縮」ものもがあります。どちらも使える機能は同じです。ただ、ダウンロード速度が早くなるように、余計な空白や文字を削減している点が異なります。

とくに理由がなければ、圧縮済み(.min)の方を選ぶようにしましょう。

STEP.4
HTMLでjavascriptを読み込む

コピーしたURLをscriptタグに貼り付けて、Webブラウザが読み込めるようにしましょう。

終了

表示させる場所にdivやspanでHTMLを設置する

ライブラリの読み込みが出来たら、表示したい場所HTMLのdivやspanを設置しましょう。この時、javascriptでその要素を指定する必要があるので、必ずidを指定する必要があります。

今回はparticles-jsというidを指定します。

これで終了です。

particles.jsを起動&表示させる

particles.jsを実際に動かしてみます。まだどのような表示にするか設定していないので、不格好ですが一応表示できます。

particles.jsにどのような表示にするか設定をする

いよいよ、particles.jsに表示の設定をします。

設定には2種類の方法があります。

  1. javascriptのObjectを使って書く オススメ
  2. 別ファイルにjsonを書いて読み込む

オススメの方法は「javascriptのObjectを使って書く」です。javascriptで書くこと、ソースコードと設定の場所が近くなり、全体が把握しやすくなったり、後で見返した時に混乱を避けられます。

particles.jsの設定方法は、このようにします。

設定は大きく分けて3つのパートに分かれています。

  1. particles – 幾何学的な模様を具体的にデザインするための設定です
  2. interactivity – 模様にマウスが重なった時やクリックした時の挙動を設定します
  3. retina_detect – 高詳細ディスプレイ(Retina Display)に対応するか設定します

具体的なソースコードはこのようになります。

この3つをどのように設定するかで、色々な表示に変えることが出来ます。詳細を具体的に解説すると、長くなってしまうので、よく分かる別サイトを紹介します。

参考 particles.jsを使って簡単に幾何学的なアニメーションを作るLIG

参考 particles.jsを使って要素の背景に美しいアニメーションを表示するInto the Program

particles.jsを使うのにオススメの設定は?

ここまでで、particles.jsの使い方と設定方法を解説しましたが、いっぱい表現がありすぎて、どれがいいのか迷ってしまうと思います。

そこで、ここではオススメの設定を紹介します。

サンプル1: WebサービスやAIなどに関するTOPページに最適

インターネットそのものや、脳内の電気的な繋がり(シナプス)等を表現出来ます。

javascriptの設定は、下記のようになっています。

使われているサンプルサイトとして、「Baseconnect」があります。

サンプル2: 夜のイベントや星空、衛星などに関するTOPページに最適

星が現れたり消えたりという、幻想的なアニメーションを表現出来ます。

javascriptの設定は、下記のようになっています。