JavaScriptライブラリ「g.js」の Quick Start を試してみる

以下のツイートに書いているとおり、 @tkyko13 さんに聞いて JavaScriptライブラリの「g.js」というものを初めて知りました。
今回の記事の内容は、これを軽く試していく、というものです。

<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>

あと、g.js を知ったという話をツイートしたら、上記のように @tetunori_lego さんから情報をいただいたりもできました。ありがたいです！

ちなみに知った経緯は、こちらのもくもく会に参加している中で雑談をしていて聞いた、という流れでした。
●【ゆるく参加OK】2/5開催ニコニコ！プロトタイピングもくもく会 第18回 - connpass
　https://protoout.connpass.com/event/237271/

## g.js の情報を見ていく
それでは、公式のページを見ていきます。

●g.js
　https://g.js.org/
![g.js トップ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ea7a30a7-f760-b3d7-5a85-22040a8e3f67.png)

どのようなことができるかは、右上のメニューの「Reference」を選んで、表示される内容を見るのが良さそうです。
（個人的に、このページのデザイン、好きだな・良いなと思いました）

●Reference — g.js
　https://g.js.org/ref/
![Reference — g.js](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b3f7cddb-8863-d662-077a-6da67a306353.png)

そして、サクッと試すならクイックスタートを選ぶのが良さそうです。

●Quick Start — g.js
　https://g.js.org/guide/quick-start.html

## クイックスタートを試す
「[Quick Start — g.js](https://g.js.org/guide/quick-start.html)」のページには、以下でライブラリを読み込めるということが書いてありました。

```html
<script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>
```

また、以下のサンプルも書いてありました。
![公式サンプル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8e359043-ada2-a652-7c6b-48b20759e3d7.png)

var　は const や let に書きかえたり、ということをやったり、少し変更した部分はありますが、上記の公式のクイックスタートの内容をベースにしたものを作ってみました。

```html
<!DOCTYPE html>
<html>

<head>
    <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>Web Serial（Read）</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <h1>g.jsを試す</h1>
    <canvas id="c"></canvas>

    <script>
        const c = document.getElementById('c');
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        const ctx = c.getContext('2d');
        ctx.translate(c.width / 2, c.height / 2);
        let path = g.ellipse(0, 0, 100, 100);
        path = g.colorize(path, 'teal');
        path.draw(ctx);
    </script>
</body>

</html>
```

なお、上で画像で貼り付けた公式サンプルは、そのまま実行すると黒い円が表示されると思います。ソースが書いてあった下を見てくと、以下のような記載があり、これを加えると色付の円を描かれるようになります。
![色をつける](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5eeb9e37-9b55-13d2-fcfe-4d257bf22f2e.png)

自分が用意したものは、その色をつける部分も追加済みのものになります。
それを実行してみると、以下のとおり想定通りの結果が得られました。
![Quick Start を見て作ったもの](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9d5b4f20-ff74-a008-a359-2b0ed06cd8b7.png)

## おわりに
今回、JavaScriptライブラリ「g.js」を軽く試してみました。

リファレンスを見ていると色々な処理が扱えるようで、ざっと見た中では以下の [glow](https://g.js.org/ref/glow.html) が気になったりしました。

![glow](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/810b2d7d-af03-a04d-db61-6bf74e61b15c.png)

上記も含め、いろいろ g.js を試してみられたらと思っています。

### 【追記】 その後、p5.js との組み合わせを軽く試しました
●g.js ・ p5.js の 2つの JavaScriptライブラリの組み合わせを試す（g.js公式の Quick Start をベースに） - Qiita
　https://qiita.com/youtoy/items/912dcc43b1dcd2dcb9d5