Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@kanchan-1996

「大胸筋が揺れる画像メーカー」を実装してしまった

More than 1 year has passed since last update.

お待たせしました

(※誰も待ってない)

画像の揺らしたい部分に白黒半透明のフィルターをかけた画像を表示して、スマホを揺らすと、錯視で揺れるように見えるという。

これがTwitterで流行っているらしい。断じてやましい気持ちはないが、面白いと思った。

使用例は下記リンクから確認できる。
http://blog.esuteru.com/archives/9383727.html

今回作ったもの

大胸筋が揺れる画像メーカー(※大胸筋以外も揺らせます)
http://82159f46d0d56af3.main.jp/quake/index.html

GIF画像による使い方説明
yureru.gif

ご覧のありさまである。もちろん、このプリンは揺れる
※画質が落ちない程度に「アップロード画像のサイズ」の項目から画像サイズを大きくしたほうが揺れが分かりやすい。

なぜ揺れるように見えるのか

この錯視は立命館大学の北岡明佳教授による有名な「踊るハート錯視」な応用して作られているそう。
北岡明佳教授の公式サイトより
「踊るハートの錯視」は脳の情報処理速度による錯視で、高コントラストな部分は情報処理が速く、低コントラストの部分は情報処理が遅いために起こる錯視。

引用元

教授って人たちは本当にすごい(語彙力)

実装内容

フロー

  • 画像をアップロードして表示できるようにする
  • 画像の上にテンプレを半透明にした画像を重ねる
  • 保存ボタンを作る

実装はここここを参考にした。尚、CodePenだとダウンロードは動作しない。

See the Pen Quake by かんちゃん (@sapporo_east_k) on CodePen.

三連休使って何やってんだろう俺。

名前の由来となったツイート

TODO

  • Twitterに投稿できる機能をつける
  • 半透明のフィルターをSVGにする
  • スマホだと使いづらいのでUI/UX改善
2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kanchan-1996
札幌でIT芸人を目指すエンジニア
it-geinin
技術を使って日々面白いことに挑戦し、Qiitaに投稿します。技術を楽しむ会です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?