クソアプリ2 Advent Calendar 2019の25日目の記事です。
アドベントカレンダーのトリを努めさせてもらいます!
どうも、こんにちは。 @scrpgil です
突然ですが、みなさんは、下のフィルターをみたことがありますか?
今年の9月ごろ、Twitter界隈で流行っていたので、見たことある人もいると思います。
なんと、このフィルター、重ねれば、どんなものでも揺らせる凄いフィルターなんです!
というわけで、9月ごろ、誰でもこのフィルターを合成できるサービスを作りました。
画像揺らし機
しかし、ここで一つ問題が・・・。
フィルターの合成画像は簡単に作れても、揺らすのに少しコツがいるんですよね。
どうも、揺れる仕組みは、「踊るハート錯視」という現象を応用しているそうなんですが、認識に個人差があるようなんです。
上のサイトでも、プログラムで自然に揺れるよう試してみたんですが、どうも微妙です・・・。
というわけで、今回は、揺らし方を、パラメータで設定できるようにしました!
これなら、多少の個人差も自分で設定できるようになります。きっと、個人の認識さを吸収する設定を見つけられるはずです!
これが完成すれば、すべての人が、自分の揺らしたい画像を、好きなだけ揺らせるようになるはずです。
早速やってみましょう!
機能
ご覧の通り、揺らすことに関して、詳細な設定が行えるようになりました。
各項目は、次の通りになっています。
X:横方向の揺れ
Y:縦方向の揺れ
Scale:画像の大きさ
Delay:揺れのスピード
Xをスライダーを調整すれば、横方向だけ揺らすこともできますし・・・。
これで、揺れを思い通り設定できるようになりました!
ちなみに、私のおすすめは、X:0、Y:47、Delay:16です。
ソースコード
GitHubに上げてあります。
ソースコード
ちなみに、このサービスは、Ionic Framework(+Stencil)を使っています。
綺麗なUIコンポーネントが揃っており、余計なことを考えなくても、お手軽に高品質のアプリを作成できるのでおすすめですよ!
まとめ
いかがでしたか?
これで、思いのまま、画像を揺らせるようになりました。
「手で揺らした方が早いよ!」と言えば、それまでですが、細かい設定ができるようになったので、より定量的に揺らし方を見ることができます。
お気に入りの揺れ具合を、数値で交換したりもできるでしょう!
ちなみに、この機能の実装は、試行錯誤の結果、3時間ほどかかりました。悔いはありません。
それでは、