---
title: "Glisp Help: はじめてのスケッチ"
date: 2022-09-19T05:32:54.000Z
updated: 2026-01-08T14:50:50.247Z
url: https://baku89.com/ja/Glisp_Help%EF%BC%9A_%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B9%E3%82%B1%E3%83%83%E3%83%81
---

# Glisp Help: はじめてのスケッチ

一番簡単なスケッチの例です。

```
(circle [50 50] 40)
```

[Open in Editor](https://glisp.app/?code=\(circle+%5B50+50%5D+40\))

関数 circle は、丸のパスを生成する関数です。[100 100](/100_100) は丸の中心、40は半径となります。Glisp のキャンバスは右上が原点です。

しかし、まだ塗りや線が設定されていないので、点線で表示されています。これをトマト色に塗りつぶしてみます。

```
(style (fill "tomato")
 (circle [50 50] 40))
```

[Open in Editor](https://glisp.app/?code=%28style+%28fill+%22tomato%22%29%0A+%28circle+%5B50+50%5D+40%29%29)

`style` はスタイルを適用する関数です。 1 つめの引数 `(fill "red")`というスタイルを 2 つめ以降の引数、この場合は `(circle [50 50] 40)` というパスに適用しています。ちなみに`fill`もまた、塗りのスタイル情報を返す関数です。

ついでに線色もつけたい場合は、 style を入れ子にします。

```
(style (fill "RoyalBlue")
 (style (stroke "tomato" 10)
  (circle [50 50] 40)))
```

[Open in Editor](https://glisp.app/?code=%28style+%28fill+%22RoyalBlue%22%29%0A+%28style+%28stroke+%22tomato%22+10%29%0A++%28circle+%5B50+50%5D+40%29%29%29)

スタイルは外側から順に描画されます。この例では、丸がまずトマト色で塗られてから太さ 10 の青い線で縁取られます。この表記は、`style`関数の第 2 引数をベクタにすることで、このように縮めて書くこともできます。

```
(style [(fill "tomato") (stroke "RoyalBlue" 10)]
 (circle [50 50] 40))
```

[Open in Editor](https://glisp.app/?code=%28style+%5B%28fill+%22tomato%22%29+%28stroke+%22RoyalBlue%22+10%29%5D%0A+%28circle+%5B50+50%5D+40%29%29)

複数のパスにまとめてスタイルを適用することもできます。

```
(style (stroke "turquoise" 6)
 (circle [50 50] 40)
 (rect [20 40 60 20]))
```

[Open in Editor](https://glisp.app/?code=%28style+%28stroke+%22turquoise%22+6%29%0A+%28circle+%5B50+50%5D+40%29%0A+%28rect+%5B20+40+60+20%5D%29%29)

`rect` は右上の位置と幅・高さから四角形のパスを返す関数です。

## トランスフォーム

`transform`関数を使って、グループ全体の位置や角度といったトランスフォーム値を設定することができます。

```
(transform (translate [30 30])
 (style (fill "gold")
  (rect [0 0 60 40])))
```

[Open in Editor](https://glisp.app/?code=%28transform+%28translate+%5B30+30%5D%29%0A+%28style+%28fill+%22gold%22%29%0A++%28rect+%5B0+0+60+40%5D%29%29%29)

`translate`関数は、平行移動のトランスフォーム値（実体は行列）を返します。こうしたトランスフォーム値を返す関数は他に`scale`や`rotate`などがありますが、これらは`mat2d/*`関数で組み合わせることが出来ます。

```
(transform (mat2d/* (translate [20 10])
                    (rotate (deg 20))
                    (scale [1.5 1]))
 (style (fill "gold")
  (rect [0 0 50 40])))
```

[Open in Editor](https://glisp.app/?code=%28transform+%28mat2d%2F*+%28translate+%5B20+10%5D%29%0A++++++++++++++++++++%28rotate+%28deg+20%29%29%0A++++++++++++++++++++%28scale+%5B1.5+1%5D%29%29%0A+%28style+%28fill+%22gold%22%29%0A++%28rect+%5B0+0+50+40%5D%29%29%29)

rotate はラジアン角を引数に取るので、`deg`関数で「度」からラジアンへの変換をしています。

細かい話は[Glisp Help：トランスフォーム](/Glisp_Help%EF%BC%9A%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0)を参照してください。