やさいのつくりかた.

目次/第16章

16Variants

「似ているのに別物」を作り分ける

differential design — 差分でつくる

この章の3行まとめ
  • ブロッコリーとカリフラワーは、ほぼ同じプログラムです。違うのは数値だけ。
  • でも色を白くしただけでは絶対に似ません。変えるべきは色ではなく構造です。
  • 実物を2つ並べて「何が違うか」を書き出す作業が、手続き的生成の設計そのものです。

カリフラワー.js は、ブロッコリー.js の骨格(散房花序の再帰 → 花蕾ドーム → 粒)を そのまま使っています。茎も、ざるも、物理も、GUIも共通です。 にもかかわらず、冒頭にはこう書いてあります。 「同じ設定のまま色を白くしても絶対に似ません」。

これは手続き的生成の一番おいしいところであり、一番むずかしいところでもあります。 数値を変えるだけで別の野菜になる。でもどの数値を変えるかは、実物を見ないと分からない。 カリフラワー.js が実際に変えたのは、次の4か所です。

変えたところブロッコリーカリフラワーなぜ
房のあいだareaKeep 0.975
domeSwell 1.09
areaKeep 1.00
domeSwell 1.22
ブロッコリーは房と房が枝まで裂けている。カリフラワーは押し合って固まっていて、境目は浅い溝でしかない
粒のかたちbudAspect 1.28budAspect 0.52 ブロッコリーは球状の蕾が1個ずつ外へ伸びる。カリフラワーは粒が法線方向へ潰れて繋がっている
谷の暗さ強さ 1.02 / 下限 0.20強さ 0.48 / 下限 0.56 白いので谷に落ちても光が回り込む。同じ遮蔽だと白い塊に墨を流したようになる
据わり方切り口で立つ葉柄の上に座る 葉が輪になって外へ張り出しているので、その上に載る。物理の凸包にも葉柄を入れる

実験 — 1項目ずつカリフラワーに近づける

「色を白くする」だけを入れてみてください。白いブロッコリーにしかなりません。 (このミニチュアでは areaKeep と domeSwell を1本のつまみにまとめてあります)

差分は3種類ある

23本のサンプルを見渡すと、「似ているものを作り分ける」やり方は3つに分けられます。

  • 別の野菜にする — ブロッコリー → カリフラワー。骨格を残して構造の数値を変える。 ファイルは別々にする(共通部分をライブラリにまとめてしまうと、実物と見比べて直す作業がやりにくくなる)。
  • 品種を切り替える — 同じファイルのなかの PRESETS。 サクランボ.js には佐藤錦・ナポレオン・紅秀峰の3つが入っています。
  • 状態を切り替える — 枝豆.js の「生/塩ゆで」。形は同じで、色と質感だけが変わる。

品種の差は、たいてい「色の分布」

サクランボの3品種は、形の数値もわずかに違いますが、効いているのはほとんど色です。 しかも「赤の濃さ」ではなく赤がどこまで回り込んでいるかです。

satonishiki: { blushFloor: 0.30, blushSpread: 1.15 },  // 日陰に黄色が残る
napoleon:    { blushFloor: 0.16, blushSpread: 1.45 },  // 色づきが浅く黄色が広い
benishuho:   { blushFloor: 0.74, blushSpread: 1.70 }   // 全体が濃い赤。黄色はほぼ残らない
サクランボ.js。blushFloor は「日陰側にどれだけ赤が残るか」の下限

サクランボ.js は、日向側(u = 0.5)から赤が回り込むという1つの仕組みで 3品種ぜんぶを作っています。「品種ごとにテクスチャを描く」のではなく、 共通の仕組みに、品種ごとの数値を入れる。これが手続き的生成の考え方です。

状態の差は、色・艶・付着物

枝豆.js の「塩ゆで」は、形をまったく変えません。変わるのはこれだけです。

  • 色が冴える(くすみを取って彩度を上げる)
  • 粗さを 0.74 倍にして濡れた艶を出す。ただし鏡面にはしない(緑のプラスチックになる)
  • 白い粉(ブルーム)を 0.35 倍に落とす。茹でると落ちるので
  • 産毛のアルファを 0.7 倍。濡れた毛は寝て束になる
  • 塩の粒を乗せる
つまずきポイント

色から手をつけると、必ず失敗します。 「カリフラワーはブロッコリーの白いやつ」「ナポレオンは佐藤錦の色違い」—— こう考えているうちは似ません。実物を並べて、 まずシルエットの違い、次に表面の粒立ちの違い、 最後に色、の順で見てください。 このサイトのサンプルのコメントに残っている失敗は、 ほとんどが「構造の違いを色でごまかそうとした」記録です。

やってみよう
  1. 「色を白くする」だけを入れて、白いブロッコリーにしかならないことを確かめる。
  2. 4つ全部を入れてから、ひとつずつ戻す。いちばん効いているのはどれか。
  3. 自分でスーパーへ行き、ブロッコリーとカリフラワーの写真を撮って並べる。違いを5つ書き出す。
  4. サクランボ.js の benishuho の blushFloor を 0.10 にして実行し、何品種に見えるか確かめる。