Lab
日々のweb関係の実験や試作を公開する場所です。
タイポグラフィ、CSS、WebGL、インタラクション、クリエーティブコーディングなど、
手を動かしながら確かめたことのメモを残していきます。
notep5.jsでメタボールを書く — 重なった「場」の輪郭で、丸をなめらかにつなぐ
丸どうしが粘液のように合体・分離する有機的な形——各点で中心からの寄与を足した「場」を引き、そのしきい値の等高線を輪郭にする。格子をマーチングスクエアで追うとき、辺の交点を中点に固定すると約10pxのカクつきが出る。線形補間で平均2pxまで寄せて、対角2隅だけがしきい値を超える鞍点の結び方を取り違えると、首がつながるか離れるかが変わってしまう。
notep5.jsでポアソンディスクを書く — 点を均等に、でも規則的でなくばらまく（Bridson）
どの点どうしもある距離より近づかないのに、格子のような規則も残らない——点描やテクスチャ、オブジェクト配置に効くポアソンディスク分布。ただランダムに打って毎回全点と距離を測ると遅く、まばらな隙間も埋まらない。Bridson 2007は確定点のまわりへ候補を蒔き、セル幅を r/√2 に切った背景格子で近傍だけを調べて速くする——このセル幅を取り違えると衝突判定が漏れて点が近づきすぎる。
notep5.jsで拡散律速凝集を書く — ランダムに歩く点が、枝分かれに育つ（DLA）
中央の種へ、ランダムウォークする粒子が次々と固着し、でたらめな歩みが枝分かれした樹状構造に育つ拡散律速凝集（DLA）。素朴な実装は遅い——最近接粒子までの距離ぶん一気に飛ぶ適応歩幅と、迷子を防ぐkill半径で速くし、接触距離を引き忘れると粒子がめり込んで形が崩れることも確かめる。
notep5.jsで描く波動関数崩壊 — 隣り合う制約を伝播させて敷き詰める
隣どうしがつながるタイルを、矛盾なく敷き詰める波動関数崩壊（WFC）。ランダムに置くと継ぎ目の半分で線が食い違い、直前のタイルだけを見ると袋小路に陥る——確定したマスから「隣の隣」へ制約を押し広げると、矛盾が起きる前に選択肢が絞られ、やり直しなしで盤が埋まる。
notep5.jsでドロネー三角形分割を書く — ボロノイ図の裏返しを、外接円でつくる（Bowyer-Watson）
散らばった点を三角形で結ぶドロネー三角形分割を、p5.jsで一から書く。「どの三角形の外接円にも他の点を含まない」という条件が、やせた三角形を避け、ボロノイ図の裏返し（双対）にもなる——Bowyer-Watson法でその条件を保ちながら点を足していく。
notep5.jsでボロノイ図を使って点を均等にならす — 重心へ動かす操作（Lloyd's relaxation）
ランダムに打った点は、団子になったり、ぽっかり空いたりで意外とばらけない。各点の“なわばり”（ボロノイ領域）を求め、その重心へ点を動かす——この操作をくり返すだけで、点がじわじわと均等にならされていく（Lloydのアルゴリズム）。
notep5.jsで描くL-system — 規則で文字列を書き換えて木を生やす
「アルゴリズムで絵を描く」シリーズの第8回。「X」1文字から始め、置き換え規則を何度も適用して文字列を伸ばす。できた文字列を前進・回転・分岐の命令として読み、タートルグラフィックスで描くと、植物のような枝分かれが育つ。
notep5.jsで描く微分成長 — 線を交差させずに折りたたむ
「アルゴリズムで絵を描く」シリーズの第7回。1本の閉じた線をすこしずつ伸ばすと、脳やサンゴのような折りたたみ模様が育つ。鍵は自己交差を防ぐこと——隣だけでなく全ノードに反発力をかけ、線どうしが重なる手前で押し返す。
notep5.jsで描く四角パッキング — 重ならないように正方形を詰める
「アルゴリズムで絵を描く」シリーズの第6回。空いた場所に小さな正方形を置き、隣やふちと重なる手前まで大きくして止める——円パッキングと同じ手順で、大小の四角がびっしり並んだ模様ができる。
notep5.jsで描く円パッキング — 重ならないように円を詰める
「アルゴリズムで絵を描く」シリーズの第5回。空いた場所に小さな円を置き、隣やふちと重なる手前まで大きくして止める——種まき・育成・停止のくり返しだけで、大小の円がびっしり詰まった模様ができる。
notep5.jsで描くTruchetタイル — 1種類のタイルで迷路をつくる
「アルゴリズムで絵を描く」シリーズの第4回。四半円をつないだ正方形のタイルを、ランダムに回して並べるだけ。たった1種類のタイルから、曲線が絡み合う迷路のような模様が自ずと生まれる。
notep5.jsで描くセルオートマトン — 番号ひとつで模様が変わる
「アルゴリズムで絵を描く」シリーズの第3回。1次元のセルが、両隣と自分の状態だけで次の色を決める。その規則は0〜255の番号ひとつに畳み込め、たった8ビットの違いが、三角形・フラクタル・カオスまで模様をまるごと変える。
notep5.jsで描く反応拡散（Gray-Scott）— 模様が育つ数値を探す
「アルゴリズムで絵を描く」シリーズの第2回。2つのインクが拡散し反応し合うだけで、迷路や斑点が自ずと育っていく。鍵は f と k の2つのつまみ——多くの値では真っ黒になるので、Pearsonの分類を手がかりに“模様が生まれる数値”を探す。
notep5.jsで描くフローフィールド — ノイズの場に、粒子を流す
「アルゴリズムで絵を描く」シリーズの第1回。ノイズで作った“向きの場”に粒子を乗せ、その軌跡を重ねると、絹のような流れが生まれる。仕組みはごく単純なので、定番のフローフィールドを一から順に組み立てていく。
note和文Webフォントの配信最適化 — 数千字を、どう届けるか
和文フォントは数千字を抱えて重くなりがちだ。実テキストを保ったまま軽くする5つの手——サブセット化、unicode-rangeでの分割、font-displayの指定、WOFF2圧縮、動的配信——を、規格と実装と慣習を分けて整理する。
noteカラーフォントの現状 — COLR / sbix / SVG、絵文字はどれで表示されているか
カラーフォントを支える4つの方式（COLR / SVG / sbix / CBDT）を整理する。ブラウザごとに対応が違うこと、同じ絵文字でも各社で見た目が変わる理由、そして和文のカラー化が構造的に難しいところまで。
notesystem-ui とは何を指すのか？ font-family のおまじないと、日本語の注意点
font-family の末尾に添える system-ui が、実際に呼ぶフォントを確かめる。特定の名前ではなくOS標準のUIフォントで、日本語だと英数字と和字が別々になる点に注意がいる。
notenoise() とは何か？ 乱数との違いと、あなたが使っているノイズの正体
ジェネラティブアートでおなじみの noise() の正体をほどく。乱数との違い、そして p5.js の noise() が実はパーリンノイズではなくバリューノイズ寄りだ、というところまで。
noteバリアブルフォント、2026年は使うべき？ 現状と、和文で使えるかの見極め
バリアブルフォントの現状と実装の作法を一通り押さえる。和文でも使える段階には来たが、グリフ数が多く軽量化はラテンほど効かない——2026年に使うかの見極めどころを考える。
notefont-family、2026年はどう書く？ システムフォントとNoto Sans JPの使い分け
長い font-family の並びを一行ずつ読み解く。Windows にも Noto Sans JP が届いた2025年以降、Noto をファーストチョイスにしてよいのかを考える。