柔らかな形。精密な仕組み。
生きているようなものをつくり、
そのための言語を与えよう。
粒子で光を崩し、不均一な縁と暗い部分で翼に奥行きを与えます。仕上げでひだと色を調整。停止して粒子をゼロから増やし、質感だけを観察しましょう。
仕上げ → 粒子 + 不規則なひだ + 散る光考え方 / 有機的な形 × 規則
生物のように光る中心を、精密な走査の表示と組み合わせます。柔らかな曲線が感情を、計測の線が文脈をつくります。
ブラウザーの描画機能でつくります。輪郭から膜、ひだの陰影、注釈を重ね、光る粒子、不均一な縁、部分的な色で仕上げます。コードにはJavaScriptの基礎が役立ち、操作には準備不要です。
翼らしさには輪郭が必要です。上と下の翼をそれぞれ3本の3次ベジェ曲線で描き、中央で反転します。細い胴体が4つの面をつなぎます。
A と D は端点です。 B と C は曲線の向きを決めるハンドルです。細胞は別の輪郭を使います： r = 0.73 + 0.10 cos(6θ)。内側の境界は外側の半径の60%です。穴によって円盤ではなく折れた輪に見えます。
試してみよう： 「形」で翼と細胞を切り替え、光を加える前に輪郭を確かめましょう。
翼の境界と胴体の近くの点をつなぎます。座標 uで境界をたどり、もうひとつの座標 vで根元から端へ進みます。格子状のサンプルを小さな三角形の面にします。
面を奥行き方向へ持ち上げます。緩いアーチで厚み、小さな正弦波でひだをつくります。根元と端では振幅をゼロにして境界を固定し、左右の翼は同じ変形を反転します。
図は等高線と放射状の線を示します。光の描画は境界144点と半径方向48区間を使います。細い線の設定は表示の密度、変形はひだの深さを変え、三角形の数は変えません。
試してみよう： 「膜」で停止し、変形を増やして内側の線の曲がりを観察します。線を減らすと面の構造が見えます。
表面の発光と局所的な光で奥行きをつくります。小さな面の向きを示す法線で陰影を計算し、浅い角度の光で傾斜を明暗に、細い光沢でひだを強調します。
真珠の青 は冷たく半透明の素材に、背後へ少しずらした像を重ね、奥行きの軌跡を表します。 虹色の膜 は青にスペクトルの帯を混ぜます。固定した厚みの模様と、法線とハーフベクトルの角度で色の位相を変え、ひだの動きに色と光沢を合わせます。薄膜の色を演出する近似表現です。
放射状の細い脈と柔らかな線で質感を加えます。表面をテクスチャに描き、明るい部分を抽出して縦横にぼかし、鮮明な画像に重ねます。ブルームが明るいひだから光を広げます。
試してみよう： 「光」で停止して素材を替えます。発光をゼロにして光の方向を回し、形を固定したまま色と光沢を動かします。虹色をゼロにして基調色と比べ、変形で傾斜を変えて光の配置を観察します。
分析のレイヤーは細く暗い軌道、小さなラベル、断面の枠でつくります。中心の光と競わず、その周囲を整えます。
翼の枠は曲面上の点に、断面15は胴体に付きます。全体の境界に括弧を、ひだと同じ時計で走査線を動かします。軌道と断面は科学的な測定ではなく見た目の領域を表します。
試してみよう： 「走査」で印をオフにして素材だけを確認し、戻して仕組みが形を観察しているような印象を比べましょう。
均一な面を3つの尺度で崩します。ひだの間の広い暗部、粗い小さな面、細かな光の粒です。真珠の青では頂部を青白く、虹色では頂部に桃色と黄色、谷に濃い青を置き、明るさを色の帯へ変換します。
最初のノイズは膜の座標に固定します。大きな斑点で密度、小さな粒で明るさと法線を変え、光沢を散らします。粒子の設定は粗さと斑点の強さを変えます。さらに細かい粒子は、 ブルームのあとに加えてぼかしで消えないようにします。明るさのマスクで発光部分と軌跡だけに置き、暗い背景を静かに保ちます。
仕上げはひだの間隔と縁も不規則にします。青の素材はぼかした光を下へ広げ、色の素材は軌跡を抑えて明るいひだを強調します。翼には細い腹部と触角を加え、細胞には同じ質感だけを使います。素材の演出として設計しています。
試してみよう： 「仕上げ」で停止し、仕上げ90%・粒子75%にします。真珠の青と虹色を比べ、ひだを固定して粒子をゼロへ往復させます。発光は光の輪、粒子は鮮明な点です。仕上げゼロで以前の形と素材に戻ります。
視覚表現を展開するには、曲線の系列、青紫のパレット、細い分析線の3つを保ちます。形と密度を変えて新しい構図にします。
遅い呼吸と控えめな変形も共通の規則にします。シンボルは静止、主役は動く形にできます。画面外では停止し、動きを減らす設定でも停止から始まります。
実践 / ひとつの言語、ふたつの標本
線48本・変形22%・発光40%の翼をつくり、仕上げ90%・粒子75%で停止して保存します。細胞に替え、密度と変形だけを変えてもう一枚保存します。
並べて同じシリーズに見えるか確かめます。次に「形」で変形ゼロの細胞を保存し、簡略化したシンボルの土台にしましょう。
標本に戻る ↑光の描画にはWebGL、図解と走査にはCanvas 2Dを使います。描画ライブラリーは不要。完全なソースにはベジェ境界、素材のシェーダー、仕上げ、ブルームを収録しています。
// A boundary point comes from the Bézier outline.
const p = boundary(u);
const x = root.x + v * (p.x - root.x);
const y = root.y + v * (p.y - root.y);
const arch = Math.sin(Math.PI * v) * 0.15;
const fold = Math.sin(u * 12 * Math.PI + v * 9 + time * 0.45)
* Math.sin(Math.PI * v) * deformation * 0.30;
const position = { x, y, z: arch + fold };
// Sample a grid of (u, v), connect it into triangles,
// then shade their normals and add bloom.HTMLを保存してブラウザーで開き、内蔵のモデルと描画コードを編集します。スタイル、画像、JavaScriptを含むためサーバーやインストールは不要です。
個別のソース： 形状のモデル · 描画と操作 · 素材とブルームのシェーダー。アニメーションには、次の値から得る経過時間を使います： requestAnimationFrame。フレームごとに固定値を加えず、画面の更新頻度が変わっても速さを保ちます。