CRAZY Code ─ 液体・粘性｜コピペで使える動きのサンプル

S-001注いで溜まる液体CRAZY度 ★★★★★

押している間、その場所から液体が注がれます。液体は文字の板に溜まって縁からこぼれ、底に水たまりを作ります。マウスでは、カーソルが棒のように液体をかき分けます。

WebGL粒子流体（SPH）Pointer EventsWeb Audio

これは何？

最大1000粒の粒子で液体を計算し、WebGLで粒どうしをつないで1つの液面として描く水槽です。粒は近づきすぎると押し合い、離れすぎると引き合うので、跳ねたしぶきが丸い滴になり、また液面に戻ります。

使い方

「全部コピー」して貼り付け、.ug-pour の高さを決めます。
data-ug-solid を付けた要素は、液体が通り抜けない板になります。いくつ置いてもかまいません。
「注ぐ」で上から1.4秒注ぎ、「揺らす」で水槽を揺すり、「排水」で底の口を開け閉めします。
スマホでは、指を少し止めるか横に動かすと注ぎ始めます。縦になぞったときはページのスクロールになり、注ぎません。

カスタマイズ

液体の色は FS2 の vec3(.16,.5,.05)（底の色）と vec3(.62,.86,.1)（上の色）です。
溜まる量の上限は resize() の .0035（面積あたり）と MAX（1000粒）です。
硬さや粘りは STIFF・NEAR・REST、重力は GRAV です。

注意

粒が増えるほど計算が重くなります。上限は水槽の面積に合わせて自動で決まり、スマホの小さな画面では少なくなります。板の位置は大きさが変わったときに読み直すので、板そのものを動かすアニメーションには追従しません。WebGLが使えない環境では、粒を丸で描く簡易表示になります。

S-002溶け落ちるボタンCRAZY度 ★★★★

押すとボタンの底が垂れ、粘って伸びた滴が千切れて床に落ち、水たまりになります。少しすると滴が吸い上げられて元に戻ります。

SVGフィルターWeb AnimationsWeb Audio

これは何？

押すと、ボタンの底から6本の滴が粘りながら伸び、千切れて床に落ちて水たまりになるボタンです。ぼかしてから輪郭をくっきりさせるSVGフィルターで、本体・滴・水たまりが1つの液体としてつながり、光の当たり方で濡れたつやが出ます。文字もゆらゆら崩れます。

使い方

「全部コピー」して貼り付けます。.ug-meltbtn はいくつ置いても動きます。
ボタンの下に130pxほど、滴が落ちる余白が要ります。
溶けている間はもう一度押しても反応しません。2秒ほどで元に戻ります。

カスタマイズ

色は .ug-meltbtn-body と .ug-meltbtn-goo b の背景です。両方を同じ系統の色にしてください。
滴の数は melt() の 6、伸びる長さは R(36, 80)、床までの距離は floor の 110 です。
粘りの強さはフィルターの stdDeviation="6" と 24 -11 です。ぼかしを大きくするほど、とろりと太くつながります。

注意

見た目の液体は、ボタンの後ろに重ねた飾りです。押せる範囲は元のボタンのままなので、溶けている間もレイアウトは崩れません。SVGフィルターは描画が重いため、1画面にたくさん並べるのは避けてください。

S-003ぷるぷるゼリーカードCRAZY度 ★★★★

カードをつまんで引っぱると、ゼリーのように伸びて離すと揺れながら戻ります。引っぱりすぎると指から滑り抜けます。

Canvas 2Dばね質点Pointer EventsWeb Audio

これは何？

カードを7×5点のばねの網として計算し、網の三角形ごとに絵を貼り付けて描くゼリーです。どこをつまんでも、そこから伸びて全体が揺れます。底の段は皿に乗っているので、上の方ほど大きく揺れます。

使い方

「全部コピー」して貼り付けます。
つまんで引っぱる、つつく、マウスでなでる、のどれでも揺れます。
キーボードでは、Enterかスペースでつつき、矢印キーで押せます。
スマホでは、カードの上で触れ始めたときだけページのスクロールを止めます。周りの余白をなぞれば、ふつうにスクロールできます。

カスタマイズ

カードの絵は paint() の中でキャンバスに描いています。文字や色はここで変えます。
柔らかさは KS（形に戻る力）と KSP（網のばね）、揺れの収まり方は DAMP です。
滑り抜けるまでの距離は frame() の cw * .7 + 50 です。

注意

カードの中身はキャンバスに描いた絵なので、文字を選んだり、中のリンクを押したりはできません。目を引くための飾りのカードに使ってください。

S-004水中インクCRAZY度 ★★★★

