g.js ・ p5.js の 2つの JavaScriptライブラリの組み合わせを試す（g.js公式の Quick Start をベースに）

この記事は、以下の記事の続きです。

●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 を利用](https://p5js.org/reference/#/p5/drawingContext)しつつ、という方向の話です。

## p5.js と g.js を組み合わせる
ここから、[冒頭で掲載していた Qiita の記事](https://qiita.com/youtoy/items/264e4bc92aaf3ebec94c)でも用いた、[g.js公式のクイックスタート](https://g.js.org/guide/quick-start.html)をベースに進めていきます。

### ソースコード
ここで、最初にソースコードを掲載しつつ、その後に補足を書く形にしていきます。

```html
<!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/

```html
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
```

#### g.js側で用意していた canvas の削除
そして、g.js公式のクイックスタートでは、body と script の間に書いてあった、以下を削除します。

```html
  <canvas id="c"></canvas>
```

これは、p5.js　で生成される canvas を用いる形に変更するためです（こちらが不要になるためです）。

#### g.js で p5.js の canvas を扱う
次に、g.js で p5.js の canvas を扱えるようにします。
記事に上で軽く補足を書いていたとおり、[p5.js で drawingContext を利用します](https://p5js.org/reference/#/p5/drawingContext)。

ソースコードでは、具体的に以下の部分が該当します。

```javascript
        let canvas;
        function setup() {
            canvas = createCanvas(500, 500);
            background(200);

            const ctx = canvas.drawingContext;
            ...
```

公式リファレンスでいうと、このあたりの話です。

●reference | drawingContext
　https://p5js.org/reference/#/p5/drawingContext
![drawingContextについて](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4a3a5595-0a3f-73d6-ef5a-32f4d6d0f9a3.png)

なお、 `const ctx = canvas.drawingContext;` と書いた部分は、以下のやり方でも大丈夫です。

```javascript
            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](　https://p5js.org/reference/#/p5.Element
) になるため、[elt](https://p5js.org/reference/#/p5.Element/elt)を使ってやる必要があります。

## おわりに
g.js ・ p5.js の 2つの JavaScriptライブラリの組み合わせを、g.js公式のクイックスタートをベースに試す、ということをやってみました。
引き続き g.js を試していくのと、p5.js との組み合わせを模索していくのを、それぞれやっていければと思います。

### @tetunori_lego さんが使われていた方法

前の記事にも掲載していた、 @tetunori_lego さんのツイートに書かれている作品がありましたが、そちらを見てみると `draw(drawingContext)` としてしまうやり方もあるようでした。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">FYIですが、g.jsはcompound領域をとることができたり便利なところもあり、たまに使って作品作っています。<a href="https://t.co/sNd2shsC7j">https://t.co/sNd2shsC7j</a><a href="https://t.co/IfJmwb2gDZ">https://t.co/IfJmwb2gDZ</a><br><br>なお、たまにエラーで止まる不具合があるので以下ツイートの通り、修正したバージョンを公開していたりします。<a href="https://t.co/Kz43nv01Lv">https://t.co/Kz43nv01Lv</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1489791297070469122?ref_src=twsrc%5Etfw">February 5, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

![draw の部分で対応](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f31fe2be-1bb3-832b-94f3-d3bdcb4741a7.png)