CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.19
CRAZY度 ★★★ ─ 屋内ニ天候発生中

天候エフェクト

カードの窓ガラスに雨粒が付いて流れ落ち、ボタンの上には雪が積もり、雷は近くの部品に落ちて焦げ跡を残します。部品の形と位置を測り、その上で天気を起こす6本です。傘の貸出は行っておりません。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001雨の窓ガラスCRAZY度 ★★★★
ガラスに当たった雨粒が集まって大きくなり、重くなると跡を引いて流れ落ちます。粒は向こうの夜景を逆さに映し、通り道の粒を飲み込んで合体します。
Canvas 2D屈折の表現合体判定Web Audio

これは何？

雨の夜の窓ガラスを canvas で描くカードです。小さな粒は当たった場所に留まり、ぶつかると合体し、一定の大きさを超えると止まったり進んだりしながら流れ落ちます。流れた跡は曇りが取れて夜景がくっきり見え、しばらくすると曇り直します。

使い方

  1. 「全部コピー」して貼り付け、.ug-wxpane の大きさを決めます。
  2. ガラスを押すと、そこに水がはねます。「雨量」で小雨・本降り・土砂降りを切り替え、「ワイパー」で一往復拭きます。
  3. 音を鳴らすときは、.ug-wxpane に data-sound を付けます。

カスタマイズ

  • 窓の向こうの景色は paint() の中で描いています。写真にするなら drawImage で描きます。
  • 降る量は LEVELS（10万px²あたり、1秒に降る大粒と霧粒の数）、流れ出す大きさは TH です。

注意

画面に見えている間は描き続けます（見えなくなると止まります）。ぼかしはキャンバスの縮小と拡大で作っているので、重い filter は使っていません。それでも土砂降りは粒が多く、古いスマホでは重くなることがあります。

S-002雪が積もるボタンCRAZY度 ★★★★
降ってきた雪がボタンやカードの上辺に積もり、角丸に沿って盛り上がって端からこぼれます。押すと雪が塊になって落ち、下の部品に積もり直します。
Canvas 2D高さマップgetBoundingClientRect

これは何？

部品の位置と角丸を測り、上辺に2pxごとの「雪の高さ」を持たせて積もらせる仕掛けです。急な段差はならされ、端からはみ出した分は塊になって落ちます。押した部品の雪は塊になって飛び、下にある部品や床に積もり直します。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 雪を積もらせたい部品に data-ug-snow を付けます。.ug-wxsnow の中なら、いくつ付けても構いません。
  3. ボタンはキーボードで押しても雪が落ちます。カーソルを左右に動かすと、その向きに風が吹きます。

カスタマイズ

  • 積もる高さの上限は CAP（26px）、高さを持つ間隔は COL（2px）です。
  • 降る量は count()、1粒で積もる量は pile() に渡している f.r * .55 です。

注意

部品の位置は、枠の大きさが変わったときに測り直します。部品をアニメーションで動かすページでは、雪がその場に置き去りになります。

S-003焦げ跡が残る落雷CRAZY度 ★★★★★
押した場所にいちばん近い部品へ雷が落ちます。稲妻は枝分かれしながら走り、当たった部品には樹の枝のような焦げ跡が残ります。
再帰Canvas 2DWeb AnimationsWeb Audio

これは何？

押した場所からいちばん近い部品（高い所にある部品ほど当たりやすい）に雷を落とします。稲妻は2点の中点をずらす処理を繰り返して折り曲げ、ときどき枝分かれさせています。当たった部品には、すすとリヒテンベルク図形（雷が走った跡に残る樹のような模様）が焼き付き、火の粉と煙が上がります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 雷を落としたい部品に data-ug-rod を付けます。
  3. 「落雷」ボタンをキーボードで押すと、どれかの部品に落ちます。「焦げを掃除」で跡を消します。

カスタマイズ

  • 枝分かれの確率は bolt() の .28、曲がり具合は .22 です。
  • 焦げの大きさは scorch() の s、模様の本数は fern() を呼ぶ回数（7本）です。

