編集部イチオシ

ケムリクサの挙動を再現したい【未完成】

あのスマホっぽい動きをスマホ上で再現する的な
11

概要

ケムリクサの操作が何かと「スマホっぽい」と言われるのでいっそスマホ上でケムリクサ的動きを実装してみようと思ったやつ
のんびり自己満更新の一人まとめ

仕様(予定)

・モダンブラウザ(Chrome・Firefox・Safari)上でユーザー操作に合わせて動く
・スマホ上(タッチ系デバイス)とPC上(マウス系デバイス)両方で操作できる
・SVGベースでヌルヌル動かしたいけど重いので画像で補うかも

最近の開発
ぶらーぽ@オー援 @T_BlackApple

#ケムリクサ 挙動再現 円状に並ぶやつ編 この円状に並ぶやつはだいだいさんのページ選びとか軽く押したときとかに出てくる。ゲージ入力のインターフェイスと思われる pic.twitter.com/PaqLtFQEDw

2019-04-14 12:24:55

青編

主に「光る」「押す、ドクンと来る、まるいのが出てくる」の挙動を再現する。
まるいの関連で11話のBWEに乗ってた紫のようなスライドもついでに再現する。

ぶらーぽ@オー援 @T_BlackApple

#ケムリクサ の挙動を再現しようとしてみてる。色が難しい 混色とかロックとか「警・禁」の再現とか考えると夢が広がりんぐ ゆくゆくはスマホとかで動かしたい (ケムリクサ起動シーン集とかあればいいのにみつからない) pic.twitter.com/pAUg9TFkDT

2019-03-30 17:31:41
ぶらーぽ@オー援 @T_BlackApple

#ケムリクサ の挙動再現② 見直したら全然違った。押して離す・脈打つ(一瞬大きくなる)・丸いのズラッと並ぶ それっぽくなった。うろ覚えはいかんね pic.twitter.com/GyhnEFtkw7

2019-03-30 20:35:39
ぶらーぽ@オー援 @T_BlackApple

丸いのの大きさ・色をそろえたらとりあえずオリジナルっぽくなったのでこれをベースに色々してみよう pic.twitter.com/cTFOmKYAW9

2019-03-30 21:01:55
ぶらーぽ@オー援 @T_BlackApple

#ケムリクサ の挙動再現③ 11話のワカバがBWEの大きいケムリクサ(紫)を操作してたシーンをベースに丸いのをスライドする機能を実装 縦は本編にない動きだけどなくはないだろうということで。 pic.twitter.com/2MTN236WjQ

2019-04-01 01:00:32

アイちゃん(藍色)編

方位磁石と同じ要領で一定方向を指すケムリクサの再現。

ぶらーぽ@オー援 @T_BlackApple

#ケムリクサ の挙動再現④ 今までとは趣を変え方位磁針の要領で一定方向を向き続けるアイイロ(アイちゃん)の再現。スマホでしか動かないけど、スマホだと重すぎてカクつく。諸々見直さないといかんね アイちゃんだけは静画or連続静画アニメにしたほうがいいかなこりゃ pic.twitter.com/Pq1TAXIvtw

2019-04-01 15:43:11
ぶらーぽ@オー援 @T_BlackApple

#ケムリクサ の挙動再現⑤ よく回るアイちゃん(外側ではスマホを回してる) 中の葉を(SVGの処理で)回すと(おそらくフィルターの再作画で)クソ重くなったけどその画像の場所(=wrapper要素)ごと回せば(SVGの再作画が発生しないので?)大して重くならなかった pic.twitter.com/vAl2vuFmD5

2019-04-02 01:06:26

キイロ編

ライトのように用いられたり、そばに添えたりするケムリクサの再現

ぶらーぽ@オー援 @T_BlackApple

キイロ(のつもり)だな(色合いが難しすぎる) #ケムリクサ pic.twitter.com/3gZHJQXK17

2019-04-07 00:26:40
拡大
ぶらーぽ@オー援 @T_BlackApple

点滅してキイロっぽさを出そうとはしたんだが... #ケムリクサ pic.twitter.com/xQXgyjzqhL

2019-04-09 23:32:49

文字表示

ぶらーぽ@オー援 @T_BlackApple

とりま「警」の表示を実装 #ケムリクサ 本編使用のは絶対フォント感のある人が見つけてくれるさ… 見つかってもユーザ環境になければ意味ないし(文字のpath引っ張ってくるとしてそれは著作権的にどこまで許されんだ?) (ちなみにスクリーンレコーダ変えてみたらマウス周りの動きも録画できた) pic.twitter.com/kRpauf5It1

