CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.16
CRAZY度 ★★★★★ ─ 割レ物・壊シ放題

破壊可能UI

殴ればへこみ、引っぱれば裂け、押しつぶせば平たくなる。壊れ方は素材ごとに作り分け、叩いた場所・破った線・潰した量がそのまま形に残ります。どれも元に戻すボタン付きなので、遠慮なく壊してください。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001へこむ鉄板ボタンCRAZY度 ★★★★★
叩いた場所が鉄板ごとへこみ、凹凸と陰影が残ります。叩くほど塗装が剥げて地金が見え、文字もゆがみます。
Canvas 2Dハイトマップ法線ライティングWeb Audio

これは何？

鉄板でできた送信ボタンです。押した点に楕円のへこみと、押し出された縁の盛り上がりを高さとして足し、その高さから光の当たり方を1ピクセルずつ計算して描いています。へこみが深い所は塗装が剥げて、筋目の入った地金が光ります。ボタンとしての働きはそのままです。

使い方

  1. 「全部コピー」して、ページのHTMLに貼り付けます。
  2. ボタンの文字は data-label で変えます（文字はキャンバスに描くので、読み上げ用に aria-label も同じにします）。
  3. 送信などの処理は、.ug-dent-plate の click に足します。「板金で直す」を押すと、トントンと叩き出す動きで平らに戻ります。

カスタマイズ

  • へこみの大きさは dent() の R(20, 30)（半径）と R(4, 5.5)（深さ）です。
  • 塗装の色は draw() の 214, 58, 38、剥げやすさは 4.5 + C[i] * 5（小さいほど早く剥げる）です。

注意

叩くたびに全ピクセルを計算し直します。計算量を抑えるため、描く解像度は約15万ピクセルまでに制限しています。幅を変えると、へこみはいったん消えます。

S-002引き裂ける請求書CRAZY度 ★★★★
指でなぞった線で紙が裂け、白い繊維の断面を見せて2枚に分かれます。テープで貼って直せます。
clip-pathSVGPointer EventsWeb Audio

これは何？

なぞった線に沿って裂けていくカードです。裂け始めはいちばん近い紙の端からで、繊維に引っぱられて少し蛇行します。途中で止めると切れ込みが残り、裂け目の先には切れかけの繊維が渡ります。反対側の端まで届くと2枚に分かれ、断面の白い層と、はみ出た繊維が見えます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. .ug-rip-card の中身は自由に差し替えられます。分かれた2枚はカードの複製なので、中身がそのまま裂けます。
  3. キーボードでは、カードを選んでEnterかスペースで上から下へ破ります。
  4. 「テープで貼る」で元の位置に戻り、跡にテープが貼られます。もう一度押すと新しい紙になります。

カスタマイズ

  • 裂け目の蛇行は extend() の R(-.3, .3) です。0にするとまっすぐ裂けます。
  • 途中の切れ込みの開き具合は drawPartial() の 3.2、分かれた後の離れ方は R(16, 26) です。

注意

カードの上では、指でなぞるとページがスクロールしません（破る操作に使うため）。破れた2枚はカードを2枚複製して作るので、フォームや動画を入れたカードには向きません。

S-003吸い込むシュレッダーCRAZY度 ★★★★★
書類を刃まで押し込むと勝手に吸い込まれ、本物の中身が細切れになって出てきます。復元もできます。
clip-pathWeb AnimationsPointer EventsWeb Audio

これは何？

書類をつかんで下へ押し込み、刃に触れた瞬間から機械が一定の速さで引き込みます。引き戻そうとしても戻りません。刃の下からは、書類を12本に縦に切り抜いた細切れが扇のように開きながら出てきて、最後はくるくる落ちてごみ箱に積もります。細切れの1本1本は書類の複製なので、文字やグラフがそのまま切れています。

使い方

  1. 「全部コピー」して貼り付けます。
  2. .ug-shredder-doc の中身を差し替えると、それが細切れになります。
  3. 押し込まなくても「裁断する」で自動で入ります。「復元する」で細切れが舞い戻り、刃から逆に出てきて1枚に戻ります。

カスタマイズ

  • 細切れの本数は CUTS（12）、吸い込む速さは SPEED（85px/秒）です。
  • 出てくるときの開き方は makeStrips() の R(-6, 6)（角度）です。

注意