注意

光の点滅で気分が悪くなる人がいるため、強い光は1回の落雷につき1度だけにし、COOL（420ミリ秒）で1秒に3回を超えないようにしています。COOL は短くしないでください。動きを減らす設定の環境では光らせず、色の変化だけにします。枠の大きさが変わると焦げ跡は消えます。

S-004曇りガラスCRAZY度 ★★★
息で曇ったガラス越しのクーポンです。指でなぞった所だけ曇りが晴れて読めるようになり、縁から水滴が垂れ、しばらくすると曇り直します。
clip-path: path()Canvas 2DPointer Events

これは何？

中身を2枚重ね、下の1枚はぼかして曇らせ、上のくっきりした1枚を「なぞった跡の形」で切り抜いて見せる仕掛けです。跡は2.4秒ほど残ったあと縁から曇り直し、ときどき水滴が筋を引いて垂れます。中身はHTMLのままなので、読み上げソフトにはそのまま読まれます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. .ug-wxfog-in の中身は自由に差し替えられます。背景色を付けておくのが条件です。
  3. 「息を吹きかける」で、全体を曇らせ直します。

カスタマイズ

  • 跡が残る秒数は HOLD、曇り直すまでの秒数は FADE です。
  • 指の太さは size() の中の RAD です。

注意

なぞって遊ぶため、スマホではこの枠の上でページがスクロールしません（touch-action: none）。ぼかし用に中身を1枚複製するので、フォームや動画は入れないでください。

S-005カードの中の竜巻CRAZY度 ★★★★★
カードの中に竜巻が起き、近くのタグやボタンを巻き上げて振り回し、外へ放り出します。収まると部品は元の位置へ戻ります。
Canvas 2DWeb AnimationsWeb Audio

これは何？

渦を巻く粒で竜巻を描き、近づいた部品（本物のHTML）を渦に乗せて回し、上まで運んで放り出します。渦の奥を回っている部品は小さくなり、竜巻の後ろに隠れます。竜巻は9秒で消え、散らばった部品はばねのような動きで元の場所に戻ります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 巻き上げたい部品に class="ug-wxtwist-chip" を付けます。
  3. ボタンかカードを押すと発生します。発生中にカードを押すと、竜巻がそちらへ向かいます。

カスタマイズ

  • 続く秒数は LIFE（9秒）、回る速さは SPIN、粒の数は N です。
  • 部品を渦に乗せておく時間は c.tmax（1.2〜2.6秒）です。過ぎると fling() で放り出します。

注意

竜巻と部品はカードの外へ出ません（overflow: hidden）。部品の transform を上書きするので、もともと transform で動かしている部品には使えません。

S-006オーロラの夜CRAZY度 ★★★
WebGLで描いたオーロラのカーテンが夜空で揺れます。カーソルの近くだけ持ち上がり、「磁気嵐を起こす」で明るく速くなって、下の縁が赤く染まります。
WebGLシェーダーfbmノイズWeb Audio

これは何？

GPUのシェーダーで、ノイズを重ねたカーテンを5枚描くオーロラです。下の縁がくっきりして上へ薄れていく形と、縦に走る光の筋を作っています。強い磁気嵐のときに下の縁が赤紫に染まる様子も入れてあり、画面のKp指数も連動して上がります。

使い方

  1. 「全部コピー」して貼り付け、.ug-wxaurora の大きさを決めます。
  2. 文字やボタンは .ug-wxaurora-ui の中に自由に置けます。
  3. 「磁気嵐を起こす」か空を押すと、嵐になって4秒ほどで収まります。

カスタマイズ

  • 色はシェーダーの vec3(.18,1.,.55)（緑）と vec3(.45,.3,1.)（紫）、嵐の赤は vec3(1.,.28,.55) です。
  • カーテンの枚数は for の 5、描く解像度は .6 です。

注意

オーロラはぼけていてよい絵なので、画面の解像度の6割で描いて引き伸ばしています。見えている間は描き続けます。WebGLが使えない環境では、CSSのグラデーションになります。