More than 1 year has passed since last update.

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

Last updated at 2022-02-07Posted at 2022-02-05

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

FYIですが、g.jsはcompound領域をとることができたり便利なところもあり、たまに使って作品作っています。https://t.co/sNd2shsC7j https://t.co/IfJmwb2gDZ

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

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

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

g.js の情報を見ていく

それでは、公式のページを見ていきます。

●g.js
　https://g.js.org/

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

●Reference — g.js
　https://g.js.org/ref/

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

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

クイックスタートを試す

「Quick Start — g.js」のページには、以下でライブラリを読み込めるということが書いてありました。

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

また、以下のサンプルも書いてありました。

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

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