Help us understand the problem. What is going on with this article?

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

お待たせしました

(※誰も待ってない)

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

これが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改善
Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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