CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.06
CRAZY度 ★★★★ ─ UIが人見知りです

カーソル追従・逃走

カーソルの位置だけでなく速さと向きも読んで、先回りして逃げたり、群れごと散ったり、後ろから付いてきたりします。スマホでは指の位置を追い、タップで呼んだり脅かしたりできます。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001先読みで逃げる送信ボタンPC推奨CRAZY度 ★★★★★
カーソルの速さから少し先の位置を予測して逃げます。角に追い詰めると、カーソルの横をすり抜けて反撃します。逃げるたびに体力が減り、ばてたら捕まえられます。
Pointer Events予測回避Canvas 2DWeb Audio

これは何?

近づくと逃げる「押せないボタン」を、予測と体力で遊びとして成り立たせた見本です。カーソルの速さから0.2秒先の位置を予測し、20方向の逃げ道を毎回採点して、広く開いていて予測位置から遠い向きへ逃げます。角に追い詰めると、カーソルのすぐ横をすり抜ける向きを選んで跳び出します。

使い方

  1. 「全部コピー」して貼り付け、.ug-dodger の大きさ(高さ380px)を決めます。ボタンはこの枠の中だけを逃げ回ります。
  2. 逃げるたびに体力が減り、0になると「もう無理…」と動きが鈍くなります。そこで押すと捕まります。
  3. スマホでは、指でボタンをタップすると押される前に跳んで逃げます。何度か逃がすとばてるので、そこでタップします。指を横になぞると、指から逃げます。
  4. キーボード(TabキーとEnterキー)では逃げずにそのまま押せます。

カスタマイズ

  • 予測する時間は lead = .2(秒)、逃げ始める距離は RAD(110〜180px)です。
  • 疲れやすさは jump() の .26(反撃)と .16(ふつうに跳ぶ)、回復の速さは .12 です。
  • セリフは jump() と click の中の文言を差し替えます。捕まったときの処理は click の中に書きます。

注意

本物の送信ボタンや購入ボタンには使わないでください。押したい人が押せないのは不具合と同じです。キャンペーンの遊びや、エラーページ、隠し要素など「押せなくても困らない」場所に置いてください。スマホでは舞台の上でも縦にスクロールでき、ボタンの上だけスクロールを止めています(touch-action)。

S-002逃げ惑う大群CRAZY度 ★★★★
広さに合わせて90〜340匹の魚が群れで泳ぎ、カーソルを避けて割れます。驚きは隣から隣へ伝わり、押すと一斉に散ります。
ボイド空間分割Canvas 2DWeb Audio

これは何?

ボイドと呼ばれる群れの計算で、1匹ずつが「近くの仲間と向きをそろえる・寄り集まる・ぶつからない」の3つだけを守って泳ぎます。カーソルの少し先から逃げ、驚いた魚は明るく光り、その驚きが周りへ連鎖して群れが割れていきます。

使い方

  1. 「全部コピー」して貼り付け、.ug-shoal の大きさを決めます。魚の数は広さに合わせて90〜340匹に自動で決まります。
  2. 押した場所(スマホはタップした場所)から衝撃が出て、一斉に散ります。指を横になぞると、指から逃げます。縦になぞるとページがスクロールします。
  3. キーボードでは、選んでEnterキーかスペースキーで散ります。

カスタマイズ

  • 群れの性格は step() の係数で変わります。向きをそろえる 1.6、寄り集まる 2、離れる 2600 です。
  • 逃げ始める距離は FR(120px)、ふだんの速さは 70、驚いたときの上乗せは 330 です。
  • 色は TONE(驚き具合の4段階)で変えられます。

注意

画面に見えている間はずっと動き続けます(見えなくなると止まります)。1ページに何枚も置くと重くなるので、1枚までにしてください。

S-003獲物を追うトカゲCRAZY度 ★★★★★
関節つきのトカゲがカーソルを追い、4本の脚で地面を踏みしめて歩きます。押すと虫が飛び、舌で捕って飲み込みます。
逆運動学手続き型アニメーションCanvas 2DWeb Audio

これは何?

18個の節がつながった背骨と、膝のある4本の脚でできたトカゲです。頭が目標へ向かい、体は前の節に引っぱられて付いていきます。足は地面に置いたまま、離れすぎたら対角の脚から踏み出し、膝の角度は逆運動学(足先の位置から関節の角度を逆算する計算)で決めています。アニメーションの絵は1枚も使っていません。

使い方

  1. 「全部コピー」して貼り付け、.ug-stalker の大きさを決めます。
  2. カーソルを追い、追いついてカーソルが止まると舌でなめます。
  3. 押すとその場所に虫(ほたる)が飛びます(5匹まで)。トカゲは虫を優先して追い、舌で捕まえて飲み込みます。飲み込んだこぶが体を下っていきます。
  4. スマホではタップで虫を放します。指を横になぞると指を追います(縦になぞるとページがスクロールします)。キーボードではEnterキーで虫が飛びます。

カスタマイズ

  • 体の太さと長さは PROF(頭からしっぽまでの太さの並び)で決まります。数を増やすと長くなります。
  • 歩く速さは 230(虫を追うときは 320)、曲がる速さは 5.5 です。
  • 体の色は #A9D132、脚の色は #8DB528 です。

