Animer un graphique à barres

Numbers are precise, but a bar tells the story instantly. A growing bar shows a rising sensor value far faster than reading digits. 📊

Animation begins with fresh data. Each loop you grab a new sensor value, for example an analogRead that lands between 0 and 1023.

The raw range rarely matches the screen. Use map to rescale 0-1023 into 0-128 pixels so the value fits your display width.

A noisy reading can overshoot. Wrap it in constrain so the bar never draws past the screen edge and corrupt the layout.

Animation is just redrawing fast. Every frame starts with clearDisplay so the old bar vanishes before the new length is drawn.

Now paint the bar with fillRect, using your mapped width. A fixed x, y, and height keep it steady while the width breathes with the data.

Outline the full track with drawRect so users see the maximum. The fill grows inside this border, giving the bar clear context.

Pair the bar with the exact number. Set the cursor above it and print the reading so users get both the shape and the precise figure.

Send the finished frame with display.display(). Because the whole buffer updates at once, the bar moves cleanly with no half-drawn flicker.

Redrawing as fast as possible looks jittery. A small delay of 50 milliseconds smooths motion and steadies a twitchy sensor reading.

Put it together: read, map, clear, draw, display, pause. That cycle in loop() is the engine behind every live OLED animation you build.

Your bar shows ghost trails from previous frames.

You turned readings into a live bar graph: read, map, constrain, clear, fill, frame, label, and display in a paced loop. That is real-time visualization.