matuconとマイコン

ITガジェットが好物です

UIFlowで動かすM5ATOM Matrix: 回転アニメーション

f:id:mazcon:20210430170944j:plain

UIFlowで三角関数が使えそうなので回転系のアニメーションを作ってみました。

作ったコードはGitHubにアップしました。

github.com

LEDをXY座標で点灯

用意されているブロックでLEDを点灯する場合は1から25の番号で指定する必要があります。
これだとアニメーションの描画がしにくいので、X,Yの座標指定で点灯できる処理を作っておきます。

f:id:mazcon:20210428204808p:plain

図の通りUSBポートを下にして一番左上が座標(1,1)で右下が(5,5)にします。
引数でx,yが指定できるように関数化しておきます。

f:id:mazcon:20210427234908p:plain

実行すると、

f:id:mazcon:20210430170927j:plain

座標指定での点灯が可能になりました。

円弧の描画

続いて円弧を描画します。コードはこんな感じで作ってみました。

f:id:mazcon:20210427235345p:plain
GitHubファイル名:example1_draw_arc_0deg.m5f

中心点は左上の(1,1)で角度はとりあえず0度とこに点を打ってみます。
長さ4にしたので真下の(1,5)が点灯ればOKです。変数の内容は以下の通りです。

  • radius:半径
  • angle:角度(度)
  • axis:中心座標(1なら(1,1)、3なら(3,3)が中心)
  • x, y:表示する座標

角度の計算はラジアン変換が必要ですが、pythonでコードを見るとブロックが自動でやってくれるようです。
なので度数法の角度をそのまま入力すればよさそうです。

f:id:mazcon:20210428000402p:plain

LED番号は小数にするとエラーになるので四捨五入で丸めておきます。
実行すると、

f:id:mazcon:20210430170931j:plain

中心点を赤くしました。問題なさそうなのでループで90度まで描いてみます。

f:id:mazcon:20210430170952j:plain

円弧の完成です。内側にもう一本書いて太くしアニメーション化しました。

f:id:mazcon:20210430184226g:plain

OKっすね。最終的にこんなコードになりました。

f:id:mazcon:20210428000858p:plain
GitHubファイル名:example2_draw_arc_quarter.m5f

円描画

円弧ができれば簡単です。円弧をちょっとカスタムします。

f:id:mazcon:20210430172703p:plain

中心点を(3,3)にして半径の長さも短くします。

f:id:mazcon:20210430170947j:plain

90度までのループまでだったので、1回転させると、

f:id:mazcon:20210430170940j:plain

円が描けました。角度のカウントを30にして45度の描画を削ると、

f:id:mazcon:20210430170935j:plain

こっちのがすっきりっすね。さらに軌跡を消してみます。

f:id:mazcon:20210430184235g:plain

回ってくれました。

0度と360度は同じ位置になるので、ループを360度までにすると真下で一瞬止まってしまいます。
なのでループの最大値はカウント数分引いた値までにします。
最終的なコードはこちらです。

f:id:mazcon:20210430172845p:plain
GitHubファイル名:example3_draw_circle.m5f

いろんなバリエーション

回転アニメーションでいろんなバージョンを作ってみました。
コードはGitHubからご覧ください。

f:id:mazcon:20210430182503g:plain

いびつな動きは速度を上げると多少滑らかに見えるようになったりします。

最後に

回転系の簡単なアニメーションを作ってみました。
動画ではわからないですが、絵を書き換える際に一回黒く塗りつぶしてるので若干ちらついてしまいます。
ちょっと工夫が必要そうです。