ひとつの人工物。
その下の千の小さな変化。
現れては消える、つながり。
成長領域を置き、織り目を調整しよう。
地形 + 垂れ + 隠れ + 文字＋を通る断面
青い線は網、暗い線は地面です。
— 野原全体の糸の平均的な見え方。
考え方 / 自然をネットワークとして
網は2方向の糸と隙間からできています。下の地面は不規則で、草の高さ、光を受ける折れ、線を隠す葉が変化します。人工の模様が周囲の記録になります。
Canvasで独自の野原を生成します。地形の波、固定した草、垂れた網、粒子、文字をすべて描き、写真や外部画像は不要です。
支えとたるみの場で布の印象をつくる視覚モデルです。張力、衝突、生物の成長は解きません。遅い周期で層の関係を観察します。
広い波で尾根とくぼみ、滑らかなノイズで不均一さをつくります。各座標の高さを投影し、高い点は上へ、手前の列は広くします。
何千もの草の位置と色は再現できるハッシュを使い、設定を変えても野原の特徴を保ちます。毎フレーム乱数を替えるとちらつきます。
試してみよう： 「地面」で植物の高さを0から100%へ。尾根は残り、周囲の草が伸びます。
地面の座標で横と奥の2方向の線をつくります。短い間隔で点を取り、網の高さで持ち上げて投影すると、接続は規則的で線は曲がります。
支えには滑らかな成長の場と＋の領域を使います。たるみで支えの間を下げ、最低の隙間を保って地面を横切らないようにします。
試してみよう： 「織り目」で密度28にして隙間を見ます。たるみ0%と100%を比べ、＋で支えを移動しましょう。
一定の不透明度では平らな重ね絵に見えます。網の隙間と植物の高さを比べ、高い草でアルファを下げ、一部の草を前に描きます。淡くなる糸と隠れる糸が生まれます。
下の割合は野原の糸のアルファの平均です。視覚的な値で、電波や接続の試験ではありません。見えない部分も網としてつながっています。
試してみよう： 「隠れ方」で植物とたるみを増やし、断面と割合を見ます。糸の見え方は形を変えず全体のバランスを調整します。
成長の位相で支えと植物を緩く脈動させ、同じ場を調べる網も応答します。再生は18秒周期です。位相を調整して観察し、＋を動かすと停止します。
最初は静止し、非表示や画面外では描きません。動きを減らす設定でも手動操作でき、再生を明示的に選んだときだけ成長します。
試してみよう： 密度72を保ち、断面の青い線を見ながら位相を動かします。一度にひとつの値だけ変えましょう。
草原、雨のあと、乾いた地面で地面・草・糸の色が一緒に変わります。編集欄で2行のタイトルとキャプションを変更。最初の単語が上、残りが下に入り、空にすると抽象画になります。
成長領域から文字を離し、短い言葉と静かなキャプションで織り目に余白を残します。固定した粒子で草と網をなじませます。
現在の段階、位相、色、文字を1600 × 1792のPNGに用意し、ダウンロードで保存します。＋、操作、断面は画像に入りません。
試してみよう： 同じタイトルで疎らな乾いた野原と密な緑を保存し、秩序と読みやすさを比べます。
編集ソフトでは自分の草や地面の画像に淡い格子を別レイヤーで重ねます。メッシュ変形で大きな形に沿わせ、植物の裏をマスクします。糸の密度とコントラストを別に調整できます。
コードでは疎らな格子とひとつの丘から始め、2方向の線が同じ高さを使うか確認します。接続を確かめてから地形の細部、最後に密度を増やしましょう。
サンプルには場の関数と描画を含むスタジオ全体を収録。ブラウザーで開いて内蔵コードを編集でき、インストールやサーバーは不要です。
実践 / ひとつの野原、ふたつの読み方
単独HTMLに地形、糸、隠れ方、断面、操作、PNG保存を収録。最初の画像を内蔵し、動く作品はすべてCanvasで生成します。
// Keep ground, net and vegetation in the same coordinates.
const ground = terrainHeight(u, v);
const support = growthField(u, v, settings);
const net = ground + Math.max(clearance, support - sag);
const point = projectPoint(u, v, net, width, height);
// Visibility changes locally; the connections remain.