( thermal-handprint.html )
Media unavailableInformation
- Date
- 2026-04
- Type
- HTML
- Tech
- TypeScript, Vite, WebGL, MediaPipe Tasks Vision
Links
Description
thermal-handprint は、手の動きを熱源として扱い、金属板の表面に熱い手形が残っていく様子をブラウザ上で描くインタラクティブデモ。MediaPipe によるライブカメラ入力に対応しつつ、カメラを使わない状態でも手続き的に生成した両手のランドマークで常に動くデモとして成立する。 手のランドマークを指・掌の線分へ変換し、その軌跡を WebGL の ping-pong texture 上で熱量、記憶、エッジ成分として蓄積する。熱は拡散と冷却を繰り返し、触れた場所には薄い酸化膜のような痕跡が残る。最終表示では brushed metal、薄膜干渉色、焼き色、blackbody glow を組み合わせ、単なるヒートマップではなく物質表面の変質として見えるよう設計している。 実装面では、hand-tracking パッケージで MediaPipe 入力、座標投影、合成手の生成を分離し、playground 側で ThermalHandWebGL が熱場の更新と描画を担当する構成にした。デバッグモードでは heat、memory、edge、exposure、oxide-only、deposition、diffusion、cooling などの内部状態を切り替えて確認でき、現在の表示を PNG として書き出す機能も備えている。