CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.05
CRAZY度 ★★★★ ─ 本物の物理演算入り

重力・バウンド

ページの部品に重さと摩擦を持たせました。掴んで投げる、傾けて転がす、積んで崩す、を実際の物理計算で動かしています。計算は1/120秒刻みの小さな自前エンジンで、ライブラリは使っていません。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001重力スイッチUICRAZY度 ★★★★★
「重力ON」を押すと、設定パネルの部品がひとつずつ本物の重さを持って崩れ落ちます。落ちた部品は掴んで投げられ、「元に戻す」で元の位置へ帰ります。
剛体物理Pointer EventsWeb AnimationsWeb Audio

これは何？

ふつうのHTMLの部品（ボタン、タグ、入力欄、スイッチ）を、その場で物理演算の箱と円に置き換えて落とすパネルです。部品は互いにぶつかって積み重なり、マウスや指で掴んで投げられます。落ちたあともボタンやスイッチはそのまま押せます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 落としたい部品に data-ug-body を付けます。丸い部品は data-ug-body="circle" にすると円として転がります。
  3. 「元に戻す」かEscキーで、部品が元の位置へ飛んで戻り、ふつうのHTMLに戻ります。

カスタマイズ

  • 重力は W.gy = 2400（1秒あたりのpx）、落ちる前の溜めは 260 ミリ秒です。
  • 弾みやすさは e、滑りにくさは f で、部品の種類ごとに変えられます。
  • 「重力ON」は、落ちたあとに押すと全体を揺さぶるボタンになります。

注意

落としている間、部品は親要素から外して重ねて表示します。親の中の位置に頼ったスタイル（.親 span のような指定）は崩れるので、部品ごとにクラスでスタイルを書いてください。

S-002傾く玉箱CRAZY度 ★★★★
スマホを傾けると、箱の中のガラス玉が傾けた方へ転がります。パソコンではマウスを向けた方が下になります。月・地球・木星で重さが変わります。
DeviceOrientationVerlet積分Canvas 2D

これは何？

ガラス玉が70個入った箱です。スマホでは本体の傾きセンサーで重力の向きが決まり、パソコンではマウスのある方へ落ちます。センサーが使えないスマホでは、玉の上からなぞるとその方へ、空いたところを横になぞると左右に傾きます。クリック（タップ）した場所から玉を足せます。重力は月（1.62）・地球（9.8）・木星（24.8）の3段階です。

使い方

  1. 「全部コピー」して貼り付けます。
  2. iPhoneでは、傾きを使う前に許可が要ります。箱の中央に出る「傾きセンサーを使う」を押すと、許可を求める画面が出ます。
  3. キーボードでは、箱を選んで矢印キーで傾き、Enterで玉を足せます。

カスタマイズ

  • 玉の色は COLORS、最初の数は 70、上限は MAX = 160 です。
  • 地球の重力を画面で何px/s²にするかは BASE = 1500 です。
  • 壁での弾み方は walls() の .45 です。

注意

傾きセンサーは、https のページでしか使えません。箱の上を縦になぞるとページがスクロールし、玉の上で触れ始めたときだけスクロールを止めて玉を操作します。

S-003ジェンガタワーCRAZY度 ★★★★
木のブロックを13段積んだタワーです。端が見えている段のブロックをタップすると手前へ抜け、残りは本当に重さで支え合います。抜きすぎると崩れます。
剛体物理積み重ねCanvas 2D

これは何？

正面から見たジェンガです。ブロックの端（年輪の見える面）が3つ並ぶ段と、横長の面が見える段が交互に積まれています。端の見えるブロックはタップで手前へ抜けます。同じ段で両端を抜く、真ん中と片方を抜く、などすると上の段が傾いて崩れます。

使い方

  1. 「全部コピー」して貼り付けます。画面に入ったところで、上から1段ずつ積み上がります。
  2. ブロックはドラッグで掴んで動かしたり投げたりもできます。
  3. キーボードでは、タワーを選んで矢印キーでブロックを選び、Enterで抜きます。

