Chrononglyph

#7517

逆正接を使う必要が生じた

今日の出来事数学

先日リリースしたピクチャレ大会の目玉機能としてスマホで記録コンポーネントをスワイプすると
左右それぞれある閾値を超えたらリンク先へ自動ジャンプするという仕組みを作りました。
ただ、いざリリースして本番環境をiPhoneで動作確認すると大きな問題があることが発覚。
iPhoneだとページスクロールのためのスワイプ動作もこの仕組みが検知してしまうため、
ページスクロールしたいのにスワイプメニューが動くのでスクロールできないという現象が起きてしまいます。
これでは使い物にならないので改善案を出すべくいろいろ考えていました。
結論から言うと三角比の一つ「逆正接(アークタンジェント、atan)」を使えば解決できるのですが、
なんでそれで解決できるのか自分の言葉で説明できないのはモヤるのでブログに経緯を書き残します。


まず、この問題はページスクロールとスワイプメニューの動作が混在してしまうことです。
一般に、スマホのページスクロールは縦方向に行われるのに対して、
スワイプメニューは横方向に行われることを想定しています。
つまり、縦のときは動作させないようにすればいい。
具体的には、スワイプ操作の始点と終点を結ぶ角度が45度以上なら動作しないようにすればいいわけです。
ここで問題になるのが「始点と終点を結ぶ角度」をどうやって算出するのかという問題です。


始点と終点は分かっているので、これはそれぞれ直角三角形ABCのAとCに割り当てることができます(ACが斜辺)。
このとき、辺ABの長さがX軸の移動量、辺BCがY軸の移動量と考えることができ、
これらは始点と終点の差分を計算することによって求めることができます。
角度θに対する辺ABと辺BCの比率をタンジェントといい、次のように計算できます。



tan(θ) = AB / BC



ところが今回はそもそも関数に入れる角度θを求めたいので、この関数と逆のことをしなければなりません。
この「逆のこと」に相当する数学用語が逆関数です。
関数f(x) = yの逆関数は慣例的にf(y)^-1 = xと表記しますが、別にマイナス1乗するわけではありません。
逆関数の表記はさまざまで、タンジェントではそれに相当するのが「アークタンジェント(arctan)」となります。


逆関数の解は単純な公式によって導けるものではないらしく、多少ググったくらいでは求め方が出てきませんでした。
そもそも本来引数として与えられる値が分からないのでどうしようもないというわけです。
そこでプログラミングの世界ではMath.atan2(x, y)というめちゃくちゃ便利な関数があり、
これにXの移動量、Yの移動量を入れると内部で複雑な計算をして角度を算出してくれる仕組みになっています。
atan2()はWikipediaにも単独記事があり、歴史のある有名な関数みたいです。


結局アークタンジェントの求め方は理解することができませんでしたが、
数学も深掘りしようとすると果てしないということを改めて認識するとともに、
高校数学の範囲はweb制作でもお目にかかることがあるのだと改めて危機感を抱きました。



