xkcd 2347のインタラクティブ版
本文の状態
日本語全文を表示中
詳細モードで約1分の本文を読めます。
同じ出来事の情報源
この情報源を基点に整理
Andrej Karpathy 厳選
ユーザーがブロックをドラッグすると、その上の構造物が崩れる物理シミュレーションを作成した。Matter.jsで物理演算、Rough.jsで手描き風表現を実現し、乱数シードにより毎回異なる塔の形状を生成する。
Continue in AI NEW LAB
このニュースを、実務の判断につなげる
AI NEW LABで、試したことや先に確認したい条件を共有できます。まずはログインなしで読めます。
AI NEW LABで論点を見るSource Article
元記事を日本語で読む
本文に関係しない購読案内、埋め込み通知、サイト内プロモーションは除いています。
xkcd 2347（依存関係コミック）のインタラクティブ版を作成しました。タワーからブロックをドラッグして、その上のすべてが崩れ落ちる様子を観察できます。
物理演算は Matter.js が、手描き風の xkcd 調の見た目は Rough.js がそれぞれ担当しています。ページをリロードするたび、シード付き PRNG（疑似乱数生成器）によって異なるタワーが生成されます。これはテーパープロファイルを選択し、ブロックのサイズと行の幅を変化させ、上に行くに従って全体をわずかに中心からずらしていきます。プロジェクト名は、node-flux.js のような実際のパッケージ名らしく聞こえる部品からランダムに組み立てられています。
[email protected]
「情報」ボタンを押すとタワーのシード値が表示され、これを ?seed= パラメータとして共有できます。
さらに発展させられる可能性のあるアイデアをいくつか紹介します：
- SBOM（ソフトウェア部品表）をアップロードし、実際の依存関係ツリーからタワーを構築する。ブロックサイズは、各パッケージに依存している他のパッケージの数に基づいて決定します。
- ecosyste.ms から実際の依存関係データを取得し、ブロックを引き抜き始める前に、自分のプロジェクトのタワーがどのように見えるかを確認できるようにします。
- スマートフォンの加速度センサーを利用して、タワーを傾けたり、倒したりできるようにします。
ソースコードは GitHub で公開しています。
原文を表示
I made an interactive version of xkcd 2347, the dependency comic, where you can drag blocks out of the tower and watch everything above them collapse.
Matter.js handles the physics and Rough.js gives it the hand-drawn xkcd look. Each reload generates a different tower from a seeded PRNG that picks a taper profile, varies the block sizes and row widths, and drifts the whole thing slightly off-center as it goes up. The project names are randomly assembled from parts that sound like real packages – things like node-flux.js
[email protected]
The info button shows the tower’s seed, which you can share as a ?seed=
Some ways this could go further:
Upload an SBOM and build the tower from your actual dependency tree, with block sizes based on how many other packages depend on each one
Pull real dependency data from ecosyste.ms so you can see what your project’s tower looks like before you start pulling blocks out
Use the phone’s accelerometer to let you tilt and topple the tower
Source on GitHub.
今日のまとめ
AIデイリーブリーフで今日の重要ニュースをまとめ読み