LoginSignup
24
5

More than 3 years have passed since last update.

画像揺らし機(黒いフィルター式)を作った

Last updated at Posted at 2019-12-25

クソアプリ2 Advent Calendar 2019の25日目の記事です。
アドベントカレンダーのトリを努めさせてもらいます!

どうも、こんにちは。 @scrpgil です

突然ですが、みなさんは、下のフィルターをみたことがありますか?

今年の9月ごろ、Twitter界隈で流行っていたので、見たことある人もいると思います。

なんと、このフィルター、重ねれば、どんなものでも揺らせる凄いフィルターなんです!
output.gif

というわけで、9月ごろ、誰でもこのフィルターを合成できるサービスを作りました。

画像揺らし機

しかし、ここで一つ問題が・・・。

フィルターの合成画像は簡単に作れても、揺らすのに少しコツがいるんですよね。

どうも、揺れる仕組みは、「踊るハート錯視」という現象を応用しているそうなんですが、認識に個人差があるようなんです。

上のサイトでも、プログラムで自然に揺れるよう試してみたんですが、どうも微妙です・・・。
output3.gif

というわけで、今回は、揺らし方を、パラメータで設定できるようにしました!

これなら、多少の個人差も自分で設定できるようになります。きっと、個人の認識さを吸収する設定を見つけられるはずです!

これが完成すれば、すべての人が、自分の揺らしたい画像を、好きなだけ揺らせるようになるはずです。

早速やってみましょう!

機能

・・・というわけで、作成したのが、こちらです。
Screen Shot 2019-12-24 at 4.48.46.png

ご覧の通り、揺らすことに関して、詳細な設定が行えるようになりました。

各項目は、次の通りになっています。
X:横方向の揺れ
Y:縦方向の揺れ
Scale:画像の大きさ
Delay:揺れのスピード

Xをスライダーを調整すれば、横方向だけ揺らすこともできますし・・・。
output1.gif

Yなら縦方向のみ揺らすこともできます!
output2.gif

これで、揺れを思い通り設定できるようになりました!

ちなみに、私のおすすめは、X:0、Y:47、Delay:16です。
output4.gif

ソースコード

GitHubに上げてあります。
ソースコード

ちなみに、このサービスは、Ionic Framework(+Stencil)を使っています。
綺麗なUIコンポーネントが揃っており、余計なことを考えなくても、お手軽に高品質のアプリを作成できるのでおすすめですよ!

download.jpeg
https://ionicframework.com/

まとめ

いかがでしたか?
これで、思いのまま、画像を揺らせるようになりました。

手で揺らした方が早いよ!」と言えば、それまでですが、細かい設定ができるようになったので、より定量的に揺らし方を見ることができます。

お気に入りの揺れ具合を、数値で交換したりもできるでしょう!

ちなみに、この機能の実装は、試行錯誤の結果、3時間ほどかかりました。悔いはありません。
それでは、

24
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
5