CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.12
CRAZY度 ★★★ ─ 挟マレ注意

バネ・マグネット

引っ張れば伸びて、離せばびよんと戻る。近づければ吸い付き、極を返せば弾き飛ばす。ばねの減衰と磁力を毎フレーム本当に計算して、指に返ってくる弾みと吸い付きを作り込んだ6本です。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001砂鉄と磁力線CRAZY度 ★★★★★
紙の上の砂鉄が、2本の棒磁石の磁力線に沿って並びます。磁石を動かすと模様が流れ、紙をトンと叩くと砂鉄が跳ねて、極のまわりに集まります。
Canvas 2D磁場の計算Pointer EventsWeb Audio

これは何？

数千本の砂鉄の粒を、2本の棒磁石が作る磁場に沿って毎フレーム回転させるキャンバスです。棒磁石は両端のN極とS極から磁場を出す形で計算しているので、本物の砂鉄の実験と同じ模様になります。紙を叩くと砂鉄が跳ね、磁場の強い方へ寄っていきます。

使い方

  1. 「全部コピー」して貼り付け、.ug-filings の大きさを決めます（高さは min-height）。
  2. 磁石の真ん中をつかむと移動、端をつかむと回転、軽く押すと極が入れ替わります。何もない紙を押すと叩いたことになり、なぞると砂鉄を払えます。
  3. スマホでは、磁石の上で触れ始めたときだけページのスクロールを止めます。紙の上を縦になぞるとページがスクロールし、横になぞると砂鉄を払えます。
  4. キーボードでは、枠にフォーカスして矢印キーで移動（Shiftで大きく）、Q／E で回転、F で極の反転、スペースで叩く、1／2 で動かす磁石を選びます。

カスタマイズ

  • 砂鉄の数は W * H / 85（900〜3400本）です。
  • 磁石を3本にするなら、mags.push() を1行足します。磁場は磁石の数だけ自動で足し合わせます。
  • 揃う速さは step() の 5 + 30 * stir、叩いたときに寄っていく速さは 50 です。

注意

砂鉄の向きは毎フレーム全部計算します。模様が落ち着くと描画を止めるので、置いておくだけなら負荷はかかりません。叩き続けると砂鉄は極のまわりに集まっていき、元のばらばらな状態には戻りません（実物と同じです）。戻したいときはページを読み直してください。

S-002コイルばねボタンCRAZY度 ★★★★
天井からコイルばねで吊ったボタンです。どの向きに引っ張っても巻きが伸び縮みし、離すと揺れながら戻ります。押すとびよんと弾みます。
ばね・減衰の物理SVGPointer EventsWeb Audio

これは何？

ばねの力（フックの法則）・空気抵抗・重力を毎フレーム計算して動かす、吊り下げ式のボタンです。コイルはSVGで立体的に描き直しているので、引くと巻きの間が開き、縮めると詰まって、それ以上は縮みません。右上に今の伸びとばねの力を表示します。

使い方

  1. 「全部コピー」して貼り付けます。ボタンをつかんで引っ張り、離します。
  2. 押すだけ（キーボードではEnterかスペース）だと、下へ引かれてびよんと弾みます。
  3. スクロールを止めるのはボタンの上だけです。まわりを縦になぞれば、スマホでもページがスクロールします。
  4. 本物のボタンとして使うときは、click の中の処理の横に、送信などの処理を足します。

カスタマイズ

  • ばねの硬さは K = 70、揺れの収まりやすさは C = 2.1 です。C を大きくするほどすぐ止まります。
  • 巻き数は TURNS、コイルの太さは coil() の 13 です。

注意

揺れている間はボタンの位置が変わります。何度も押す必要がある本番のボタンには向きません。動きを減らす設定の環境では、揺れがすぐ収まるように減衰を強めています。

S-003吸い付く磁石メニューCRAZY度 ★★★★PC推奨
カーソルが磁石になり、近くのメニューがカチッと吸い付いて付いてきます。クリックすると極が反転して全部弾き飛ばし、離れると元の並びへ戻ります。
引力と反発Pointer EventsWeb Audio

これは何？

本物のボタンが冷蔵庫のマグネットのように振る舞うメニューです。カーソルの磁石に近いほど強く引かれ、磁石の縁まで来ると貼り付きます。部品どうしは重ならずに押し合い、クリックで極を返すと反発して四方へ飛び、ばねで元の位置へ戻ります。

使い方

  1. 「全部コピー」して貼り付け、.ug-magnav-item の文言を差し替えます。リンクにするなら <button> を <a href> に替えてもそのまま動きます。
  2. スマホでは、何もない所を軽く押すとそこに磁石を置き、横になぞると磁石が付いてきます。もう一度押すと反発して、磁石が外れます。縦になぞるとページがスクロールします（スクロールは止めません）。
  3. キーボードではふつうのメニューとして Tab で移動し、Enter で選べます（磁石は動きません）。

