この記事は、以下の記事の続きです。
●JavaScriptライブラリ「g.js」の Quick Start を試してみる - Qiita
https://qiita.com/youtoy/items/264e4bc92aaf3ebec94c
上記の記事の中で試した、g.js公式のクイックスタートの内容に、p5.js を混ぜ込んでみようと思います。
p5.js を混ぜ込むために行うこと
p5.js を混ぜ込むという話について、具体的にやることをここで補足します。
主な変更点は1つだけで、「g.js側で用意されていた canvas要素を、p5.js のものを利用する形に変更」する、という内容です。
簡単に言うと、p5.js で drawingContext を利用しつつ、という方向の話です。
p5.js と g.js を組み合わせる
ここから、冒頭で掲載していた Qiita の記事でも用いた、g.js公式のクイックスタートをベースに進めていきます。
ソースコード
ここで、最初にソースコードを掲載しつつ、その後に補足を書く形にしていきます。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
<script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>g.jsをp5.jsと組み合わせて試す</title>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<h1>g.jsをp5.jsと組み合わせて試す</h1>
<script>
let canvas;
function setup() {
canvas = createCanvas(500, 500);
background(200);
const ctx = canvas.drawingContext;
ctx.translate(width / 2, height / 2);
let path = g.ellipse(0, 0, 100, 100);
path = g.colorize(path, 'teal');
path.draw(ctx);
}
</script>
</body>
</html>
補足
p5.js のライブラリの読み込み
まず、p5.js を利用するために、冒頭でライブラリの読み込みを行う部分を追加します。
以下の p5.js公式のページに CDN からの読み込み方法が書いてあるので、それを使いました。
●get started | p5.js
https://p5js.org/get-started/
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
g.js側で用意していた canvas の削除
そして、g.js公式のクイックスタートでは、body と script の間に書いてあった、以下を削除します。
<canvas id="c"></canvas>
これは、p5.js で生成される canvas を用いる形に変更するためです（こちらが不要になるためです）。
g.js で p5.js の canvas を扱う
次に、g.js で p5.js の canvas を扱えるようにします。
記事に上で軽く補足を書いていたとおり、p5.js で drawingContext を利用します。
ソースコードでは、具体的に以下の部分が該当します。
let canvas;
function setup() {
canvas = createCanvas(500, 500);
background(200);
const ctx = canvas.drawingContext;
...
公式リファレンスでいうと、このあたりの話です。
●reference | drawingContext
https://p5js.org/reference/#/p5/drawingContext
なお、 const ctx = canvas.drawingContext; と書いた部分は、以下のやり方でも大丈夫です。
const ctx = canvas.elt.getContext('2d');
2つ目のやり方は、以下の公式リファレンスを見ると分かりますが、「p5.Element が持つ HTML element を取得して、そこに getContext('2d') での処理を行っている形」です。
●reference | elt
https://p5js.org/reference/#/p5.Element/elt
●reference | p5.Element
https://p5js.org/reference/#/p5.Element
canvas = createCanvas(500, 500); の部分で、canvas として保持されるのが、HTML の canvas ではなく p5.Element になるため、eltを使ってやる必要があります。
おわりに
g.js ・ p5.js の 2つの JavaScriptライブラリの組み合わせを、g.js公式のクイックスタートをベースに試す、ということをやってみました。
引き続き g.js を試していくのと、p5.js との組み合わせを模索していくのを、それぞれやっていければと思います。
@tetunori_lego さんが使われていた方法
前の記事にも掲載していた、 @tetunori_lego さんのツイートに書かれている作品がありましたが、そちらを見てみると draw(drawingContext) としてしまうやり方もあるようでした。
FYIですが、g.jsはcompound領域をとることができたり便利なところもあり、たまに使って作品作っています。https://t.co/sNd2shsC7jhttps://t.co/IfJmwb2gDZ
— Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) February 5, 2022
なお、たまにエラーで止まる不具合があるので以下ツイートの通り、修正したバージョンを公開していたりします。https://t.co/Kz43nv01Lv