注意

生き物が苦手な人もいます。ページの主役にする場合は、最初から大きく画面に出さないなどの配慮をしてください。カーソルが枠の外に出て何もしなければ、少し歩き回ってから止まります。

S-004首を振る監視カメラCRAZY度 ★★★★
立体の監視カメラ2台がカーソルへ首を振り、レンズから光を当てます。2台に捉えられたまま止まっていると警報が鳴ります。
3D投影ばね運動Canvas 2DWeb Audio

これは何?

箱と角柱の面を自前で回転させ、遠近法で描いた立体の監視カメラです。面ごとに光の当たり方を計算して陰影を付けています。首はばねの動きで追うので、少し行き過ぎてから戻ります。2台はばねの強さが違い、片方は機敏、片方はのんびり追います。

使い方

  1. 「全部コピー」して貼り付け、.ug-watch の大きさを決めます。
  2. カーソルが2台に同時に捉えられ、ゆっくり動いている間だけ検知が進みます。100%になると警報が鳴り、枠が赤く点滅します。素早く動けば逃げられます。
  3. カーソルが外に出ると、最後の場所を少し見つめてから首を振って見回り、しばらくして止まります。
  4. スマホではタップした場所を3秒ほど見つめ、その間に検知が進みます。指を横になぞると追いかけます(縦になぞるとページがスクロールします)。キーボードでは矢印キーで目標を動かせます。

カスタマイズ

  • カメラの位置と首の機敏さは cams の u(横の位置 0〜1)と k(ばねの強さ)です。3台以上にもできます。
  • 検知までの時間は meter += dt / 1.4 の 1.4 秒、警報の長さは alertT = 2.2 です。
  • カメラの形は HEAD、色は各部品の [R, G, B] です。

注意

見張られている演出は、人によっては不快に感じます。ゲームやセキュリティ啓発など、文脈がはっきりした場所で使ってください。警報で枠が点滅するので、点滅を減らす設定(動きを減らす)では点滅を止めています。

S-005光学迷彩ボタンPC推奨CRAZY度 ★★★★
近づくとボタンが背景に溶けて消え、ゆらめきだけを残してじりじり逃げます。何もない所を押すと探知波で姿があらわになります。
Canvas 2D屈折表現CSS clip-pathWeb Audio

これは何?

カーソルが近づくとボタンが透明になり、その部分に背景を少し縮めて波打たせながら写します。透明な物が光を曲げているように見えるので、よく見ると輪郭のゆらめきで居場所が分かります。消えている間は、カーソルから壁伝いにゆっくり離れていきます。

使い方

  1. 「全部コピー」して貼り付け、.ug-cloak の大きさを決めます。
  2. 何もない所を押すと探知波が広がり、波が通ると迷彩がはがれて姿が見えます。
  3. 見つけて押すと回数が増え、少しして姿を消したまま遠くへ移ります。
  4. スマホでは指で触れた所が「近づいた」ことになります。舞台の上でも縦にスクロールでき、ボタンの上だけスクロールを止めています。キーボードでボタンを選ぶと、迷彩を解いて姿を見せます。

カスタマイズ

  • 背景の模様は paint() で描いています。迷彩はこの絵をずらして写すので、細かい模様ほどよく溶け込みます。
  • 消え始める距離は NEAR(120〜190px)、ゆらめきの強さは draw() の 2.5 と 4 です。
  • 探知波の速さは p.r += dt * 520 です。

注意

本物の送信ボタンや大事な操作には使わないでください。透明でも押せるので、隠し要素や宝探しの演出向きです。迷彩は paint() で描いた背景に溶けるもので、ページの本物の背景(画像や文章)は写りません。

S-006だるまさんがころんだカードPC推奨CRAZY度 ★★★
近づくとカードが壁や天井へ逃げて張り付きます。カーソルを止めている間だけ、そろりと元の場所へ戻ってきます。動かすと固まります。
Pointer Events状態遷移CSS transformWeb Audio

これは何?

人見知りのカードが並んだメニューです。カーソルが近づくと、カーソルから一番遠い壁へ走って張り付きます(天井なら逆さま、左右の壁なら横向き)。カーソルを止めると、見られていないと思って少しずつ戻ってきますが、動かした瞬間に「ぴたっ」と固まります。

使い方

  1. 「全部コピー」して貼り付けます。カードは .ug-shy-card を増減すれば、並びが自動で組み直されます。
  2. カードの色は各カードの --c、文言は <b> の中です。
  3. スマホでは、タップした場所に2.5秒ほど「鬼」が立ちます。じっとしていると戻ってきて、その間に別の場所をタップすると固まります。しばらくタップしないと全員が家へ帰ります。舞台の上でも縦にスクロールできます。
  4. キーボードでは、枠を選んでスペースキーを押すと全員が逃げます。

カスタマイズ

  • 逃げ始める距離は RAD(95〜150px)、戻り始めるまでの静止時間は still > .9(秒)です。
  • 逃げる速さは 1100、そろりと戻る速さは 55、カーソルが外に出たときに帰る速さは 280 です。

注意

カードは見た目だけの部品です。リンクにする場合も、逃げるカードはクリックしにくいので、同じリンクを別の場所(フッターなど)にも置いてください。