第一部
素手
ここからの6つは、ライブラリを一切使っていません。シェーダーも、物理も、音の合成も、探索も、すべてこのページのために書き下ろしたコードです。
流体シミュレーション
WebGL2
なぞれば、流れる。
流体の運動方程式(ナビエ–ストークス方程式)を、GPUの上で毎フレーム解いています。移流・渦・圧力の計算を重ねて、墨流しのような渦が生まれます。指やマウスでなぞってください。
粒子と文字
Canvas 2D
言葉が、粒になる。
好きな言葉を入れてください。文字の形をその場で読み取り、数千の粒がばねの力で並び直します。ポインターを近づけると、粒はよけます。
布の物理
ベルレ積分
つかめる布。
質点とばねだけでできた布です。風に揺れ、つかめば伸び、強く引けば裂けます。「切る」に切り替えると、なぞった所が切れます。
音の合成
Web Audio
録音なしで、鳴らす。
このページに録音は1秒も入っていません。発振器とフィルターを組み合わせ、琴に似た音と鼓の音をその場で合成しています。音階は都節。マス目を押すと、作曲できます。
経路の探索
A* アルゴリズム
最短の道を、探す。
ゴールまでの見込みの距離を手がかりに、調べるマスを絞り込む「A*(エースター)探索」です。壁を描いたり、始点と終点を動かしたりすると、道はその場で引き直されます。
反応拡散系
グレイ–スコット模型
式から、模様が育つ。
2つの物質が反応しながら広がる。それだけの式から、珊瑚や迷路に似た模様が育ちます。条件を切り替えると、模様は別の姿へ移り変わります。なぞると、種をまけます。
第二部
道具
ここからの3つは、世界中の開発者が磨いてきた道具を借ります。重い道具は、あなたがここへ近づいたときに初めて読み込みます。
剛体の物理と3D
three.js ・ Rapier
碁石を、こぼす。
碁石がぶつかり、すべり、重なります。衝突の計算は Rust 製の物理エンジン Rapier(WebAssembly)、質感と影は three.js。盤の木目と線も、その場で描いています。盤の上をなぞると、石をかき分けられます。
地球と時刻
D3 ・ Natural Earth
いま、どこが昼か。
地図の投影は D3、陸地の形は Natural Earth の公開データです。太陽の位置は、いまの時刻から天文の式で求めています。朱色の線が昼と夜の境目、その内側の帯が薄明、金色の線は東京からの最短航路です。
縦書きの組版
CSS ・ Shippori Mincho
縦に、組む。
振り仮名、傍点、縦中横、禁則。日本語の組版を、ブラウザの機能だけで組んでいます。明朝体は、このページで使う – 字だけを抜き出して – で届けています。下へスクロールすると、左へ読み進みます。
草枕
夏目漱石
山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。
夏目漱石『草枕』の冒頭。明治39年(一九〇六年)発表。本文と振り仮名は青空文庫による。傍点は引用者。
右から左へ ― 縦スクロールが、頁を繰る手になります