棒グラフをアニメーション表示する

数値は正確ですが、barなら状況を瞬時に伝えられます。伸びていくバーは、数字を読むよりもはるかに速く、センサー値の上昇を示します。📊

アニメーションは新しいデータから始まります。ループのたびに新しいsensor値を取得します。たとえば、analogReadなら0から1023の範囲の値が得られます。

生の値の範囲は、画面の幅と一致しないことがほとんどです。mapを使って0-1023を0-128ピクセルに変換し、画面の幅に収めます。

ノイズの影響で測定値が範囲を超えることがあります。constrainで値を制限すれば、バーが画面の端を越えて描画され、レイアウトが崩れるのを防げます。

アニメーションとは、すばやく描画し直すことです。各フレームの最初にclearDisplayを呼び出し、古いバーを消してから新しい長さを描画します。

変換した幅を使い、fillRectでバーを描画します。x、y、高さを固定しておけば、データに応じて幅だけが変化します。

drawRectでトラック全体の輪郭を描き、最大値を示します。塗りつぶし部分がこの枠の内側で伸びるため、バーの意味が明確になります。

バーに正確な数値を組み合わせます。バーの上にカーソルを設定し、printで測定値を表示すると、形状と正確な数値の両方を確認できます。

完成したフレームをdisplay.display()で送信します。バッファ全体が一度に更新されるため、途中までしか描画されないちらつきなく、バーが滑らかに動きます。

可能な限り速く再描画すると、動きが不安定に見えます。50ミリ秒の短いdelayを入れると、動きが滑らかになり、センサー値の細かな揺れも落ち着きます。

すべてをつなげると、読み取り、変換、消去、描画、表示、一時停止という流れになります。loop()内のこのサイクルが、作成するすべてのライブOLEDアニメーションの原動力です。

測定値をリアルタイムのbar graphに変換しました。読み取り、変換、範囲制限、消去、塗りつぶし、枠付け、ラベル付け、表示を一定の間隔で繰り返します。これがリアルタイム可視化です。