カスタマイズ

  • 段の数は LAYERS = 13、ブロックの縦横比は bh * 1.65 です。
  • 崩れたと判定する傾きは .35（ラジアン）、崩れてから積み直すまでは 3200 ミリ秒です。

注意

横長に見える段は、奥行き方向に3本並んでいる扱いなので抜けません（押すと少し揺れます）。物体が40個ほど積み重なるので、1ページに何個も置くと計算が重くなります。

S-004ピタゴラ送信ボタンCRAZY度 ★★★★★
押すとピストンがドミノを倒し、最後のドミノが玉をはじきます。玉が2本の坂を転がってカップに入ったら送信完了です。
剛体物理ドミノの連鎖Canvas 2DWeb Audio

これは何？

からくり装置で送信する、わざと遠回りな送信ボタンです。ドミノ9枚の倒れ方も、玉の転がり方も、毎回その場で計算しています。カップに入ると完了の音が鳴り、少しして装置が元の形に組み直されます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 実際の送信処理は、カップに入ったところ（done() の中）に書きます。
  3. 11秒たっても玉が届かないときは、やり直しになります。

カスタマイズ

  • 装置の形は build() の中で、幅520×高さ360の座標で決めています。表示する大きさに合わせて自動で拡大・縮小します。
  • ドミノの枚数は 9、間隔は 28、重力は W.gy = 1600 です。

注意

装置の形を変えたときは、玉がカップまで届くかを何度か試してください。坂の角度や壁の位置が少し違うだけで、途中で止まることがあります。

S-005転がるサイコロCRAZY度 ★★★
サイコロをはじくと、立体のサイコロが2つ飛び出し、弾んで転がって止まります。止まった目の合計が出ます。
CSS 3Dmatrix3d回転行列Web Audio

これは何？

HTMLとCSSの3Dで作ったサイコロです。はじいた向きと強さで飛び、盤で弾み、壁で跳ね返り、転がる向きに合わせて面が回ります。止まりかけると一番上に近い面へ倒れて目が決まります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. サイコロをドラッグしてはじくと、その向きへ飛びます。盤のどこかをタップするか、Enterキーを押すと、ランダムな向きに振ります。
  3. 目が決まると、盤の上に合計が出ます（ゾロ目のときは一言付きます）。

カスタマイズ

  • サイコロの大きさは --s（56px）、盤の傾きは rotateX(28deg) です。
  • 転がるときの減速は 1400、弾み具合は .38 です。
  • 結果を使うときは、result() の中で a と b（それぞれの目）を受け取れます。

注意

目は見た目の物理から決めていて、確率がちょうど1/6になる保証はありません。抽選など公平さが要る用途には使わないでください。盤の空いたところを縦になぞるとページがスクロールし、サイコロの上で触れ始めたときだけスクロールを止めます。

S-006放り込むカートCRAZY度 ★★★★
商品のボタンを押すと、その商品が放物線を描いてかごへ飛び込み、中で積み重なります。「かごを空にする」でかごが傾いて中身がこぼれます。
剛体物理放物線Canvas 2DWeb Audio

これは何？

「カートに入れる」を、本当に物を放り込む動きにした見本です。押したボタンの位置からかごの口へ届く速さを計算して投げるので、ボタンがどこにあっても入ります。入った商品は形ごとに転がったり積み重なったりして、かごの中の数が数えられます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 商品は data-item の名前（orange / milk / donut / gift / ball）で選びます。
  3. かごの中や床の商品は、ドラッグで掴んで投げ直せます。

カスタマイズ

  • 商品の形と絵は ITEMS にまとめてあります。r が丸、w と h が四角です。
  • 飛んでいく時間は throwItem() の .45〜.85 秒、商品の上限は MAX = 32 です。

注意

かごの数は見た目の位置で数えています。実際のカートの中身は、ボタンを押したときにふつうに記録してください。