ユーザー定義シェイプ
https://scrapbox.io/files/6323fe9313b8f9002062d7f2.png
多くのアプリでは、直線、円、多角形といったシェイプは機能として予め組み込まれています(ビルトイン)。Illustratorのチュートリアルでは、作りたい造作のために算数の作図のように、ビルトインのシェイプを複雑奇怪に組み合わせている光景を目にすることがあります。
正多角形
扇状のスライダーから頂点数をコントロールできます。
https://scrapbox.io/files/6323fdfc49b51e001d7a8946.gif
角丸四角形
角丸四角形のR半径と、その尖り具合をコントロールできます。
https://scrapbox.io/files/6329d50e0b2091001dcb436f.gif
R半径のハンドルはありませんが、折れ線に対して角丸エフェクトを適用したオブジェクトです。
https://scrapbox.io/files/6329d506d18860001d68b3d3.gif
円弧
中心、始点、終点から円弧を描くことができます。
https://scrapbox.io/files/6329d54c2994700020776566.gif
外接円弧
今度は3点を通る円弧を描画できます。
https://scrapbox.io/files/6329d560ed694a001d89a737.gif
足指セパレーター
カスタムシェイプを組み合わせてカスタムシェイプを作ることができます。円弧を組み合わせるとフットネイルの時に挟むアレのようなシェイプを作ることも可能です。「ジグザグ」「サイン波」はIllustratorのアピアランスにもある機能ですが、円弧からなる波は一風変わった質感を感じさせます。
https://scrapbox.io/files/6329d56a3c226f001ddbfef4.gif
Glispのロゴ
実はGlispのロゴはGlispそれ自身を用いて、円弧や半円を組み合わせてデザインされています。ちなみにこのロゴはプログラミング言語の理論的基盤をなすラムダ計算という概念になぞらえ、「λ」を意匠に取り入れています。
https://scrapbox.io/files/6329d580dfd251001de6cf32.mp4
渦巻
正多角形シェイプの扇状スライダーを応用して、渦巻をつくることもできます。
https://scrapbox.io/files/6329d59c315947001dd5718a.gif
グラフ図形
点群の指定距離以下のペアを線でつないだ図形です。クリック操作で頂点を追加できます。
https://scrapbox.io/files/6329d5a92048ed001fc44e42.gif
路線図風ドロネー分割
グラフ図形の応用例としてこんなものを作ることもできます。ドロネー分割は、ざっくり言えば線が交差しないように点群を三角形分割する手法です。
https://scrapbox.io/files/6329d5e2a593010022d2c43e.gif
点群オブジェクト
今までの例は、具体的な形の「大きさ」「長さ」といった単純な数値パラメーターをコントロールしていましたが、これは点の集合という少し抽象的なオブジェクトをランダム生成しています。それ自体を上記の路線図シェイプの入力に使うことで最終的にグラフィックを生成しています。
https://scrapbox.io/files/6329d5ed7fb47500227391d5.gif
点群オブジェクトは「編集可能にする(Make Editable)」操作によって、一つ一つ手動調整できるようにすることができます。以下は、頂点に丸を置くと同時に、輪ゴムでくるんだかのような囲いを描画している例です。
https://scrapbox.io/files/6329d5f87693f9001d020e01.gif
点群から3点を選りすぐり、外接円を描いた例です。
https://scrapbox.io/files/6329d60437d041001d717a4b.gif
ボロノイ分割もできます。
https://scrapbox.io/files/6329d61937d041001d717aea.gif
サーキット
円柱に紐を巻きつけながら結んだような図形を書くことができます。円の位置と半径だけではなく、時計回り/反時計回りのどちらの方向に巻きつけるかを指定できます。
https://scrapbox.io/files/6329d626b8e8f80023439a84.gif
Paul Nicholsen氏によるロゴなんかも、普通にIllustratorで作ろうとすると大変ですが、このユーザー定義ハンドルがあればより細かく試行錯誤を重ねることができそうです。
https://scrapbox.io/files/6329d635e2af5b002395ead1.gif
ひょうたん
サーキットシェイプは円柱同士を直線で結ぶだけでしたが、曲線で結ぶとひょうたんのような形をつくることもできます。英語圏では「Blob」などと呼ばれる図形です。
https://scrapbox.io/files/6329d63c10a3c90023070ac2.gif
吹き出し
WordやExcelの「シェイプツール」で使える吹き出しツールを定義してみました。学級通信を作るのに便利かもしれません。https://scrapbox.io/files/6329d6497fb4750022739490.mp4
ニコちゃんマーク
Wordにも笑顔シェイプはありますが、Glispはその「喜び度」をパラメーター制御することもできます。
https://scrapbox.io/files/6329d651573ce000238350e9.gif
円グラフ
ユーザー定義できるのは単に「形」だけではありません。グラフのようなより複合的な図も、データ入力することで作ることができます。データ・ビジュアライゼーション目的に良いかもしれません。https://scrapbox.io/files/6329d65b29947000207770e1.gif
二次ベジェ
デザイナーの型が見慣れている「ベジェ曲線」は、アンカーポイント間のカーブを「入りの接線」「抜きの接線」の2点で制御しています。実はこの制御点は何個に設定することもでき、それは「(制御点の数 - 1)次ベジェ」という風に呼ばれています。Webで使われるSVGという画像フォーマットでは二次ベジェを使うことができます。制御点は一つなので単純な曲線しか描けませんが、3次ベジェとはまた変わった使い心地がして面白いです。
https://scrapbox.io/files/6329d66559add30022a76bdb.gif
トランスフォーム
位置・回転・スケールといった、トランスフォーム情報そのものにもハンドルを定義することができます。
これはスケール。
https://scrapbox.io/files/6329d6701d59730023ddb0b7.gif
これは「アフィン変換」と呼ばれる、位置・回転・スケールに加えて「せん断」というひし形にひしゃげさせる変形をハンドル化したものです。