書類の大きさ（160×200px）と刃の位置は数値で決め打ちしています。大きさを変えるときは、CSSと SLOT・DW・DH をそろえて変えてください。書類の上では指でなぞってもスクロールしません。

S-004凹む液晶画面CRAZY度 ★★★★★
ハンマーで叩いた所が割れずに凹み、虹色の輪と黒いにじみが広がって、縦横に色の線が走ります。
WebGLシェーダーfbmノイズWeb Audio

これは何？

液晶が圧力で壊れたときの見え方を、WebGL（GPU）で再現したスマホです。叩いた点は凹んで画面がゆがみ、押された液晶に出る虹色の輪、漏れた液晶の黒いしみ（ふちが紫や緑ににじむ）、ちらつく縦横の線が重なります。しみは2〜3秒かけて広がります。7回目あたりから画面全体が暗く点滅し始めます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 画面の中身は paint() の中でキャンバスに描いています。drawImage でスクリーンショット画像などに差し替えられます。
  3. マウスではハンマーが指先についてきます。キーボードでは電話を選んでEnterで叩きます。「画面を交換する」で上から新しい画面に替わります。

カスタマイズ

  • 残る傷の数は MAX（12）です。超えると古い傷から消えます。
  • しみの大きさはシェーダーの .03+.055*h.w、広がる速さは h.z/.9 です。

注意

叩いてから4.5秒間と交換中だけ描き直し、それ以外は止まります。WebGLが使えない環境では、黒いしみだけを描きます。

S-005油圧プレスで潰れるボタンCRAZY度 ★★★★
長押しでプレスが下り、ボタンが樽のようにふくらんで潰れます。潰れた形のまま、本物のボタンとして押せます。
Canvas 2Dメッシュ変形塑性変形Web Audio

これは何？

「長押しで加圧」を押している間だけプレスが下ります。ボタンは潰れるほど横へ広がり、中ほどが樽のようにふくらみ、側面にしわが寄り、曲げられた端が白っぽくなり、ひびが入って破片が飛びます。少し押しただけなら弾性で戻り、それを越えた分は潰れたまま残ります。上にある本物の <button> は潰れた外形に合わせて大きさが変わるので、ぺちゃんこでも押せます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. ボタンの文字は .ug-hpress-btn の中身です。購入などの処理は、このボタンの click に足します。
  3. キーボードでは「長押しで加圧」を選んでスペースかEnterを押し続けます。「元に戻す」でぽんとふくらんで戻ります。

カスタマイズ

  • 弾性で戻る量は ELASTIC（高さの7%）、いちばん潰れたときの高さは BH * .12 です。
  • 横への広がりは SPREAD（柱の内側に収まるよう幅から自動で決めます）、ふくらみは map() の .26 です。

注意

ボタンの見た目はキャンバスに描き、本物のボタンは透明にして重ねています。ボタンのCSSを変えても見た目は変わらないので、色や形は paintTex() の中で変えてください。

S-006鉄球で解体するビルCRAZY度 ★★★★★
ウェブページでできたビルに鉄球をぶつけると、外壁が割れてゆがみ、支えを失った上の階が崩れ落ちます。
Canvas 2DVerlet積分破断する拘束Web Audio

これは何？

外壁にウェブページを描いたビルを、クレーンの鉄球で解体します。ビルは小さなマスの集まりで、マス同士は一定以上引っぱられると切れる継ぎ目でつながっています。速い鉄球が当たったマスは押しのけられて継ぎ目が切れ、強く押されたマスはゆがんだまま残ります。地面までつながっていない部分は支えを失って落ち、落ちた衝撃でさらに崩れます。

使い方

  1. 「全部コピー」して貼り付け、.ug-demolish の大きさを決めます。
  2. 鉄球をつかんで左へ引き、離すと振り子でぶつかります。「鉄球を振る」でも自動で振れます。
  3. 「建て直す」で、散らばったマスがすべて元の位置へ巻き戻ります。

カスタマイズ

  • 外壁の絵は facade() の中で描いています。drawImage で画像にも差し替えられます。
  • 継ぎ目の切れやすさは BR（マスの16%）、壁を壊せる鉄球の速さは WAKE（260px/秒）です。

注意

崩れた破片どうしはぶつからず、重なって積もります（計算を軽くするため）。鉄球の上だけはスマホで指を置いてもスクロールしません。すべてが止まると描くのをやめます。