このチャプターの目次
HTMLにはCanvasという描画機能が標準で用意されている。そのままCanvasを利用してもいいのだが、汎用性のためか、あまり単純とはいえない機能なので、代わりにp5.jsという描画ライブラリを利用したい。p5.jsはProcessingという描画ライブラリをJavaScriptで扱えるように移植したものだ。
この章ではHTML・CSS・JavaScriptを用意して、p5.jsを利用したサンプルコードが動作するところまでを解説する。
HTML・CSS・JavaScriptの準備
まずはHTMLからだ。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css" />
</head>
<body>
</body>
</html>
本書公開時点でのp5.jsの最新バージョンは 1.4.0 なので、それを利用する。あとはJavaScriptとCSSを書くファイルを用意してリンクを貼る。ファイル名は何でもいい。
次はCSSの設定になる。
html, body {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background: #292a33;
}
画面いっぱいにCanvasを広げることがあるので、余白の設定である margin, padding は 0 にしておく。同じく画面いっぱいにCanvasを広げると余計なスクロールバーが出るときがあるので、overflow は hidden にしておく。
背景色は何でもいいのだが、本書で紹介するコード例での大半の背景は、黒に近い #292a33 という色にしており、描画を白に近い色で描く場合が多いので、そこは注意していただきたい。たとえば、背景を白にしたまま、掲載しているコードをそのまま実行すると何も見えなくなるということが起きる可能性がある。
最後にJavaScriptの設定を行う。
function setup() {
createCanvas(windowWidth, windowHeight);
circle(width / 2, height / 2, 50);
}
上記コードをJavaScriptファイルに貼り付けてHTMLをブラウザで閲覧してみよう。画面中央に白い円が表示されれば動作確認は完了になる。