Dynamic OLED Animation Display with Arduino

Animating a tiny screen is a fun place to start if you’ve never done graphics on a microcontroller. This build is aimed at beginners who want to get an OLED display moving with an Arduino. The Arduino side is easy to pick up, and OLED screens give you sharp, high-contrast pixels, so animations look clean even on a small panel. You can build effects that feel surprisingly alive for how little code they take. Want to add some life to a project, or just poke at what OLED can do? Either way, you’ll come out of this able to write your own animations.

The whole point here is to show what an OLED and an Arduino can pull off together. You get moving, eye-catching graphics out of a cheap screen. It’s handy for a lot of things: a classroom demo for teaching code and electronics, a decoration, or just something fun to watch on your desk. Cycle through a few animations and you start seeing how little code it takes to get a good-looking result. You learn and experiment at the same time.

Mostly this project is meant to be enjoyable and worth your time. Building your own animations pushes both the creative and the technical side of your brain. You’ll pick up bits of programming, electronics, and a little design sense, which sets you up well for bigger builds later. It’s a solid first taste of digital art, and it gives you the nerve to tackle harder projects down the road.

Components

// Live from circuit.rocks shop

SKU: —

Oled 1 3 I2c

—

add

SKU: —

Usb Cable Type B To Type A Male For Arduino Uno Mega

—

add

SKU: —

Arduino Uno R3 Board Atmega328

—

add

Connections:

OLED Display to Arduino via I2C:

• VCC of OLED to 5V on Arduino
• GND of OLED to GND on Arduino.
• SCL (Serial Clock) of OLED to A5 on Arduino Uno
• SDA (Serial Data) of OLED to A4 on Arduino Uno

Additional Notes:

• Install the libraries you need (Adafruit_GFX and Adafruit_SH110X, or a library made for the SH1106 if that’s your panel) in the Arduino IDE before you upload.
• The sketch draws a cloud and moves raindrops. The drawCloud function and the code inside loop handle the animation.
• Once a raindrop falls past the bottom of the screen, it gets reset back up to the cloud, so the rain never stops.

Code:

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SH110X.h> #define i2c_Address 0x3C // OLED display I2C address, adjust if necessary
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET -1 // Reset pin (not used with I2C interfaces) Adafruit_SH1106G display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); #define NUM_DROPS 10
struct Raindrop { int x, y; int speed;
} drops[NUM_DROPS]; int cloudX = 0; // Initial position of the cloud
int cloudY = 10; // Fixed vertical position of the cloud
int cloudWidth = 40; // Width of the cloud
int cloudHeight = 20; // Height of the cloud
int cloudSpeed = 1; // Speed of cloud movement
bool movingRight = true; // Direction of cloud movement void setup() { Serial.begin(9600); if (!display.begin(i2c_Address, true)) { Serial.println(F("SSD1306 allocation failed")); for(;;); // Don't proceed, loop forever } display.display(); delay(2000); // Pause for 2 seconds display.clearDisplay(); // Initialize raindrops with positions relative to the cloud and random speeds for (int i = 0; i < NUM_DROPS; i++) { drops[i].x = cloudX + random(cloudWidth); drops[i].y = cloudY + cloudHeight; drops[i].speed = random(1, 4); // Adjust for faster or slower drops }
} void drawCloud(int x, int y) { // Simple cloud representation using filled circles display.fillCircle(x + 10, y, 10, SH110X_WHITE); display.fillCircle(x + 20, y - 5, 15, SH110X_WHITE); display.fillCircle(x + 30, y, 10, SH110X_WHITE);
} void loop() { display.clearDisplay(); // Clear the display buffer // Draw the cloud drawCloud(cloudX, cloudY); // Move the cloud if (movingRight) { cloudX += cloudSpeed; if (cloudX > SCREEN_WIDTH - cloudWidth) movingRight = false; // Change direction } else { cloudX -= cloudSpeed; if (cloudX < 0) movingRight = true; // Change direction } // Move and draw each raindrop for (int i = 0; i < NUM_DROPS; i++) { if (drops[i].y > SCREEN_HEIGHT) { drops[i].y = cloudY + cloudHeight; // Reset to start from the cloud drops[i].x = cloudX + random(cloudWidth) - cloudWidth / 2; // Recalculate X to follow the cloud drops[i].speed = random(1, 4); // Reset speed } else { drops[i].y += drops[i].speed; // Continue falling } // Draw raindrop display.drawPixel(drops[i].x, drops[i].y, SH110X_WHITE); } display.display(); // Show the display buffer on the screen delay(50); // Update every 50 milliseconds for smoother animation
}

Troubleshooting:

• Nothing on the screen, or wrong graphics? Recheck the wiring, confirm the I2C address is right, and make sure the display is getting power.
• If you hit compile errors around display initialization, check that you’re using the right class and library for your SH1106 OLED. The code uses Adafruit_SH1106G, which can be a typo or a mix-up between library classes.

QUICK LINKS: