CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.02
CRAZY度 ★★★★ ─ 表示破損の恐れ

グリッチ

色ずれ・走査線・ブロック崩れ・文字化けで、画面が本当に壊れたように見せる6本です。WebGLのデータモッシュ、文字コードを取り違えた本物の文字化け、画素を並べ替えるピクセルソートなど、壊し方の仕組みをそれぞれ変えています。どれも数秒で元に戻ります。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001データモッシュCRAZY度 ★★★★★
押したままなぞると、絵がブロックごとに引きずられて流れ出し、離すと少しずつ元に戻ります。スマホでは横になぞると流れ、タップで乱れます。
WebGLフレームバッファシェーダーWeb Audio

これは何？

動画の圧縮データが壊れたときに起きる「データモッシュ」を、WebGL（GPU）で再現した画面です。押している間は新しい絵（キーフレーム）を描かずに、前のコマをブロックごとにずらして写し続けます。そのため、なぞった方向へ絵が流れて混ざり合います。離すと、ブロック単位で元の絵が戻ってきます。

使い方

  1. 「全部コピー」して貼り付け、.ug-mosh の大きさ（高さ）を決めます。
  2. 崩す絵は paint() の中でキャンバスに描いています。
  3. スマホでは、横になぞると流れ、タップするとその場で乱れます。縦に動かしたときは、ふつうにページがスクロールします。
  4. キーボードでは、フォーカスしてEnterかスペースで崩れます。

カスタマイズ

  • 画像を崩すなら、paint() で drawImage を使います。
  • ブロックの大きさは Blk の 12、なぞった影響が届く範囲は Rad の .22、離してから戻り始めるまでは 650 ミリ秒です。
  • 何もしていないときに短く乱れる間隔は idle() の 2200 + 0〜3000 ミリ秒です。

注意

崩れるのはキャンバスに描いた絵だけで、HTMLの文章は崩れません。WebGLが使えない環境では静止画になります。画面に見えている間は数秒おきに短く乱れます（動きを減らす設定では乱れません）。

S-002裂けるグリッチ見出しPC推奨CRAZY度 ★★★★
マウスを速く動かすほど、カーソルに近い段が横に裂けて色がにじみます。押すと全体が大きく裂け、1段だけ縦に引き伸ばされます。
clip-pathtext-shadowPointer EventsWeb Audio

これは何？

見出しを横に切った8枚の複製で覆い、1枚ずつ左右にずらして赤と水色の色ずれを付ける見出しです。カーソルの速さと高さに合わせて、カーソルに近い段ほど大きく裂けます。押す・タップする・Enterで大きく崩れ、何もしなくても数秒おきに小さく乱れます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. .ug-rift の中の文字は自由に書き換えられます。
  3. スマホでは、タップすると大きく崩れます。

カスタマイズ

  • 段の数は K（8）、色ずれの2色は --ug-r と --ug-c です。
  • 裂ける幅は cut() の .16（見出しの横幅に対する割合）、切り方を変える間隔は 55 ミリ秒です。

注意

中身を複製して重ねるので、中に id 付きの要素やリンクを入れないでください。複製は読み上げから隠しているので、読み上げでは元の文字が1回だけ読まれます。暗い背景向けの配色です。

S-003本物の文字化けCRAZY度 ★★★
日本語をUTF-8のバイト列にして、Shift_JISやLatin-1として読み直した本物の文字化けです。押すたびに別の文字コードで化け、先頭から1文字ずつ修復されます。
TextDecoderTextEncoderWeb AnimationsWeb Audio

これは何？

文字列をいったんUTF-8のバイト列に変換し、ブラウザの TextDecoder で別の文字コードとして読み直して、本物の文字化け（「縺ｮ」「ã€」「銆」など）を作ります。化けた直後から、先頭から順に正しい文字へ戻っていきます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 化けさせたい要素に class="ug-moji-t" を付けます（中身は文字だけにします）。
  3. メールの部分か「文字コード」ボタンを押すと、Shift_JIS → Latin-1 → GBK → UTF-16 の順に化けます。

カスタマイズ

  • 使う文字コードの一覧は ENC です。
  • 化けたまま止めておく時間は 900 ミリ秒、修復の速さは step() の L / 1.3（長い文でもおよそ1.3秒で直る）です。

注意

化けた見た目の文字は読み上げから隠し、正しい文字を別に持たせているので、読み上げでは化けません。化けている間に文字を選んでコピーしても意味をなさないので、読ませたい本文ではなく、演出の場面に使ってください。

S-004ピクセルソートCRAZY度 ★★★★
なぞった列の明るい画素が明るさの順に並べ替えられ、絵が上から溶けて垂れていきます。手を止めると巻き戻って元の絵に戻ります。
Canvas 2DgetImageData型付き配列Web Audio

これは何？

キャンバスの画素を getImageData で取り出し、縦1列ごとに「一定より明るい区間」を明るい順に並べ替える、ピクセルソートという技法です。並べ替えた列を上から少しずつ見せるので、絵が溶けて垂れていくように見えます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 押したままなぞると強く、マウスを乗せて動かすだけでも弱く溶けます。押し続けると、その場所がどんどん溶けます。
  3. スマホでは、横になぞると溶け、タップした場所も溶けます。縦に動かしたときは、ふつうにページがスクロールします。
  4. キーボードでは、Enterかスペースで左から右へ全体が溶けます。

カスタマイズ

  • 溶け具合の段階ごとのしきい値は LV です。数字が小さいほど、暗い部分まで溶けます。
  • なぞる筆の太さは brush() の W * .07、手を止めてから戻り始めるまでは 900 ミリ秒です。
  • 絵は paint() で描いています。画像を使うなら drawImage に差し替えます。

注意

ほかのサイトに置かれた画像は、ブラウザの制限で画素を読み出せません。画像を使うときは、同じサーバーに置いたものを使ってください。キャンバスが大きいほど処理が重くなります。

S-005放送事故テレビCRAZY度 ★★★★
画面を左右にドラッグするとチャンネルがずれ、映像が流れて砂嵐と色抜けが増えます。タップすると放送事故が起き、SIGNAL LOSTの画面を経て戻ります。
Canvas 2DImageDataPointer EventsWeb Audio

これは何？

夜景の中継映像を映すテレビを、チャンネルのずれに合わせて壊していく見本です。ずれが大きいほど、横揺れ・縦に流れる同期外れ・二重映り・色抜け・砂嵐が強くなります。手を離すと、自動で元のチャンネルに戻ります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 画面を左右にドラッグするとずれ、タップ（クリック）すると放送事故が起きます。スマホで縦に動かしたときは、ふつうにページがスクロールします。
  3. キーボードでは ← → でずれ、Enterかスペースで放送事故が起きます。

カスタマイズ

  • 映像は drawScene() で毎コマ描いています。流れるテロップの文は TICKER です。
  • 放送事故の長さは frame() の .8（崩れる）、2.8（SIGNAL LOST）、3.3（戻る）秒です。
  • 元のチャンネルへ戻る速さは、バネの 60（強さ）と 12（減衰）です。

注意

画面に見えている間だけ動きます。ブラウン管らしいにじみを出すため、わざと320×240で描いて引き伸ばしています。動きを減らす設定では、何もしていないときの更新をゆっくりにしています。

S-006電波ジャックCRAZY度 ★★★★★
押すとページ全体に1.4秒だけ電波障害が起きます。画面には色のずれた帯と反転したブロックが走り、このカードはSVGフィルターで横に裂けて赤がずれます。
SVG フィルターfeDisplacementMapmix-blend-modeWeb Audio

これは何？

ページ全体に1.4秒だけ電波障害を起こすボタンです。画面全体を覆う透明なキャンバスを mix-blend-mode: difference で重ねるので、下にあるページの色そのものが反転したり、色がずれたりして見えます。同時に、指定した要素へSVGフィルター（feTurbulence と feDisplacementMap）をかけて横に裂き、赤だけをずらします。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 裂きたい要素に data-ug-jack を付けます（いくつでも）。付けなければ、ボタンを囲む data-ug-shake の要素、それも無ければボタンの親要素が裂けます。
  3. 乱れている間にもう一度押すと、乱れが延長されます。

カスタマイズ

  • 乱れる時間は MS（1400ミリ秒）です。
  • 帯の色は paint() の BANDS、裂ける強さは R(10, 70) です。左上に出る文字も paint() の中にあります。

注意

光の点滅に配慮して、画面全体が一度に明滅しないようにしています（白黒が反転するのは小さなブロックだけです）。動きを減らす設定では、裂け・帯・ブロックを止めて、左上の表示だけを出します。大きな要素にSVGフィルターをかけると重くなるので、裂く要素は画面に収まる程度の大きさにしてください。