お待たせしました
(※誰も待ってない)
画像の揺らしたい部分に白黒半透明のフィルターをかけた画像を表示して、スマホを揺らすと、錯視で揺れるように見えるという。
これがTwitterで流行っているらしい。断じてやましい気持ちはないが、面白いと思った。
スマホ乳揺れ技術をテンプレにした。半透明度を下げて囲むと揺れる。 pic.twitter.com/sMR6zhbTBb
— ぺろ(原稿作業中) (@fZnHNsrh8yzwyAe) September 21, 2019
使用例は下記リンクから確認できる。
http://blog.esuteru.com/archives/9383727.html
今回作ったもの
大胸筋が揺れる画像メーカー(※大胸筋以外も揺らせます)
http://82159f46d0d56af3.main.jp/quake/index.html
GIF画像による使い方説明
ご覧のありさまである。もちろん、このプリンは揺れる。
※画質が落ちない程度に「アップロード画像のサイズ」の項目から画像サイズを大きくしたほうが揺れが分かりやすい。
なぜ揺れるように見えるのか
この錯視は立命館大学の北岡明佳教授による有名な「踊るハート錯視」な応用して作られているそう。
北岡明佳教授の公式サイトより
「踊るハートの錯視」は脳の情報処理速度による錯視で、高コントラストな部分は情報処理が速く、低コントラストの部分は情報処理が遅いために起こる錯視。
教授って人たちは本当にすごい(語彙力)
実装内容
フロー
- 画像をアップロードして表示できるようにする
- 画像の上にテンプレを半透明にした画像を重ねる
- 保存ボタンを作る
実装はこことここを参考にした。尚、CodePenだとダウンロードは動作しない。
See the Pen Quake by かんちゃん (@sapporo_east_k) on CodePen.
三連休使って何やってんだろう俺。
名前の由来となったツイート
大胸筋が歩いてる錯覚 pic.twitter.com/ypu6YMS0SN
— じゃがバター (@okatsuka1206) September 22, 2019
TODO
- Twitterに投稿できる機能をつける
- 半透明のフィルターをSVGにする
- スマホだと使いづらいのでUI/UX改善