ウェブサイトの背景画像にp5.jsを使う方法

皆さま、明けましておめでとうございます。

今年は兎にも角にもアウトプットの年にしていこうと思っております!
(毎年同じことを言っている様な気もしますが気のせいでしょう😅)
どうぞ宜しくお願いしますm(_ _)m

さて、本日はp5.jsで作った作品をウェブサイトの背景画像にするにはどうするか?の備忘録です。動画を使わなくても、画面に動きが出て目を引くこと間違いなしですよ!
意外と簡単に出来ますのでサクッとやってみましょう。

目次

  1. p5.jsでスケッチファイルを作る
  2. シンプルなhtmlファイルを作る
  3. p5をWebサイトの背景画像にする

1.p5.jsでスケッチファイルを作る

簡単なもので良いので、p5.jsでお絵かきをしてみます。
p5.jsにはとても便利なエディタがあるので、今回はこちらを使って作成します。
アカウントを作れば、自分のスケッチを保存しておけるので便利ですよ!

p5.js エディタ

詳しくは公式のp5.jsサイトで学べますので省きますが、
p5.jsをざっくり説明すると…

●function setup() 関数に1回だけ実行される設定を書く
●function draw() 関数に一定の時間間隔(初期値:毎秒60フレーム)で呼び出される描画の設定を書く

これが基本です。(ざっくり過ぎか^^;)
そこに、今回はウィンドウがリサイズされた時にもきちんと描画されるようにwindowResized() 関数も足してみました。

で、今回はこちらのスケッチ↓を使います。ファイル名はp5testsketch.jsにしました。

code

function windowResized() {
    resizeCanvas(windowWidth, windowHeight,WEBGL);//3Dの場合は引数にWEBGLを忘れずに!
    background(30);//再描画後に背景を再描画する
}

function setup() {
    canvas = createCanvas(windowWidth,windowHeight,WEBGL);//2Dの場合は引数にWEBGLは要らない
    canvas.position(0,0);//canvasをページの原点に固定
    canvas.style('z-index','-1');//canvasを後ろに移動する
    background(30);
}
function draw() {
   frameRate(6);
   rotateX(frameCount * random(0,10));
   rotateY(frameCount * random(0,10));
   line(random(200,600),random(200,600),300,300);
   stroke(random(0,255),random(0,255),random(0,255));
}

今回は一応3D描画なので、2行目と7行目のresizeCanvasとcreateCanvasの第3引数にWEBGLと入れないと動きませんのでご注意を。2Dの場合は第3引数は不要ですよ。


もう一つのポイントは9行目のz-indexを-1にして背景画像としてのcanvasを後ろに配置させているところです。

2.シンプルなhtmlファイルを作る

bodyの中にh1とpのみのシンプルなhtmlファイルを作りました。

headタグの中には、先ほど作ったp5testsketch.js、p5のcdnを2種類、計3つのscriptを読み込ませておいてください。cdnはそのままコピペでどうぞ。

html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5の背景</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="p5testsketch.js"></script>

    <style type="text/css">
	    html,body{
           margin: 0 auto;
	       color:#eee;
	       font-family:sans-serif;
	    }
	    h1{
	      font-size:4em;
	    }
	    p{
	      margin:5em;
	      line-height: 1.5em;
	    }
	    div{
		  width: 100%;
		  height: 100vh;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
    </style>
</head>
<body>
   <div class="section1">
	 <h1>LOREM IPSUM</h1>
	 <p>Quisque ut gravida ligula, nec mollis dui.<br>
	  Etiam id massa eu urna faucibus pretium. Proin volutpat<br>
	  leo ut tellus facilisis, vitae fermentum turpis sagittis.<br>
	  Sed vel ligula a justo tempus vulputate. Nulla vitae commodo<br>
	  orci, pharetra ultricies arcu. Praesent lorem purus,<br>
	  tincidunt eu vehicula vel, tristique quis quam.
     </p>
   </div>

</body>
</html>

3.p5をWebサイトの背景画像にする

どうですか?きちんと表示されましたでしょうか。まとめると、

1.p5.jsでスケッチファイルを作る
2.htmlファイルを作り、headタグの中にp5.jsのスケッチファイルとcdn2種類の計3つのスクリプトを読み込ませる

たったの2ステップです。

htmlの中にcanvas要素は作っていないですが、ディベロッパツールで調べてみると自動的にcanvas要素が出来ています。


See the Pen P5 for background image by kowalski k (@polkadotsandsky) on CodePen.

codepenは実験するのにとても便利なのでおすすめです(^^)



最初に作ったp5スケッチも、下記のようにlineをellipse(楕円)に変更し、strokeを無しにして、塗り(fill)を設定してみると、また違った趣になりますよ。
更にbackgroundのカラーを変えてみたり…表現は無限大ですね!

noStroke();
ellipse(random(200,600),random(200,600),50,100);
fill(random(0,255),random(0,255),random(0,255),60);
p5-bg-02


p5公式サイトのリファレンスには、他の図形やそのシンタックスなどが載っておりますので、図形を入れ替えてみたり パラメータを変えてみたりして偶然のアートを楽しんでみてくださいね!



p5の背景、いかがでしたか?以外と簡単だったんじゃないかと思います。
WEBサイトの一部に取り入れるなら、シンプルすぎるくらいのスケッチでも充分じゃないかと思います。
私も簡単なものから始めて、徐々に複雑なスケッチに挑戦していきたいと思います。

次回は任意の要素にp5を出力してみますよ。ではでは(^^)/



One Reply to “ウェブサイトの背景画像にp5.jsを使う方法”

コメントを残す