UIFlowで動かすM5ATOM Matrix: 回転アニメーション
UIFlowで三角関数が使えそうなので回転系のアニメーションを作ってみました。
作ったコードはGitHubにアップしました。
LEDをXY座標で点灯
用意されているブロックでLEDを点灯する場合は1から25の番号で指定する必要があります。
これだとアニメーションの描画がしにくいので、X,Yの座標指定で点灯できる処理を作っておきます。
図の通りUSBポートを下にして一番左上が座標(1,1)で右下が(5,5)にします。
引数でx,yが指定できるように関数化しておきます。
実行すると、
座標指定での点灯が可能になりました。
円弧の描画
続いて円弧を描画します。コードはこんな感じで作ってみました。
中心点は左上の(1,1)で角度はとりあえず0度とこに点を打ってみます。
長さ4にしたので真下の(1,5)が点灯ればOKです。変数の内容は以下の通りです。
- radius:半径
- angle:角度(度)
- axis:中心座標(1なら(1,1)、3なら(3,3)が中心)
- x, y:表示する座標
角度の計算はラジアン変換が必要ですが、pythonでコードを見るとブロックが自動でやってくれるようです。
なので度数法の角度をそのまま入力すればよさそうです。
LED番号は小数にするとエラーになるので四捨五入で丸めておきます。
実行すると、
中心点を赤くしました。問題なさそうなのでループで90度まで描いてみます。
円弧の完成です。内側にもう一本書いて太くしアニメーション化しました。
OKっすね。最終的にこんなコードになりました。
円描画
円弧ができれば簡単です。円弧をちょっとカスタムします。
中心点を(3,3)にして半径の長さも短くします。
90度までのループまでだったので、1回転させると、
円が描けました。角度のカウントを30にして45度の描画を削ると、
こっちのがすっきりっすね。さらに軌跡を消してみます。
回ってくれました。
0度と360度は同じ位置になるので、ループを360度までにすると真下で一瞬止まってしまいます。
なのでループの最大値はカウント数分引いた値までにします。
最終的なコードはこちらです。
いろんなバリエーション
回転アニメーションでいろんなバージョンを作ってみました。
コードはGitHubからご覧ください。
いびつな動きは速度を上げると多少滑らかに見えるようになったりします。
最後に
回転系の簡単なアニメーションを作ってみました。
動画ではわからないですが、絵を書き換える際に一回黒く塗りつぶしてるので若干ちらついてしまいます。
ちょっと工夫が必要そうです。