CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.18
CRAZY度 ★★ ─ 餌ヤリ自由・触レ合イ可

生き物UI

入力した文字を食べて体の模様にし、なでれば懐き、放っておくと居眠りする。空腹・眠気・機嫌を内部に持たせて、扱い方で反応が変わるUIを6本集めました。当区画のサンプルには名前を付けないでください。情が移ります。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001腹ペコ入力欄CRAZY度 ★★★★
入力欄の文字が1文字ずつ浮き上がり、ぷにぷにの生き物に食べられます。食べた字は体の模様になり、40文字で模様ごと脱皮します。
Canvas 2DソフトボディPointer EventsWeb Audio

これは何？

入力欄に書いた文字を、そばにいる生き物に食べさせる見本です。文字は入力欄の中の書かれていた位置から浮き上がり、口へ吸い込まれます。食べた字は体の中に模様として残り、体がつぶれたり伸びたりすると一緒に変形します。体は24個の点をばねでつないだソフトボディで、つまんで伸ばしたり、つついてへこませたりできます。

使い方

  1. 「全部コピー」して貼り付け、.ug-gobble の大きさを決めます（高さ420px程度）。
  2. 文字を入れて Enter か「あげる」で食べさせます。体はつまんで伸ばす・放り投げる・つつくことができます。
  3. 絵文字は噛んでみてから吐き出します。

カスタマイズ

  • 脱皮までの文字数は MAX（40）、体の輪郭の点の数は N（24）です。
  • 模様の色は文字の種類（ひらがな・カタカナ・漢字・英字・数字）ごとに COL で決めています。体の色も、食べた字の色へ少しずつ寄ります。
  • 体の硬さは physics() の 380（円に戻る力）、重さは 700（重力）です。

注意

フォームの送信はしません（submit を止めて、文字を食べさせるだけにしています）。実際のフォームに使うときは、feed() を呼んだあとに本来の送信処理を足してください。

S-002なつくボタンCRAZY度 ★★★
毛を1本ずつ描いたボタンです。毛並みに沿ってなでると喉を鳴らして懐き、逆なでや乱暴ななで方には毛を逆立てて怒ります。
Canvas 2DPointer EventsWeb Audio

これは何？

1,500本の毛を1本ずつ描いた、ふわふわのボタンです。なでた場所の毛はなでた向きに寝て、数秒かけて戻ります。毛並み（右下向き）に沿ってほどよい速さでなでると喉を鳴らし、なつき度が上がります。逆向きになでたり（文字どおりの逆撫で）、速すぎたりすると、毛を逆立てて耳を伏せます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. マウスは乗せて動かすだけ、スマホは指でなでます。キーボードでは → でなで、← で逆なでします。
  3. なつき度が5になる前に押すと、びくっとして警戒されます。5まで懐くと、押したときに喜びます。

カスタマイズ

  • 毛の色は FUR（根元から毛先へ6段階）、毛並みの向きは GX・GY です。
  • 心地よいなでる速さは stroke() の 380（px/秒）、怒り出す速さは 1100 です。

注意

ごろごろの音（data-sound のとき）は、ページで一度クリックなどの操作をしてから鳴ります。ブラウザの決まりで、マウスを動かしただけでは音を出し始められないためです。

S-003居眠りパネルCRAZY度 ★★
触らずにいると船をこぎ始め、眠ると中の部品までずり落ちます。眠っているところを起こすと、しばらく不機嫌です。
Web AnimationsCSS transformCSS変数

これは何？

本物のスイッチが入った設定パネルが、触らずにいると眠くなる見本です。4.5秒でまぶたが下がり、前へゆっくり傾いては、はっと戻るのを3回くり返して眠ります。眠ると息が深くなり、中の行が少しずつずり落ちます。眠っている上でカーソルを動かすと寝言を言い、クリックやキー操作で起こすと不機嫌になります。

使い方

  1. 「全部コピー」して貼り付けます。中のスイッチや文言は自由に差し替えられます。
  2. 不機嫌なあいだにスイッチを押すと、ため息のあとで渋々ゆっくり切り替わります。
  3. 起こさずに放っておくと、26秒でひとりでに起きて伸びをします。このときは機嫌がよいままです。

カスタマイズ

  • 眠くなるまでの時間は IDLE_MS、ひとりでに起きるまでの時間は SLEEP_MAX です。
  • 寝言は TALK、起こされたときの文句は GRUMBLE に入っています。続けて起こすほど後ろの文句になり、3回目からは湯気が出ます。

