やさいのつくりかた.

目次/第04章

04Profile

横顔を1本描けば、立体になる

profile & sweep — プロファイルと掃引

この章の3行まとめ
  • 野菜の形は、たった1本の折れ線（横顔＝プロファイル）から作られています。
  • それを軸のまわりに1周させると立体になります。ろくろと同じ、数学でいう回転体です。
  • でこぼこ・稜・イボは、その半径 r を角度と高さで少し増減させているだけです。

ここがこのプロジェクトの中心です。野菜の形は、たった1本の折れ線から作られています。 縦軸に高さ y、横軸に半径 r をとった横顔（プロファイル）。 それを軸のまわりに1周ぐるっと回すと、立体ができます。ろくろで茶碗をひくのと同じ理屈で、 数学では回転体と言います。

具体的には、高さを何十段かに分け、それぞれの高さで半径 r の円（リング）を作り、 リングどうしを四角形でつないでいきます。これを掃引（sweep）と呼びます。 

// リング列の掃引。両端はキャップで閉じる
function sweep(name, rings, centers, colsFn, scene) {
    const N = rings.length, M = rings[0].length;   // N段 × M分割
    for (let i = 0; i < N; i++) {
        for (let j = 0; j < M; j++) {
            const k = i * M + j, p = rings[i][j];
            positions[k*3] = p.x; positions[k*3+1] = p.y; positions[k*3+2] = p.z;
            uvs[k*2] = j / (M-1);        // u = 周方向
            uvs[k*2+1] = i / (N-1);      // v = 下から上
        }
    }
    ...
}
スイカ.js / トマト.js ほか。2重ループで頂点を並べているだけ

実験 — 横顔を動かすと、立体が変わる

● をドラッグしてください。左半分だけ描けば、右は自動で対称になります。

でこぼこのスライダーを動かすと、半径 r にノイズを足していることがわかります。 これがコードでいう「稜（りょう）」「イボ」「輪紋」の正体です。 きゅうりの浅い10本の筋も、ゴーヤーの大きな瘤も、 r を角度と高さの関数で少し増減させているだけです。

縦横比も、横顔が決めている。 左の方眼はタテとヨコが同じ目盛りです。だから半径 r と高さは同じ単位で、 この2つの比がそのまま「背が高い野菜か、平たい野菜か」になります。 プリセットを切り替えると方眼に対する大きさが変わるのは、そのためです。 トマトを縦長のまま作ると、どんなに色と質感を作り込んでも卵にしか見えません。 形の似ていなさは、たいてい縦横比のせいです。
つまずきポイント

トマトやピーマンのように肩が折り返す形は、半径 r だけでは作れません。 「同じ高さに r が2つある」からです。だからコードのプロファイルは (r, y) の2列のテーブルで持っています。 ピーマン.js のコメントに「これが無いと肩が折り返せず、ヘタのくぼみが作れない」と書かれているのはこの話です。

やってみよう
  1. プリセットを「トマト」にして、点をドラッグしてナスに近づけてみる。
  2. 稜の本数を6にして、トマトらしい房のふくらみを作る。
  3. 自分の好きな野菜（大根・かぼちゃなど）の横顔を、紙に描いてから再現してみる。