Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
artboard

【スクリプトあり】p5.jsで簡単に要素にパーティクルを追加する



こんにちは!
時々、webサイトのヘッダや背景に、こういうパーティクルが動いている事、ありますよね?

なんかかっこいいな〜と思ったので、このパーティクルが簡単に作れるp5.jsファイルを作ってみました。

p5.jsファイルを使うには

人が作ったp5.jsのファイルを使うのは、意外にも簡単です。
p5.jsってそもそも何?という方は、こちらの記事をご覧ください。
p5.jsでwebページにアニメーションを作ろう - 01

まず、htmlのヘッダファイルにp5.jsのcdnを記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

次に、ダウンロードしたp5.jsのファイルをアップロードし、同じようにリンクします。

<script src="assets/js/sketch.js" type="text/javascript"></script>

こんな感じでしょうか。

そして最後に、パーティクルを入れたい場所のdiv要素に、id="p5Canvas"を加えてあげてください。

cursor_%e3%81%a8_index_html_-_yaparticle_-____ideaprojects_yaparticle_

何も無いページに挿入するだけなら、これだけです!
肝心のファイルは以下からダウンロードください。

設定を変更する

さて、パーティクルの大きさや数、早さなどを変更したい場合には、スクリプトの最初の方にある/*settings*/に手を加えることによって簡単に思い通りのパーティクルを作ることが出来ます。

    num = 20;//パーティクルの数。初期値は20。
    minSize = 5;//パーティクルの最小値サイズ。初期値は5。
    maxSize = 15;//パーティクルの最大サイズ。初期値は15。
    partColor = color(0, 0, 255, 60);//パーティクルの色。r,g,b,a
    lineColor = color(100, 100, 255, 20);//ラインの色。r,g,b,a
    distance = 100;//どのくらいの距離の場合線を描画するか。初期値は100px。
    minSpeed = 0.1;//パーティクルの最低速度。初期値は0.1。
    maxSpeed = 0.3;//パーティクルの最高速度。初期値は0.3。
    sameDirection = false;//パーティクルが同じ方向に進むか、バラバラの方向に進むか。falseの場合バラバラの方向に進む。
    w = canvasElement.clientWidth;// div要素の大きさを取得。ここにpxで実数を指定することも出来る
    h = canvasElement.clientHeight;// div要素の大きさを取得。ここにpxで実数を指定することも出来る

詳細は右側にコメントとして書いてありますが、数値を変更するだけでパーティクルの大きさや挙動を変えることが出来ます。

まとめ

世の中にはどうもprticle.jsなるものも出回っているそうですが、恐らく設定やdiv要素にfix出来る点なんかはこっちのほうが簡単なはず!
是非お試しください。

NEXT
文字と色を指定するだけ!ファビコンジェネレーター

  関連記事

p5js
p5.jsでwebページにアニメーションを作ろう - 02 webサイトで公開しよう

さて、前回にご紹介したp5.jsですが(おや、まだご覧になっていない?では1つ前 ...

artboard
【2017年1月】今個人でECサイトを作るなら?【徹底比較】

さて、主・副問わず、個人事業をされている皆さまにおかれましては、内容によっては個 ...

artboard-2
画像素材やベクター素材、どうやって管理してますか?タグ付けしてすぐ検索出来るLingoが便利過ぎてヤバい

こんばんは、僕です。 皆さま、画像素材やsvg素材はどのように管理されていますで ...

seokeywords
【SEO】ブログのアクセスアップしたい?じゃあキーワードについてちょっとおさらいしておこう。

ブログのアクセスが伸びてきて嬉しい僕です。 この前お仕事でちょっとSEOについて ...

artboard
最近良く聞くCDNって何…?XSERVEの「mod_pagespeed」とどちらが効果的?

こんにちは、rebuild.fmに癒やしを求める日々の僕です。 ところで、CDN ...

-p5.js, WEB開発