注意

不機嫌なあいだは、スイッチの切り替えを0.9秒遅らせています（change イベントも遅れて届きます）。すぐに反応しないと困る設定には使わないでください。画面に見えていないあいだは眠くなりません。

S-004孵化する卵ボタンCRAZY度 ★★★★
長押しやなでて温めると、中で動いてひびが入り、孵化します。生まれた子はボタンから跳び出し、ページの見出しやボタンの上を歩き回ります。
Canvas 2DgetBoundingClientRectPointer EventsWeb Audio

これは何？

温めると孵る卵のボタンです。長押しすると温度が上がり（なでても温まります）、手を離すと少しずつ冷めます。温かいほど中でよく動いて卵が揺れ、ひびが広がり、38℃で孵化します。生まれる子は、色・耳・しっぽ・模様・名前を毎回組み合わせて作ります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. キーボードでは、スペースかEnterの長押しで温められます。
  3. 生まれた子は、ページの見出し・段落・ボタン・カードの上端を足場にして歩き、跳び移ります。歩いている子をタップすると跳ねます。22秒たつと画面の端から帰っていきます。

カスタマイズ

  • 歩き回る時間は LIFE（秒）、足場にする要素は scan() の中のセレクターで決めています。
  • 名前は SYL と END の組み合わせです。

注意

画面全体を覆う透明なキャンバスを1枚追加します（クリックは下へ素通りします）。同時に歩けるのは5匹までで、超えると古い子から帰ります。動きを減らす設定のときは、ページへは出ずに殻の中で過ごします。

S-005威嚇するフグボタンCRAZY度 ★★★
水槽を泳ぐ、体に OK と書かれたボタンです。つつくたびにとげを立てて膨らみ、限界を超えると空気を噴いて飛び回ったあと、ぐったりします。
Canvas 2Dばねの減衰Web Audio

これは何？

押されるのが苦手なボタンです。つつくと膨らんでとげが立ち、浮き上がります。限界まで膨らんだところをもう一度つつくと、口から空気を噴いて水槽じゅうを飛び回り、しぼんで底に沈みます。しばらくすると照れながら泳ぎ出します。驚かせなければ、2.2秒ほどでゆっくりしぼみます。

使い方

  1. 「全部コピー」して貼り付け、.ug-fugu の大きさを決めます。
  2. フグ以外の場所をクリックすると「ガラスを叩いた」ことになり、近くにいれば少し驚いて逃げます。
  3. ゆっくり動かしたカーソルには寄ってきます。マウスを素早く振ると驚きます。キーボードではEnterかスペースでつつきます。

カスタマイズ

  • しぼみ始めるまでの秒数は CALM、1回で膨らむ量は scare() の .42 です。
  • 体の文字は drawFish() の 'OK' です。

注意

見た目と手触りの遊びとして作っています。押した結果として何かを実行する本物のボタンには向きません。

S-006タグの放牧場CRAZY度 ★★★
本物のリンクのタグが、目と足を生やして草原で暮らします。お腹がすけば草を食べ、眠くなれば昼寝し、まいた餌には走って集まります。
DOMCanvas 2DPointer EventsWeb Audio

これは何？

タグ（リンク）に目と足と吹き出しを付けて、草原に放した見本です。それぞれが空腹と眠気を持っていて、仲間の近くをうろうろし、お腹がすくと草を食べ、眠くなると昼寝します。食べられた所は土が見え、ゆっくり生え戻ります。地面をクリックすると餌がまかれ、空腹なタグが走って取り合います。

使い方

  1. 「全部コピー」して貼り付け、.ug-ranch-tag を好きなリンクに書き換えます。目と足はスクリプトが付けます。
  2. タグはつまんで運べます。クリックするとリンク先へ進みます（見本は href="#" なので、跳ねるだけです）。
  3. キーボードでタグを選ぶと、そのタグは立ち止まってこちらを見ます。

カスタマイズ

  • タグの色は HUES、草のマス目は CELL（22px）です。
  • 空腹と眠気のたまる速さは update() の .014 と .011 です。タグは3つの仲間グループ（i % 3）に分かれていて、同じグループの近くに集まりがちです。

注意

タグはリンクのまま動かしているので、検索エンジンや読み上げにはふつうのリンクとして伝わります。数は20個程度までを目安にしてください。