Material studies · No. 011

GummyMaker

画像をぷるぷるのグミに

イラストや写真をドロップすると輪郭を切り抜いて ぷっくり膨らませ透けてゆれるグミになります

WEBGPU · STARTING

グミを準備しています…

質量(グミ換算)—
体積比—
運動エネルギー—

しくみ

ぷるぷるスケルトン(Jelly Hardware)の仕組みを使って、好きな画像をグミにする実験です。

画像がグミになるまで

まず画像からキャラクターの輪郭を切り抜きます。背景が透明なPNGはそのまま、ふつうの画像は四すみの色を背景とみなして抜きます。次に、輪郭からの距離に合わせて、ふちは薄く真ん中ほど厚くなるようにふくらませ、まるい風船のような立体にします。細い耳やしっぽは薄く、よくゆれます。

ぷるぷる揺れるしくみ(物理計算)

グミの中に、小さな箱を組み合わせた見えない骨組みを自動で作ります。1秒間に60回、骨組みの各点が「元の形に戻ろう」「体積を保とう」とする力を計算して、形を少しずつ直しています。「中を見る」や「格子を表示」で骨組みを見られます。

透けて見えるしくみ(描画)

画像の色がそのままグミの色になります。濃い線ほど光をよく吸い、白っぽいところは透きとおります。厚いところほど色が深く、薄いふちは明るく光ります。

「グミキャンディ」にすると、絵は印刷せず、表と裏の両方をまるく型どりします。画像を似た色のかたまりに分けて、パーツごとに高さを変え、境目には溝を入れます。パーツごとに色を分けることも、いちばん目立つ色の1色にすることもできます。

画像はブラウザの中だけで処理していて、どこにも送信・保存しません。