同じタグを含む記事(数学
前後の記事
#7472現状棚卸し 2024年06月』(2024/06/01
現状棚卸し今日の出来事
#7473オリマー救出RTAデビュー』(2024/06/02
ピクミン4rta今日の出来事
#7474久々に図書館へ』(2024/06/03
読書今日の出来事
#7475マイゲームトレンドまとめ 2024年06月』(2024/06/04
ゲームプレイ雑記今日の出来事
#7476Vtuberの個性』(2024/06/05
VTuber今日の出来事
#7477サブ機としてのiPhone』(2024/06/06
iphone今日の出来事
#7478MTGの誤訳問題』(2024/06/07
magic-the-gathering特定文化批判今日の出来事
#7479改造バイクによる配信妨害』(2024/06/08
騒音の問題今日の出来事
#7480マイクラプレイ環境の紆余曲折』(2024/06/09
minecraft今日の出来事
#7481健康維持の基本方針』(2024/06/09
健康診断今日の出来事
#7482金策と節約のための帰省』(2024/06/11
休日計画今日の出来事
#7483愛について』(2024/06/12
恋愛観今日の出来事
#7484対戦テトリスを思い出す』(2024/06/13
テトリス99今日の出来事
#7485自己批判が捗る周期』(2024/06/14
ブログの執筆方針今日の出来事
#7486マイクラ三昧の帰省』(2024/06/15
minecraft今日の出来事
#7487着想メモを純正メモアプリへ』(2024/06/16
着想メモ今日の出来事
#7488豪華絢爛なオフィスでの初仕事』(2024/06/17
仕事今日の出来事
#7489Nintendo Direct 2024.6.18』(2024/06/18
nintendo-direct今日の出来事
#7490エレクトロニカへの興味再燃』(2024/06/19
エレクトロニカ今日の出来事
#7491ブログ活動と問題解決プロセス』(2024/06/20
本家ブログ移転計画問題解決の問題今日の出来事
#7492無能な引き継ぎ要員』(2024/06/21
特定個人批判今日の出来事
#7493カジュアルなRTAは楽しい』(2024/06/22
rtaピクミン4今日の出来事
#7494ピクチャレ大会と2本のゲーム』(2024/06/23
webサイト運営裏話今日の出来事
#7495会話をカードゲームに例えてみると』(2024/06/24
コミュニケーション能力今日の出来事
#7496乗車時間の利活用』(2024/06/25
今日の出来事
#7497大企業社員との飲み会』(2024/06/26
飲み会今日の出来事
#7498根性論に対する不信』(2024/06/27
習慣今日の出来事
#7499二年半ぶりフル出勤を終えて』(2024/06/28
今日の出来事
#7500両輪の話』(2024/06/29
意欲の問題今日の出来事
#7501お金の使い方が下手』(2024/06/30
今日の出来事
#7502現状棚卸し 2024年07月』(2024/07/01
今日の出来事
#7503乗車時間の利活用 #2』(2024/07/02
今日の出来事
#7504KADOKAWAサイバー攻撃事件』(2024/07/03
情報セキュリティ今日の出来事
#750520年ぶり新紙幣』(2024/07/04
貨幣今日の出来事
#7506人間関係は性格を形成する』(2024/07/05
人間関係今日の出来事
#7507鈍臭い飲食店員が増えた』(2024/07/06
社会弱者批判今日の出来事
#7508競争原理について』(2024/07/07
価値観の問題今日の出来事
#7509寝違えの原因を追求する』(2024/07/08
睡眠環境今日の出来事
#7510帰宅後の作業場所候補』(2024/07/09
作業環境今日の出来事
#751140代の展望から見た現状』(2024/07/10
人生観今日の出来事
#7512ゲームの外の要素を利用する』(2024/07/11
ゲーム制作今日の出来事
#7513電子書籍プラットフォーム移管へ』(2024/07/12
電子書籍今日の出来事
#7514プレイ計画の頓挫を繰り返す』(2024/07/13
ゲームプレイ計画今日の出来事
#7515迷走するイベント案』(2024/07/14
webサイト運営裏話今日の出来事
#7516半年ぶりの開発反省まとめ』(2024/07/15
webサイト制作作業今日の出来事
#7517逆正接を使う必要が生じた』(2024/07/16
数学今日の出来事
#7518Amazonプライム再契約』(2024/07/17
pc環境amazon今日の出来事
#7519ライフステージを再定義する』(2024/07/18
人生観今日の出来事
#7520ポケモンGOの浮き沈み』(2024/07/19
ポケモンgo今日の出来事
#7521所属会社の飲み会』(2024/07/20
飲み会今日の出来事
#7522VTuberのライブに思うこと』(2024/07/21
VTuber今日の出来事
#7523心理的不満の非合理性』(2024/07/22
心理学今日の出来事
#7524ブログの立ち位置の変化』(2024/07/23
本家ブログ移転計画今日の出来事
#7525AIアシスタントと検索エンジン』(2024/07/24
llm今日の出来事
#7526作曲家の重要性』(2024/07/25
音楽一般今日の出来事
#7527エアコンが壊れた』(2024/07/26
一人暮らしのトラブル今日の出来事
#7528週末ダンドリバトル大会本稼働』(2024/07/27
今日の出来事
#7529日曜日を空白にする重要性』(2024/07/28
今日の出来事
#7530最新ゲームを遊ぶ機運』(2024/07/29
今日の出来事
#7531Chromeに勝てない新ブラウザ』(2024/07/30
webブラウザ今日の出来事
#7532鍵にキーホルダーをつけたい』(2024/07/31
今日の出来事