2022.1.10 更新
皆さまごきげんよう。
本日は前回の続き、p5.jsで作ったスケッチを任意の要素に出力してみようと思います。
前回の記事はこちら→ウェブサイトの背景画像にp5.jsを使う方法
目次
1.p5でsketch.jsファイルを作る
今回もp5.js エディタでお絵かきから始めましょう。
今回作ってみたのはこちらのスケッチです。
code
var sketch;//出力するファイルの名前を定義
var dot = {
x: 0,
y: 0
}
var col = {//色の変数
r: 0,
g: 0,
b: 0
}
function windowResized() {
resizeCanvas(windowWidth, 400);
background(20);//リサイズ後に色を再描画
}
function setup() {
canvas = createCanvas(windowWidth,400);
canvas.position(0,0);//canvasをページの原点に固定
canvas.style('z-index','-1');//canvasを後ろに移動する
background(20);
}
function draw() {
frameRate(10);
col.r = map(mouseX,0,windowWidth,0,255);//map(value, start1, stop1, start2, stop2, [withinBounds])
col.g = random(0, 100);
col.b = map(mouseY,0,windowHeight,0,255);
dot.x = random(0, windowWidth);
dot.y = random(0, windowHeight);
noStroke();
fill(col.r, col.g, col.b,70);
ellipse(dot.x, dot.y, 30, 50);
}
new p5(sketch, "container1");//このsketchを、htmlで指定したIDの要素へ出力する今回のポイントは以下の2つです。
- 1行目で、出力するファイルの名前を定義する
- 一番最後の行で、このファイルをhtmlで指定したID（ここではcontainer1）へ出力する記述をする
このファイルをp5test2.jsと名前を付けて保存しました。
2.htmlファイルを作る
今回はメニューバーの下、サイトタイトルの背景にp5スケッチを表示させてみようと思います。
headタグの中に先ほど作ったスケッチjs(p5test2.js)とp5のcdn2種類、計3つのスクリプトを読み込ませておいてください。（7～9行目）ポイントは81行目、p5スケッチを出力させたいdivに、ID名”container1″を付けているところです。
先ほど作ったスケッチjsの最後の行にnew p5(sketch, “container1”);と書いたものがここでリンクしております。
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="p5test2.js"></script>
<style type="text/css">
html,body{
margin: 0;
height: 100%;/*コンテンツの内容に合わせて画面の高さが伸びる*/
color:#444;
font-family:sans-serif;
}
#wrapper {
width: 100%;
position:relative;
/*子要素のfooterをposition: absolute; bottom:0;にして下に固定する*/
min-height: 100%;
}
h1{
font-size:4em;
}
p{
margin:6em;
line-height: 1.5em;
}
nav{
width: 100%;
position: fixed;
background: #545;
color: #eee;
}
li{
list-style: none;
display: inline-block;
font-size:1.3em;
margin: 0.8em;
}
div{
overflow-x: hidden;
text-align: center;
}
#container1{
width: 100%;
height:20em;
}
.entry-title{
margin-top: 2.7em;
text-align: center;
color: #ddd;
}
.section1{
background-color: #dbd;
height: 100vh;
}
footer{
height:5em;
width: 100%;
background: #545;
/*下の2行 ↓↓ 親要素(ここでは#wrapper)にposition:relative;を指定することで下に固定する*/
position: absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div id="container1">
<h1 class="entry-title">lorem ipsum</h1>
</div>
</header>
<div class="section1">
<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.
<br>
<br>
leo ut tellus facilisis, vitae fermentum turpis sagittis.<br>
Sed vel ligula a justo tempus vulputate. Nulla vitae commodo<br>
Quisque ut gravida ligula, nec mollis dui.<br>
orci, pharetra ultricies arcu. Praesent lorem purus,<br>
</p>
<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>
orci, pharetra ultricies arcu. Praesent lorem purus,<br>
tincidunt eu vehicula vel, tristique quis quam.
<br>
<br>
leo ut tellus facilisis, vitae fermentum turpis sagittis.<br>
Sed vel ligula a justo tempus vulputate. Nulla vitae commodo<br>
Quisque ut gravida ligula, nec mollis dui.<br>
orci, pharetra ultricies arcu. Praesent lorem purus,<br>
</p>
<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.
<br>
<footer>
</footer>
</div>
</div>
</body>
</html>3.任意の要素にp5.jsを出力する
手順としては、
- p5.jsでスケッチファイルを作る
- htmlファイルを作り、headタグの中にp5.jsのスケッチファイルとcdn2種類の計3つのスクリプトを読み込ませる
の2ステップです。出来上がりはこちら↓
See the Pen Output p5 to any element by kowalski k (@polkadotsandsky) on CodePen.
ちなみにこちらは、ウィンドウ上のマウスの置かれた位置でドットの色味が変化しますよ。
左上：グリーン系
右上：レッド系
左下：ブルー系
右下：パープル系
のドットが現れますのでマウスの位置を変えて試してみてくださいね。
いかがだったでしょうか？出力したい要素に自由にp5スケッチを表示させることが出来れば、動きのあるサイトも簡単に作れそうですね。
色々実験してみて、ステキなページを作ってみてください。
p5の基本はドットインストールで学べます。
youtubeのDan先生のコーディングトレインも楽しく学べます。Dan先生の授業はノリが良くて楽しいですよ！英語ですが、設定から日本語の自動翻訳を表示させれば全然問題ありません。
引き続きp5スケッチの勉強も一緒に頑張りましょう〜(^^)/
“ウェブサイトの任意の要素ににp5.jsの描画を出力する方法” への4件の返信