12月ということで背景に雪を降らすパーティクルをサクッと作ってみた

# はじめに
パーティクル（particle）とは、その名の通り「小片」とか「粒子」といった意味です。
フワフワと動き回る感じの背景デザインで、ウェブサイトに結構使われてたりするので、
見たことある方も多いのではないでしょうか。

今回は12月ということで、背景に雪を降らすパーティクルを作っていきたいと思います。

こちらの記事は金属加工プラットフォームを開発・運用する[Catallaxy](https://catallaxy.me/)の[Catallaxy Advent Calendar 2022](https://qiita.com/advent-calendar/2022/catallaxy)の12/6の記事となります。

https://qiita.com/organizations/catallaxy-dev

# 早速、作ってみよう

まずはこちらのサイトを開きます。

https://vincentgarreau.com/particles.js/#default

このサイトは、JavaScriptでパーティクルを作成するためのジェネレータ的なサイトです。
作成したパーティクルのソースコードを取得して、ローカルで表示することを目指していきます。

画面右上のコントローラーで様々な設定が可能です。
今回は雪なので、DefaultからSnowに変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/d8ee8d82-99ec-795d-ff59-7c9943a4292e.png)

少し雪の落ちるスピードが早いので、落下するスピードを変更してみたいと思います。
particleesのmoveを開き、speedを3に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/e1f9a226-9243-39d1-d151-10577913b12d.png)

いい感じの雪になってきましたので、
次は背景色を変更してみます。

page background(css)を開いて、background-colorを#000000に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/99fd98bb-ee97-9752-13bd-9fc292f3d767.png)

雪の夜景っぽくなりました。

ここまで設定できたら、この調整したパーティクルのソースコードを取得したいので、
右上のCodePenを押してparticles.js demoを開きます。

ちょっと見づらくて申し訳ないのですが、赤で囲ったところをコピペして保存します。
ちなみにこのCSSの部分は使いません。

![ダウンロード (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/d02099e4-7385-8447-3038-5d15ed4c8700.png)

※コピペしたソースコードを貼り付けて、
ローカルにHTML、CSS、JavaScriptファイルを作成していきます。

```
├─ css
│   └─ style
│
├─ index.html
└─ particle.js  
```

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div id="particles-js"></div>
  <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
  </script>
  <script src="particle.js"></script>
</body>

</html>

```

```javascript:particle.js
particlesJS("particles-js", {
  particles: {
    number: { value: 400, density: { enable: true, value_area: 800 } },
    color: { value: "#fff" },
    shape: {
      type: "circle",
      stroke: { width: 0, color: "#000000" },
      polygon: { nb_sides: 5 },
      image: { src: "img/github.svg", width: 100, height: 100 },
    },
    opacity: {
      value: 0.5,
      random: true,
      anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false },
    },
    size: {
      value: 10,
      random: true,
      anim: { enable: false, speed: 40, size_min: 0.1, sync: false },
    },
    line_linked: {
      enable: false,
      distance: 500,
      color: "#ffffff",
      opacity: 0.4,
      width: 2,
    },
    move: {
      enable: true,
      speed: 3,
      direction: "bottom",
      random: false,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
    },
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: { enable: true, mode: "bubble" },
      onclick: { enable: true, mode: "repulse" },
      resize: true,
    },
    modes: {
      grab: { distance: 400, line_linked: { opacity: 0.5 } },
      bubble: { distance: 400, size: 4, duration: 0.3, opacity: 1, speed: 3 },
      repulse: { distance: 200, duration: 0.4 },
      push: { particles_nb: 4 },
      remove: { particles_nb: 2 },
    },
  },
  retina_detect: true,
});

```

背景を真っ黒にするCSSだけ記載します。

```css:style.css
body {
  background-color: black;
}

```

実際にindex.htmlをブラウザで開いてみて、雪が降っていたら完了です。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGKrJQb" data-user="ryota-shimajiri" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryota-shimajiri/pen/bGKrJQb">
  Untitled</a> by 島尻 亮汰 (<a href="https://codepen.io/ryota-shimajiri">@ryota-shimajiri</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 余談

もうすぐクリスマスなので、雑ですがサンタも走らせてみました。
0.5xで見てもらえるとちょうど良いかもしれません。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNyewmW" data-user="ryota-shimajiri" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryota-shimajiri/pen/oNyewmW">
  Untitled</a> by 島尻 亮汰 (<a href="https://codepen.io/ryota-shimajiri">@ryota-shimajiri</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

大きく見たい方は↓でも見れます。

https://codepen.io/ryota-shimajiri/pen/oNyewmW

おわり