Skip to main content

Realistic OLED Eyes Animation using Arduino UNO (Wokwi Simulation)

on
Arduino Animated Robot Eyes – OLED SSD1306 Project | MakeMindz
▶ Open Wokwi
🤖 Summer Class Project

Arduino Animated Robot Eyes
on OLED Display

Create expressive blinking, pupil-tracking eyes using Arduino Uno + SSD1306 OLED — perfect for robot faces, AI assistants, and humanoid bots!

▶ Run Simulation 📋 Get the Code
SSD1306 128×64
● Looking right... blinking...
Arduino UnoI2C A4/A5

Overview

What You'll Build

A pair of expressive animated robot eyes on a tiny OLED screen — blinking, looking left and right, showing personality!

⏱️
~20
Minutes to build
⭐
Easy
Beginner level
🖥️
Free
Wokwi simulator
🤖
Robot
Face module
💡
No hardware required! This runs entirely in the free Wokwi browser simulator. Great as a face module for your robot car or IoT bot projects.

Components

What You Need

Only 2 virtual parts needed — minimal and beginner-friendly!

Arduino Uno R3
SSD1306 128×64 OLED (I2C)
Wokwi Browser Simulator
📦
Libraries needed: Adafruit GFX and Adafruit SSD1306 — both are available inside Wokwi with one click.

Wiring

Circuit Connections (I2C)

Just 4 wires connect the OLED to the Arduino Uno via the I2C bus.

5V
OLED VCC
Power supply
GND
OLED GND
Ground
A4
OLED SDA
I2C Data line
A5
OLED SCL
I2C Clock line
🔌

Full Connection Table

OLED PinArduino Uno PinWire Color
VCC5V🔴 Red
GNDGND⬛ Black
SDAA4🔵 Blue
SCLA5🟢 Green
ℹ️
The OLED I2C address is 0x3C. The code also tries 0x3D as a fallback if the first address fails.

Instructions

Step-by-Step Guide

Follow these 7 steps to get robot eyes running in your browser.

  1. Open the Wokwi Simulation

    Click the ▶ Run Simulation button above or go directly to wokwi.com/projects/459549398118790145. The project opens with the OLED and Arduino Uno pre-loaded.

  2. Check the diagram.json wiring

    Click the diagram.json tab. You'll see the OLED connected to Arduino via I2C (SDA → A4, SCL → A5). If starting fresh, paste the JSON from the Diagram section below.

  3. Add the required libraries

    In Wokwi, click the Libraries icon (book 📚) in the left sidebar. Search and add Adafruit GFX Library and Adafruit SSD1306. Both install automatically.

    ✅
    In the linked simulation these are already included — no manual install needed!

  4. Open the sketch.ino tab

    Click the sketch.ino tab. You'll see (or paste) the Arduino code. The code uses display.fillCircle() and display.drawLine() to draw the eye shapes frame by frame.

  5. Paste the code if needed

    If starting from a blank project, paste the full code from the Code section below into sketch.ino. Replace all existing content.

  6. Click ▶ Start Simulation

    Hit the green play button. The OLED display will turn on showing two large white eyes with dark pupils. Watch them look left, look right, then blink — on a repeating loop!

    👀
    Expected result: Eyes look right (1 sec) → blink (0.15 sec) → look left (1 sec) → look right (1 sec) → repeat.

  7. Check the Serial Monitor

    Open the Serial Monitor tab to see startup messages: Starting OLED Eyes... and Display initialized! — confirming I2C communication works perfectly.

👁️ Try It Live in Your Browser

Watch the eyes blink and move in real time — no downloads, no hardware, completely free.

Open Live Simulation

How It Animates

Eye Animation States

The loop() function cycles through 3 distinct eye states — each redrawn from scratch.

👀
Look Right
Pupils shifted to +5px on X-axis from center
delay(1000)
😑
Blink
Eyes replaced by two horizontal lines (closed lids)
delay(150)
👁️
Look Left
Pupils shifted to −5px on X-axis from center
delay(1000)
🎨
How drawing works: Each eye is 3 stacked circles — a white outer ring (r=18), a black inner (r=16), and a white pupil (r=8) that shifts position to simulate gaze direction.

Source Code

Arduino Sketch

Paste this into your sketch.ino tab in Wokwi.

sketch.ino — Arduino C++ 
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH  128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// ─────────────── SETUP ───────────────
void setup() {
  Serial.begin(9600);
  Serial.println("Starting OLED Eyes...");

  // Try I2C address 0x3C first, then 0x3D as fallback
  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println("SSD1306 allocation failed");
    if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3D)) {
      Serial.println("Failed at 0x3D too");
      for (;;);  // Halt — display not found
    }
  }

  Serial.println("Display initialized!");
  display.clearDisplay();
  display.display();
}