2019-04-11 00:04:54

円状に並ぶやつ

入力インターフェイスだろうか

ぶらーぽ@オー援 @T_BlackApple

#ケムリクサ 挙動再現 円状に並ぶやつ編 この円状に並ぶやつはだいだいさんのページ選びとか軽く押したときとかに出てくる。ゲージ入力のインターフェイスと思われる pic.twitter.com/PaqLtFQEDw

2019-04-14 12:24:55

実装済み

・強く押す・ドクンとくる・「まるいの」の表示

・「まるいの」スワイプ
あらわれる○はぼやけずに出現。

・端末の向き取得

・「警」の表示

諸々考察・実装したいもの

各種葉

○青色(あおいの)
○藍色(あいちゃん)
○黄色(キイロ)
・ミドリちゃん
・姉妹の葉
・記憶の葉
・OPの葉
・ダイダイさん
「まるいの」は右下から順に表示される
真ん中・左上の順にグルグル→右スワイプで起動
・壁
「まるいの」は左上から順に表示される(向きがありそう)
・雷のやつ
・BWEのおおきい水色・紫
下列左スワイプで巻き取り、プリント

各種形態

・起動モーションが存在する葉としない葉(青・雷のやつetc ミドリちゃん・キイロetc)
・丸い球の中に葉(キイロ、ミドリちゃん)
・葉が露出(青・雷・ミドリちゃん)
・葉脈のみ(白・赤・赤紫)
 消耗後にこの形態に変化

各種ジェスチャー

○ローディング風の円
だいだいさんがワカバより
「押す時間に合わせて開」くらしい
押す時間に合わせて数値入力できるインターフェイス

・壁を開く
真ん中を一回転→壁が開く

・「標準仕様」「強度」「ロックと解除」
11話りりのセリフより
製作期間的都合か11話において動作が省略されたが丸を撫でるジェスチャーと関係がありそう

左の「まるいの」を反時計回りに撫でるとロック(12話記憶の葉)
→「まるいの」が比較的大きくなる
壁が巨大な青ならば壁を開ける動作は「解除」に相当?

ケムリ

・ムシに対して権限のある命令を下し黒変させる「青」「赤」のケムリ
・回復作用のある「緑」のケムリ
葉の枝部分を切り取りケムリを吸引

なんらかの条件による「禁」「警」等の表示

→何らかの条件はユーザー識別?ロック

ケムリクサの合成

色相環から考える:
【ケムリクサ】ケムリクサの色の合成について(irodorich)
オーバーレイ:【ケムリクサ】橙+黄色+紫=赤になる (irodorich)
複数の切れ端をつなぎ合わせ上スワイプすると新しい一枚になる
複数同じ葉を重ねて上スワイプで強化
12話よりミドリちゃん3枚重ねてスワイプ→枝ほどではない最大出力

消耗による劣化

・アイちゃん
虫食いのような跡&小丸のあぶくが無数に出現

3DTouchの対応(iOSのみ)

iOS端末を借りれるときにまとめて
でも廃止方針だしなぁ...

アイちゃんが水のある方を向く

保留・とりあえず琵琶湖を向くように実装

近くのトイレの取得はGoogleの力を使えば可能だが
下手するとAPI利用料を取られ兼ねないので保留

ゆるぼ

ケムリクサの草の考察系情報がほしい!!
(実質やってることはケムリクサの挙動の考察なので)

コメント

ぶらーぽ @T_BlackApple 2019年4月2日
アイちゃんが滑らかに回るようになりました(実際それ自体は楽で現在位置取得できるようにするためにローカルでSSL対応(https化)するのにほとんどの労力を割いてた)
2
名無しさん@お腹いっぱい @vicy 2019年4月2日
藍色、GPS連動で最寄りのトイレを指し示す機能をつけたらどうだろう(無茶振り)
1
saku @sakuuuuuuune 2019年4月2日
Androidのカスタムロックアプリとして青色 ケムリクサアプリで、 藍で近隣自販機検索 黄色でライト、 緑でリラックス施設(銭湯やスパ、リラクゼーション関連)、検索、 橙でロック付きメモ、写真などのファイラー 桃で友達と連絡先交換、機能交換 薄色でレストラン、ファストフード検索 赤は緊急通報 最初はランダムで一枚付与、友達と桃で通信すると、一枚だけコピーできる ケムリクサを揃える事で機能アップしていくアプリ って思ったけど、実用性的に最初から全部揃えたいなあ
0
ぶらーぽ @T_BlackApple 2019年4月9日
キイロを点滅させてみたりした
0