CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.11
CRAZY度 ★★★ ─ 当区画は重力を停止中

浮遊・無重力

重力の供給を止めた区画です。ぶつかると回りながら跳ね返る部品や、糸でつながった風船、膜の色が流れ続けるシャボン玉など、漂う・浮かぶ・吸い上げられる動きを集めました。どれも慣性・浮力・万有引力を実際に計算して動かしています。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001無重力モジュールCRAZY度 ★★★★
「重力を切る」を押すと、設定パネルの部品が留め具から外れて漂い出します。ぶつかると回転しながら跳ね返り、押したボタンは押された向きへ離れていきます。
剛体物理Pointer EventsWeb Audio

これは何？

入力欄・スイッチ・ボタンといった本物のHTML部品を、重さと慣性を持つ板として宇宙ステーションの中に浮かべる見本です。部品どうしは角でぶつかり、当たった位置に応じて回転しながら跳ね返ります。浮いたままでも、文字の入力やボタン操作はそのまま使えます。

使い方

  1. 「全部コピー」して貼り付け、.ug-zg の大きさを決めます。
  2. 浮かせたい部品に class="ug-zg-p" を付けます。中身は自由に差し替えられます。
  3. 部品は掴んで投げられます。軽く押すと、押した向きへ離れていきます。「ハッチを開ける」を押すと空気が抜け、部品が右の壁へ吸い寄せられます。

カスタマイズ

  • 跳ね返りの強さは pair() の .75（部品どうし）と walls() の .7（壁）です。
  • 慣性の残り方は Math.pow(.9, h) です。1に近いほど、いつまでも漂い続けます。押したときに離れていく速さは recoil() の 150 です。

注意

浮いている間は部品の位置が変わります。大事な操作に使うときは、「重力を戻す」で元の配置に戻せるようにしておいてください。部品の数は10個前後が目安です。

S-002風船で浮くカードCRAZY度 ★★★
糸でつながった風船の浮力でカードが浮かびます。風船は掴んで振り回せて、触ると割れます。残りが1つになると、カードはゆっくり沈みます。
Verlet積分糸の物理Canvas 2DWeb Audio

これは何？

カードの四隅と糸の点を、位置で計算する物理（Verlet積分）で動かしています。糸は伸びずにたるみ、風船1つ分の浮力ではカードを支えきれません。カードは本物のボタンで、押すと風船が1つ増えます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 風船は掴んで振り回せます。軽く触れると割れ、カードを押すと新しくふくらみます（最大6個）。
  3. キーボードでは、カードを選んで Enter で風船を足し、Delete で1つ割れます。

カスタマイズ

  • 浮力は LIFT、重力は G、風船の大きさは RB です。風船1つでも浮かせたいときは、LIFT を2600くらいまで上げます。
  • 風船の色は COLORS です。

注意

スマホでは、風船やカードの上で触れたときだけスクロールを止めています。それ以外の場所では、縦に指を動かすとページがスクロールします。

S-003シャボン玉CRAZY度 ★★★
押したまま動かすとシャボン玉がふくらみ、速く振るとちぎれて次々に飛びます。膜の色は光の干渉から計算していて、膜が薄くなると黒ずんでから割れます。
WebGL薄膜干渉Pointer Events

これは何？

シャボン玉の膜の厚さ（上ほど薄く、渦を巻いて流れる）から、赤・緑・青の光がどれだけ強め合うかをGPUで計算して色を出しています。膜は時間とともに薄くなり、最後は色が抜けて黒く見えてから割れます。本物のシャボン玉でも起きる現象です。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 押したまま動かすと吹けます。速く振ると玉がちぎれて列になり、軽く押すと小さな玉が3つ出ます。スマホでは、縦に動かすとページのスクロールになるので、横に振って吹きます。
  3. 玉を押すと割れます。押したままなぞると、触れた玉が次々に割れます。Enter キーでも吹けます。

カスタマイズ

  • 一度に浮かべられる数は MAX（12）、玉の寿命は make() の R(9, 16) 秒です。
  • 膜の厚さはシェーダーの mix(820.,240.,…)（ナノメートル）です。全体を厚くすると淡い色に、薄くすると金や青の濃い色になります。