// ─────────────── LOOP ────────────────
void loop() {

  // ── STATE 1: Eyes looking right ──
  display.clearDisplay();

  // Left eye — pupil shifted RIGHT (+5px on X)
  display.fillCircle(40, 32, 18, SSD1306_WHITE);   // White outer ring
  display.fillCircle(40, 32, 16, SSD1306_BLACK);   // Black iris
  display.fillCircle(45, 32, 8,  SSD1306_WHITE);   // White pupil (right)

  // Right eye — pupil shifted RIGHT (+5px on X)
  display.fillCircle(88, 32, 18, SSD1306_WHITE);
  display.fillCircle(88, 32, 16, SSD1306_BLACK);
  display.fillCircle(93, 32, 8,  SSD1306_WHITE);

  display.display();
  delay(1000);

  // ── STATE 2: Blink (eyes closed) ──
  display.clearDisplay();
  display.drawLine(25, 32, 55,  32, SSD1306_WHITE);  // Left eyelid line
  display.drawLine(73, 32, 103, 32, SSD1306_WHITE);  // Right eyelid line
  display.display();
  delay(150);

  // ── STATE 3: Eyes looking left ──
  display.clearDisplay();

  // Left eye — pupil shifted LEFT (−5px on X)
  display.fillCircle(40, 32, 18, SSD1306_WHITE);
  display.fillCircle(40, 32, 16, SSD1306_BLACK);
  display.fillCircle(35, 32, 8,  SSD1306_WHITE);   // White pupil (left)

  // Right eye — pupil shifted LEFT (−5px on X)
  display.fillCircle(88, 32, 18, SSD1306_WHITE);
  display.fillCircle(88, 32, 16, SSD1306_BLACK);
  display.fillCircle(83, 32, 8,  SSD1306_WHITE);

  display.display();
  delay(1000);

  // ── STATE 4: Look right again (then loop) ──
  display.clearDisplay();
  display.fillCircle(40, 32, 18, SSD1306_WHITE);
  display.fillCircle(40, 32, 16, SSD1306_BLACK);
  display.fillCircle(45, 32, 8,  SSD1306_WHITE);

  display.fillCircle(88, 32, 18, SSD1306_WHITE);
  display.fillCircle(88, 32, 16, SSD1306_BLACK);
  display.fillCircle(93, 32, 8,  SSD1306_WHITE);
  display.display();
  delay(1000);
}

Diagram JSON

Wokwi diagram.json

Paste this into the diagram.json tab in Wokwi to auto-place and wire the OLED.

diagram.json 
{
  "version": 1,
  "author":  "Wokwi",
  "editor":  "wokwi",
  "parts": [
    { "type": "wokwi-arduino-uno", "id": "uno",  "top": 0,    "left": 0,   "attrs": {} },
    { "type": "wokwi-ssd1306",      "id": "oled", "top": -100, "left": 100, "attrs": {} }
  ],
  "connections": [
    [ "oled:GND", "uno:GND.1", "black", [ "v0" ] ],
    [ "oled:VCC", "uno:5V",    "red",   [ "v0" ] ],
    [ "oled:SDA", "uno:A4",    "blue",  [ "v0" ] ],
    [ "oled:SCL", "uno:A5",    "green", [ "v0" ] ]
  ]
}

Explanation

How It Works

Each eye is drawn using layered circles — a simple but effective technique for OLED graphics.

🎨

Drawing Technique — Layered Circles

LayerFunction CallColorPurpose
1 — Outer ringfillCircle(x, 32, 18, WHITE)WhiteEye whites (sclera)
2 — Iris cutoutfillCircle(x, 32, 16, BLACK)BlackCreates the iris ring effect
3 — PupilfillCircle(x±5, 32, 8, WHITE)WhitePupil that moves left/right
📐
Pupil movement trick: The left eye center is at X=40, right eye at X=88. Moving the pupil circle ±5px on X creates the look-left / look-right effect. Blink replaces the circles with a single drawLine().
📡

I2C Communication

The SSD1306 OLED uses the I2C protocol — a 2-wire bus (SDA + SCL) that lets the Arduino send display data efficiently. The Arduino Uno's hardware I2C pins are A4 (SDA) and A5 (SCL). The Adafruit libraries handle all the low-level I2C communication automatically — you just call drawing functions!

Education

What You'll Learn

Core embedded systems and graphics programming concepts — all in one beginner project.

✓Using SSD1306 OLED with Arduino
✓Understanding I2C communication (SDA / SCL)
✓Creating frame-based animations with clearDisplay()
✓Drawing circles and lines with Adafruit GFX
✓Managing timing with delay()
✓Designing expressive robot interfaces
✓Layered graphic techniques (white-on-black masking)
✓Serial Monitor debugging in Arduino IDE

Use Cases

Applications

This eye animation module can plug right into larger robotics and IoT projects.

🤖Robot face display module
🧠DIY AI assistant personality UI
🦾Humanoid robot head project
🎭Interactive art installation
🏫STEM robotics workshop demo
🚗Robot car / IoT bot face panel
🚀
Upgrade idea: Combine this with the Virtual Pet project to add eye animations to your pet, or mount it on the obstacle-avoiding robot car for a friendly face!

Comments

Post a Comment