カスタマイズ

  • 磁石が届く距離は RANGE = 230、引く力は 5200 です。
  • 元の位置へ戻るばねは 55、反発の強さは repel() の 2300 です。

注意

マウスのときは枠の中でふつうのカーソルを隠し、磁石の絵に置き換えます。メニューを探しにくくなるので、遊び心を見せたいページの一部に使ってください。

S-004振り子ウェーブCRAZY度 ★★★
長さの違う15本の振り子を、押すとまとめて引いて離します。蛇のようにうねり、2列・3列に分かれて、30秒後にまた一列に揃います。
Canvas 2D3D投影単振動Web Audio

これは何？

30秒の間に、1本目は18往復、2本目は19往復……15本目は32往復するよう長さを決めた振り子です。同時に離すと少しずつずれて波になり、ちょうど半分の15秒で2列、10秒で3列に分かれ、30秒で元どおり揃います。下の札に、今どの形かを表示します。

使い方

  1. 「全部コピー」して貼り付けます。押すと15本まとめて引いて離し、波が始まります。マウスでは上下にドラッグして引き具合を決められます。
  2. 横になぞると、通った振り子を1本ずつ弾けます（音をONにすると、短い振り子ほど高い音が鳴ります）。スマホで縦になぞると、ページがスクロールします。
  3. キーボードでは、枠にフォーカスしてスペースかEnterで、まとめて引いて離します。「早送り」で4倍速になります。

カスタマイズ

  • 揃うまでの時間は GAMMA = 30（秒）、1本目の往復数は KC = 18、本数は N = 15 です。
  • 揺れの残り方は TAU = 80（秒）です。小さくすると早く止まります。

注意

揺れている間は描き続けますが、画面の外へスクロールすると止まります。揺れが収まると描画も止まります。

S-005CSSだけのばねCRAZY度 ★★
スイッチ・タブ・押しボタンのばねの動きは、CSSの linear() イージングだけで動いています。下の2つのつまみで、ばねの硬さと減衰から値を作れます。
linear()CSS transition:has()

これは何？

ばねの揺れを57個の点に分けて linear() に書き込んだイージングです。linear() は点と点を直線でつなぐだけですが、点を細かく並べると行き過ぎて戻る動きも表せます。JavaScriptの物理計算なしで、transition だけでばねになります。

使い方

  1. CSSだけで使うなら、<style> の --ug-ls-ease と --ug-ls-dur の値をコピーして、自分の transition に入れます。
  2. つまみで硬さと減衰を変えると、上の部品の動きと値が変わります。「この値をコピー」で transition の1行をコピーできます。
  3. 値を作る <script> は、つまみを使わないなら消してもかまいません（スイッチ・タブ・ボタンはCSSだけで動きます）。

カスタマイズ

  • 減衰を小さくするほど、何度も行き過ぎて戻ります。2〜4あたりは、わざと大げさにしたいとき向けです。
  • 点の数は build() の 50（1秒あたり）です。速く震えるばねほど点が多く要ります。

注意

linear() に対応していない古いブラウザでは、行き過ぎが1回だけの cubic-bezier に置き換わります。タブはラジオボタンの name でまとまるので、同じページに2つ置くときはスクリプトが名前を付け分けます。スクリプトを消す場合は手で変えてください。

S-006スリングショット送信CRAZY度 ★★★★★
「送信」の玉をゴムで引いて飛ばし、ばねで吊った的に当てると1件ずつ送信されます。引きすぎるとゴムが切れます。
Canvas 2Dばね振り子衝突Web AudioVibration

これは何？

パチンコ（Y字のゴム鉄砲）で「送信」の玉を飛ばす送信ボタンです。引いている間は飛ぶ道筋が点で見え、離すとゴムが震えながら戻ります。的はばねで吊ってあり、当たると伸び縮みしながら大きく揺れます。3つ当てると全部送信です。

使い方

  1. 「全部コピー」して貼り付けます。玉をつかんで後ろへ引き、離します。スマホでスクロールを止めるのは、玉の上で触れ始めたときだけです。
  2. 引きすぎるとゴムが切れ、少しすると張り直されます。
  3. キーボードでは、枠にフォーカスして矢印キーで引き（Shiftで大きく）、スペースかEnterで放ちます。Escでやめます。何も引かずにスペースを押すと、まだ当てていない的を狙って撃ちます。
  4. 的に当たったときの処理は hit() の中、全部当てたときの処理は sent === tg.length の分岐に足します。

カスタマイズ

  • 飛ぶ強さは POWER = 8.6、引ける長さは MAXP = 140、切れる長さは SNAP = 205 です。
  • 的の位置・吊るす長さ・大きさは layout() の X・LS・RS です。
  • 幅が640pxより狭いときは、全体を縮めて同じ遊び方ができるようにしています。

注意

遊ぶための送信ボタンです。すぐ送信したい場面では、ふつうの送信ボタンも横に置いてください。的に当たると0.05秒ほど動きを止め、枠を少し揺らします（動きを減らす設定の環境では止めも揺れもしません）。