#PowerApps における数学 #3

#これまでの投稿
[#PowerApps における数学 #1](https://qiita.com/h-nagao/items/e5e7a3708ddb5a10ce0e)
[#PowerApps における数学 #2](https://qiita.com/h-nagao/items/18d6919790a747bd34b0)
これまでの2回で、PowerAppsでの座標系のとりかたと、相対座標について解説してきました。
今回は少し趣を変えて、タイマーを駆使したPowerAppsの動きの表現について説明します。
ちょっとビジネスからだんだん離れていきます。。。

#媒介変数表示
XY平面上の軌道（直線や曲線）を表現するのに、XとYの間を関係づける変数（媒介変数）を導入する方法があります。
この媒介変数を *t* とおくと、一般に平面上のxy座標は
*x* = *f(t)*
*y* = *g(t)*
という *t* の関数として表現することができます。
例えば、 *f(t)* = *t* , *g(t)* = *t*<sup>2</sup> と置いた場合、これはあきらかに、 *y=x*<sup>2</sup> でよく知っている2次関数の曲線を表すことがわかります。
また、第１回で解説した極座標表示の形式 *x= r cosθ* , *y=r sinθ* を思い出すと、*r=A* (定数)とすると、*x*<sup>2</sup> +*y*<sup>2</sup> =*A*<sup>2</sup> という、半径Aの円軌道であることがわかり、このとき*θ*が媒介変数になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/b2b35040-94e2-c350-88f8-97e4e9d94140.png)

ここで媒介変数を *t* と書きましたが、この *t* をそのまま時間の変数だとみなすと、x,yが描く軌道は、物体の運動だととらえることができます。
以下では物体の運動をPowerApps上で表現するとどうなるのか、何に注意が必要かを記載します。

#放物線
放物運動の最も簡単な例として、x軸方向に水平にボールを投げた場合を考えます。
この時のx, yは、とある定数 *g* と、初期位置 X,Yを用いて以下のように 時間の関数で記述できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/a106cfb0-73ec-2fb1-3b4c-57d6695b6bf8.png)

ではこの動きをPowerAppsで再現してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/0017803d-2d4b-0960-b9d2-fac1d5e88022.png)
すなおに式のとおりX,Yプロパティを設定しました。動作は以下をご覧ください。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">失敗例 <a href="https://t.co/AosJjH6vhr">pic.twitter.com/AosJjH6vhr</a></p>&mdash; Hiro #JSON()Addict (@mofumofu_dance) <a href="https://twitter.com/mofumofu_dance/status/1161665136366456832?ref_src=twsrc%5Etfw">August 14, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ボールが上に飛んで行ってしまいました。
これは第1回で説明した*「Yは下に行くほど大」*を忘れているからです。正しくキャンバスの座標を考慮すると、以下のように書けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/5a1070c1-e246-8244-e404-dac16090745f.png)
実際に動かしてみます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">正しい符号 <a href="https://t.co/icuyeHj0TR">pic.twitter.com/icuyeHj0TR</a></p>&mdash; Hiro #JSON()Addict (@mofumofu_dance) <a href="https://twitter.com/mofumofu_dance/status/1161666574425579520?ref_src=twsrc%5Etfw">August 14, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

やはりYの符号は大事だということがこれでお分かりいただけたかと思います。うっかり式をコピペすると、想定の逆に動いてしまいます。

#円運動
媒介変数表示の例2に示したような円運動を見てみましょう。
適当な初期位置（X,Y)で半径360pxの円上を回るようにセットしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/d5e88ea7-a625-0643-fc65-435176c828e3.png)
この時の動きは以下のようになります。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">円運動。ただし角度の方向が通常と逆になっている <a href="https://t.co/0PwXin57bk">pic.twitter.com/0PwXin57bk</a></p>&mdash; Hiro #JSON()Addict (@mofumofu_dance) <a href="https://twitter.com/mofumofu_dance/status/1161669981660012544?ref_src=twsrc%5Etfw">August 14, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これについても第1回で解説したとおり、通常の極座標とは角度の方向が逆（時計回り）になっていることがわかるかと思います。

#最後に
このようにして、時間の変数を用いると、PowerAppsのオブジェクトをまるで運動する物体かのように動かすことができました。
時間の変数はここでは長時間のタイマーを利用していますが、細かい刻みのタイマーをループさせることでも同じような挙動を再現できます。