タップするとインクが落ちて、キノコ雲のように渦を巻きながら沈みます。なぞるとインクを引きながら水をかき混ぜます（スマホでは横になぞります）。

WebGL流体計算Pointer EventsWeb Audio

これは何？

水の流れをマス目で計算し（Stable Fluids という手法）、その流れにインクを乗せて運ぶ水槽です。計算と描画はWebGL（GPU）で行い、インクは画面のピクセルとほぼ同じ細かさで持つので、渦の縁まで細くくっきり見えます。インクは濃い所ほど重く沈むので、落とした滴がキノコ雲のように渦を巻き、渦の輪に分かれます。色は光を吸う量で混ぜるので、重なると絵の具のように濁ります。

使い方

「全部コピー」して貼り付け、.ug-inktank の大きさを決めます。
タップで1滴落とし、なぞるとインクを引きながらかき混ぜます。マウスなら、押さずに動かすだけでも水が動きます。
スマホでは、横になぞると混ぜられます。縦になぞったときはページのスクロールになります。
押すたびに藍・紅・墨・黄の順に色が変わります。インクは時間がたつと薄れていきます。

カスタマイズ

インクの色は INKS（赤・緑・青の光を吸う量）、水の色は PAPER です。
沈む速さは SINK、渦の強さは VORT です。
きめの細かさの上限は resize() の DM（インクのピクセル数。PCは120万・スマホなどは45万）と SM（流れの格子。PCは10万・スマホなどは3万）です。インクは表示ピクセルと同じ細かさ、流れはその半分を目安に、この上限まで下げます。
圧力を整える回数は step() の 16（スマホなどは 10）です。

注意

WebGLの半精度浮動小数テクスチャに描けない環境では、CPUで計算する粗い版（cpu()。1マス CELL 4px・最大 MAXC 14000マス）に自動で切り替わり、引き伸ばして表示するのでぼやけます。GPU版は最後に触ってから12秒で計算を止めます（絵は残ります）。大きさが変わると水槽は空に戻ります。

S-005水銀スイッチCRAZY度 ★★★

切り替えると、ガラス管の中の水銀が細長く伸びて反対側へ流れ、端にぶつかって潰れてから丸く戻ります。指でつまんで動かすこともできます。

SVGフィルターばねrole="switch"Web Audio

これは何？

5つの粒をSVGフィルターで1つの液体につなぎ、光を当てて金属のつやを付けたスイッチです。粒は大きいものから順に、少しずつ遅れて動き出すので、移動中は細長く伸びて千切れかけ、着いた先でまた1粒にまとまります。

使い方

「全部コピー」して貼り付けます。.ug-mercury-sw はいくつ置いても動きます。
オンかオフかは aria-checked に入ります。切り替わると change イベントが届きます。
キーボードではスペースかEnterで切り替わります。
音を鳴らすときは、スイッチか、それを囲む要素に data-sound を付けます。

カスタマイズ

粒の大きさは SIZES、並び方は OFFS です。
流れる速さはばねの強さ 70 + b.r * 7、伸び具合は動き出す時間差 .045 です。
金属の色はフィルターの lighting-color="#C3CCC8" です。

注意

見た目のための部品なので、フォームで値を送るときは、change イベントを受けて隠し入力欄に値を入れてください。

S-006波紋が跳ね返る水面CRAZY度 ★★★★

クリックした所から波紋が広がり、プールの縁と真ん中の文字の板で跳ね返って重なります。浮き輪は波に押されて漂います。なぞると水面に航跡が残ります。

WebGL波動方程式Pointer EventsWeb Audio

これは何？

水面の高さをマス目で計算し、波が隣のマスへ伝わる様子をそのまま描く水面です。波は縁や板に当たると跳ね返り、何度もクリックすると干渉して模様ができます。WebGLで水面の傾きから屈折・光の照り返し・底に揺れる光の網（コースティクス）を描いています。

使い方

「全部コピー」して貼り付け、.ug-pool の大きさを決めます。
data-ug-wall を付けた要素は、波が跳ね返る壁になります。
.ug-pool-buoy は波に流されて漂います。大きさは --s で決めます。
キーボードでは、Enterかスペースで好きな場所に1滴落とせます。
スマホでは、タップで滴を落とし、横になぞると航跡が残ります。縦になぞったときはページのスクロールになり、波は立ちません。

カスタマイズ

波の収まりやすさは wave() の .994 です。1に近いほど長く残ります。
底のタイルの数はシェーダーの *8.、水の色は vec3(.05,.46,.58) です。
クリックしたときの波の強さは drop() に渡す 5 です。

注意

水面は大きさが変わると静かな状態に戻ります。壁の位置も、そのときに読み直します。WebGLが使えない環境では、陰影だけの簡易表示になります。