注意

背景の格子もシェーダーで描いていて、玉を通すと歪んで見えます。背景を変えるときは bg() を書き換えます。WebGLが使えない環境では、輪郭だけの簡易表示になります。

S-004トラクタービームUFOCRAZY度 ★★★★
押している間、UFOが真下にビームを出し、牛や木箱を回転させながら吸い上げます。ビームから外れた物は、少し遅れて重さを取り戻して落ちます。
Canvas 2DPointer EventsWeb Audio

これは何？

円すい形のビームの中にある物だけを浮かせ、UFOの真下へ寄せながら吸い込む見本です。吸い上げられる途中の物はくるくる回り、ビームを止めるとふわっと遅れて落ちます。7つすべて回収すると、少し置いて地上へ返します。

使い方

  1. 「全部コピー」して貼り付けます。
  2. マウスでは、UFOがポインターを追いかけ、押している間ビームが出ます。スマホでは押したまま左右に動かします。
  3. キーボードでは、矢印キーで移動、スペースキーでビームです。

カスタマイズ

  • 吸い上げる物の並びは KINDS、大きさは SIZE、絵は thing() で描いています。
  • 浮く速さは update() の -440、ビームの太さは bt（上）と bb（下）です。

注意

縦のスクロールは止めていないので、スマホで指を縦に動かすとビームが切れます。音を付けた場合、うなり音はビームを出している間だけ鳴ります。

S-005軌道を回る文字CRAZY度 ★★★
文字が惑星のまわりを楕円の軌道で回ります。近づくほど速く、離れるほどゆっくり。つまんで投げると、放した速さのまま新しい軌道に乗ります。
万有引力ケプラーの法則Canvas 2D

これは何？

文字1つ1つに万有引力だけをかけて動かしています。楕円の軌道も、惑星に近いほど速くなる動き（ケプラーの第2法則）も、計算の結果として自然に出てきます。最後に投げた文字が掃いた扇形を薄く表示していて、どこでも面積が同じになります。

使い方

  1. 「全部コピー」して貼り付け、文字は data-text で変えます。
  2. 文字をつまむと、放したときの飛び方の予測線が出ます（緑＝周回、赤＝惑星に衝突、黄＝脱出）。
  3. 周回中の文字に軽く触れると加速します。「文字を戻す」で定位置へ戻ります。

カスタマイズ

  • 基準の円軌道を1周する秒数は PERIOD（7秒）です。
  • 打ち上げるときの速さのばらつきは launch() の R(.8, 1.04) です。1に近づけるほど円に近い軌道になります。

注意

文字数は10字程度までが目安です。惑星にぶつかった文字や遠くへ飛び去った文字は、定位置に戻ります。スマホでは、文字の上で触れたときだけスクロールを止めています。

S-006タンポポの綿毛CRAZY度 ★★
なぞると風が起き、強い風を受けた綿毛から1本ずつ離れて漂います。たくさん飛ばすと、綿毛が空中で集まって文字になり、また散っていきます。
Canvas 2D風の場Pointer EventsWeb Audio

これは何？

タンポポの綿毛を球の上に84本ずつ並べ、奥と手前を描き分けて立体的に見せています。なぞった跡にはしばらく風が残り、強い風を受けた綿毛から離れます。離れた綿毛は傘で風を受けて流され、ゆっくり沈みます。ほとんど飛んだ花は、少しすると生え直します。

使い方

  1. 「全部コピー」して貼り付けます。
  2. なぞると風が起き、押したままにすると、押した場所から外へ息を吹きかけます。マウスは動かすだけでも弱い風が起きます。
  3. キーボードでは、Enter や矢印キーで横から風を吹かせられます。

カスタマイズ

  • 集まって作る文字は data-message で変えます。空にすると文字は作りません。
  • 綿毛の数は NS、離れやすさは seed() の R(70, 260) です（小さいほど飛びやすくなります）。

注意

縦のスクロールは止めていないので、スマホでは横になぞると風が起きます。綿毛が増えるほど描く量が増えるので、花は3つ程度にしてください。動きを減らす設定では文字は作りません。