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/sNd2shsC7j https://t.co/IfJmwb2gDZ

なお、たまにエラーで止まる不具合があるので以下ツイートの通り、修正したバージョンを公開していたりします。https://t.co/Kz43nv01Lv
— Tetsunori NAKAYAMA | 中山哲法 (@tetunori_lego) February 5, 2022