カテゴリー
UIデザイン

キャラクターがログインフォームをチラチラ見てる

画面上の目がマウスカーソルを追いかけるというと、X Window System の Xeyes の昔(Wikipedia によれば 1988 年!)からあるアイデアですが、ウェブサイトのログイン画面を見ているキャラクターというアイデアがこちら

メールアドレスを入力するタイプに応じて雪男風のキャラクターの視線が動きますが、面白いのはパスワードを入力する時のキャラクターの動作。

パスワード入力時のマナーとして確立した挙動ですね。

twitter のリプライからは、この手のキャラクターがいつ登場したかの情報が集まっています。

小物に自分のデータを印刷して購入できるサービスSticker Mule のログイン画面

Sticker Mule のログイン画面

VPNサービス TunnelBear のログイン画面

昔 dribble でも見た、という反応は多かったのですが、Dribbble.com のことであれば、今のログインフォームにはキャラクターは居ないようです。

2019年の Flutter と Flare のデモで、スマートフォン上で同様のフォームを作るコードもありました。

GJJ2019/Flutter-Teddy-SignIn: A Flutter Project For Real Sign In Page Based on Flare Teddy animation

こちらの方は、このアニメーションを作る手順の記事につなげていますね。

via twitter

カテゴリー
fun

Floor796 – あらゆるmemeをアニメーションにして一つの拡大し続けるフロアに配置したアート

Floor796は、人工衛星の796階ワンフロアに映画やバンド、漫画・アニメ・ゲームなど色々なミームが混在するという設定で描かれた巨大なアニメーションアート・ウェブサイトです。

斜め上から見下ろしたクウォータービューで書かれたイラストは、スクロールすると次の部屋が表示されていきます。今の時点でもそうとう広いものですが、今も随時新しい部屋が拡張され続けていて、もっと大きなものを目指しているそう。

人やロボットなどはクリックできることが多く、作品名やキャラクター名が表示され、そのmemeを表すYouTube動画を開けるようにもなっています。

多数のキャラクターが描き込まれていて、中には海外でも知られている日本の漫画のキャラも見つかります。ざっと流して見つけたのは「北斗の拳」「ソニック」「食戟のソーマ」「FAIRY TAIL」「ダーリン・イン・ザ・フランキス」「スーパーマリオ」「リング」など。もっといろいろありそう。

もちろん海外発のキャラクターはアメリカのものを中心にもっと多く登場しています。向こうの人は知っているけど日本ではそれほど、といった作品を知るきっかけにもできそうです。

作品は専用エディタを用意してその上で製作しているそう。メイキングがいくつか動画としてあげられていますが、とんでもなく時間が掛かる作業だとわかります。

[Changes]メニューでは新memeが追加された日時を遡って確認できます。「ベルセルク」や「ヒロアカ」もいるのか。

via Hacker News

カテゴリー
データ可視化

hexyzland – 数式で六角形の図形表示を動かす遊び場サイト

hexyzland は、六角形ベースの図形を6つの変数と数式で動かす、プログラミング実験場です。

Hexyzland トップページ

6つの変数は t(時間), r(中心からの距離), a(角度), x,y,z(3方向の座標) となっていて、各ヘックスの値を -1(真っ赤) から 1(真っ白)の間に変えることでヘックスのサイズと色が変わります。

あとは数学的な関数を組み合わせればアニメーションのできあがり。チュートリアルにたくさんの実例が出ています。

作成した図形は URL が生成されるので SNS 等で共有することもできますし、動いているところを動画として保存することもできます。

GitHub にサイトのソースコードも公開されています。

tixyland という正方形ベースの同様の遊び場があり、hexyzland はそれにインスパイアされたものだそうです。

tixy.land トップページ

via reddit/programming