2022.1.10 更新
本日はp5.jsで作った作品をウェブサイトの背景画像にしてみたいと思います。簡単にできますのでお試し下さい。
目次
1.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を読み込ませておいてください。（8~10行目）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つのスクリプトを読み込ませる
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公式サイトのリファレンスには、他の図形やそのシンタックスなどが載っておりますので、図形を入れ替えてみたり パラメータを変えてみたりして偶然のアートを楽しんでみてくださいね！
p5の背景、いかがでしたか？以外と簡単だったんじゃないかと思います。
WEBサイトの一部に取り入れるなら、シンプルすぎるくらいのスケッチで充分じゃないかと思います。
次回は任意の要素にp5を出力してみますよ。ではでは(^^)/
“ウェブサイトの背景画像にp5.jsを使う方法” への9件の返信