JavaScriptライブラリparticles.jsの使い方とエラーの対処方法

2021年8月10日JavaScript

JavaScriptライブラリparticles.jsの使い方とエラーの対処方法を紹介します。

particles.jsの使い方

github公式: https://github.com/VincentGarreau/particles.js/
デモサイト: https://vincentgarreau.com/particles.js/

上記のgithubページより、particles.jsをダウンロードします。
particles.min.jsでもいいのですが、エラーが発生する場合があります。
コードを多少修正すれば使えるようになるので、エラーが発生した場合は、修正しやすいparticles.jsをダウンロードしましょう。
このまま使うとエラーが発生する場合があるので、対処方法も合わせて説明します。

エラー：Uncaught TypeError: 'caller’, 'callee’, and 'arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.Object.deepExtend

上記のエラーが発生する場合、particles.jsのコードを以下のように修正します。

/* ---------- global functions - vendors ------------ */
// Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.Object.deepExtend
// TODO: 上のエラーが出るので要修正
// Object.deepExtend = function (destination, source) {
Object.deepExtend = function deepExtendFunction(destination, source) {
  for (var property in source) {
    if (source[property] && source[property].constructor &&
     source[property].constructor === Object) {
      destination[property] = destination[property] || {};
// TODO: 要修正
      // arguments.callee(destination[property], source[property]);
      deepExtendFunction(destination[property], source[property]);
    } else {
      destination[property] = source[property];
    }
  }
  return destination;
};

「global functions – vendors」というコメントアウトを探して、argumentsのcalleeを使用しないようにすることでこのエラーは解決します。
具体的には関数に名前をつけて、それを使うだけです。

解決方法の参考ソース：https://github.com/VincentGarreau/particles.js/issues/123

particlesをカスタマイズする

上のデモサイトでカスタマイズすることができます。
具体的には、上記サイトに訪れて、右側の設定をいじって、codePenに移動することで、そのソースコードを入手できます。

たとえば、

• numberタブのvalueを増やせばたくさんのparticlesができ、減らせばparticlesが少なくなります。
• colorでparticlesの色を変更できます。
• strokeで線の太さを変えたり、色を変更できます。
• polygonでは多角形を自由にいじることができます。
• imageでimage.srcを設定することでオリジナルのimageを使うことができます。
• typeではcircleにすると、円、starにすると星をparticlesの形にできます。
• sizeでparticlesのサイズを可変できます。
• line_linkedでは、enable_autoにチェックをいれることで、particles同士をつなげることができます。
• また、colorでその線の色を変更したり、distanceでparticles同士の距離をカスタマイズできます。
• interactivityでは、hoverしたときの動作、クリックしたときの動作を選択することができます。

それぞれの設定をいじったら、右上にあるCodePenに移動します。

CustomizedParticles.jsを作成する

上のでもサイトでカスタマイズした状態のCodePenを開くことができます。
そのJSコードをコピーして、プロジェクトにファイルを作成します。

エラー：Uncaught ReferenceError: Stats is not defined

エラーでUncaught ReferenceError: Stats is not definedが出る場合、CustomizedParticles.jsでコピーしたコードの下記部分を削除します。

// TODO: Uncaught ReferenceError: Stats is not definedが出る場合、下を削除
var count_particles, stats, update;
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function () {
  stats.begin();
  stats.end();
  if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
  }
  requestAnimationFrame(update);
};
requestAnimationFrame(update);

これで、Statsが未定義というエラーは消えるはずです。

解決の参考：https://github.com/VincentGarreau/particles.js/issues/95

htmlの作成

htmlファイルに、idを指定します。

<section class="hero">
  <div id="particles"></div>
  <div class="hero__container">
      ...
    </div>
  </div>
</section>

上では、particlesというidを設定しました。
その場合、customizedParticles.jsのparticlesJSの第一引数を同じ名称にします。

particlesJS('particles', {
...
}

これでひもづけできました。

sassファイルの作成

最後に、sassファイルで最低限必要な記述があります。

canvas {
  display: block;
}
#particles {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

デモサイトで特にmodesの部分をいじっていない場合は、canvasがdetext_onに選択されているかと思います。
その場合、canvasをblockにします。
そして、上で設定したid名に上のcssを設定すると表示されるようになります。