目次/第16章
「似ているのに別物」を作り分ける
differential design — 差分でつくる
- ブロッコリーとカリフラワーは、ほぼ同じプログラムです。違うのは数値だけ。
- でも色を白くしただけでは絶対に似ません。変えるべきは色ではなく構造です。
- 実物を2つ並べて「何が違うか」を書き出す作業が、手続き的生成の設計そのものです。
カリフラワー.js は、ブロッコリー.js の骨格(散房花序の再帰 → 花蕾ドーム → 粒)を そのまま使っています。茎も、ざるも、物理も、GUIも共通です。 にもかかわらず、冒頭にはこう書いてあります。 「同じ設定のまま色を白くしても絶対に似ません」。
これは手続き的生成の一番おいしいところであり、一番むずかしいところでもあります。 数値を変えるだけで別の野菜になる。でもどの数値を変えるかは、実物を見ないと分からない。 カリフラワー.js が実際に変えたのは、次の4か所です。
| 変えたところ | ブロッコリー | カリフラワー | なぜ |
|---|---|---|---|
| 房のあいだ | areaKeep 0.975 domeSwell 1.09 | areaKeep 1.00 domeSwell 1.22 |
ブロッコリーは房と房が枝まで裂けている。カリフラワーは押し合って固まっていて、境目は浅い溝でしかない |
| 粒のかたち | budAspect 1.28 | budAspect 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 は、日向側(u = 0.5)から赤が回り込むという1つの仕組みで 3品種ぜんぶを作っています。「品種ごとにテクスチャを描く」のではなく、 共通の仕組みに、品種ごとの数値を入れる。これが手続き的生成の考え方です。
状態の差は、色・艶・付着物
枝豆.js の「塩ゆで」は、形をまったく変えません。変わるのはこれだけです。
- 色が冴える(くすみを取って彩度を上げる)
- 粗さを 0.74 倍にして濡れた艶を出す。ただし鏡面にはしない(緑のプラスチックになる)
- 白い粉(ブルーム)を 0.35 倍に落とす。茹でると落ちるので
- 産毛のアルファを 0.7 倍。濡れた毛は寝て束になる
- 塩の粒を乗せる
色から手をつけると、必ず失敗します。 「カリフラワーはブロッコリーの白いやつ」「ナポレオンは佐藤錦の色違い」—— こう考えているうちは似ません。実物を並べて、 まずシルエットの違い、次に表面の粒立ちの違い、 最後に色、の順で見てください。 このサイトのサンプルのコメントに残っている失敗は、 ほとんどが「構造の違いを色でごまかそうとした」記録です。
- 「色を白くする」だけを入れて、白いブロッコリーにしかならないことを確かめる。
- 4つ全部を入れてから、ひとつずつ戻す。いちばん効いているのはどれか。
- 自分でスーパーへ行き、ブロッコリーとカリフラワーの写真を撮って並べる。違いを5つ書き出す。
- サクランボ.js の benishuho の blushFloor を 0.10 にして実行し、何品種に見えるか確かめる。