ESP32 OLED Golden Brown Lyrics

Project

ESP32

ESP32 OLED Golden Brown Lyrics

Wiring Schematic

ARDUINO / C++

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <math.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1  
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

#define INITIAL_DELAY_MS 2000

#define NUM_STARS 18
struct Star {
  int x, y;
  float phase;
  float speed;
} stars[NUM_STARS];

unsigned long lastShootingStarUpdate = 0;
struct ShootingStar {
  float x, y;
  float vx, vy;
  bool active;
} shootingStar = {0, 0, 0, 0, false};

int lastLyricIdx = -1;

enum Effect {
  EFFECT_NONE = 0,
  EFFECT_HOVER,
  EFFECT_EXPAND,
  EFFECT_BEAT
};

struct Lyric {
  unsigned long delayBeforeMs;        
  unsigned long durationMs;           
  const char* word;                   
  Effect effect;                      
  uint8_t size;                       
  unsigned long calculatedStartTime;  
};

Lyric lyrics[] = {
  { INITIAL_DELAY_MS, 2000, "never", EFFECT_HOVER, 2, 0 },
  { 0, 800, "a", EFFECT_EXPAND, 2, 0 },
  { 100, 600, "never", EFFECT_BEAT, 2, 0 },
  { 100, 600, "a", EFFECT_BEAT, 2, 0 },
  { 300, 400, "frown", EFFECT_BEAT, 3, 0 },
  { 200, 600, "with", EFFECT_HOVER, 2, 0 },
  { 0, 1500, "golden", EFFECT_EXPAND, 2, 0 },
  { 0, 1200, "brown", EFFECT_HOVER, 3, 0 }
};
const int numLyrics = sizeof(lyrics) / sizeof(Lyric);

unsigned long startTime = 0;
bool isPlaying = true;
unsigned long TOTAL_LOOP_TIME = 0;

void initStars() {
  for(int i = 0; i < NUM_STARS; i++) {
    stars[i].x = random(26, 102); 
    stars[i].y = random(1, 40);
    stars[i].phase = random(0, 100) / 10.0;
    stars[i].speed = 0.002 + (random(0, 10) / 5000.0);
  }
}

void setup() {
  Serial.begin(115200);
  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    for (;;);
  }

display.clearDisplay();
  display.setTextColor(WHITE);
  display.setTextWrap(false);

initStars();

unsigned long runningTime = 0;
  for (int i = 0; i < numLyrics; i++) {
    runningTime += lyrics[i].delayBeforeMs;
    lyrics[i].calculatedStartTime = runningTime;
    runningTime += lyrics[i].durationMs;
  }
  TOTAL_LOOP_TIME = runningTime + 3000;

startTime = millis();
}

// =========================================================================
// CASTLE DRAWING
// =========================================================================

void drawBeautifulCastle() {
  // === LEFT TOWER ===
  // Main tower body
  display.fillRect(4, 18, 16, 46, WHITE);
  
  // Pointed roof
  display.fillTriangle(2, 18, 12, 4, 22, 18, WHITE);
  // Roof texture (shingles)
  display.drawLine(6, 14, 18, 14, BLACK);
  display.drawLine(8, 10, 16, 10, BLACK);
  display.drawLine(10, 6, 14, 6, BLACK);

// Battlements on top of tower (3 merlons)
  display.fillRect(3, 15, 5, 3, WHITE);
  display.fillRect(9, 15, 6, 3, WHITE);
  display.fillRect(16, 15, 5, 3, WHITE);
  display.drawLine(3, 18, 21, 18, BLACK); // line under battlements

// Window (arched)
  display.fillRoundRect(8, 22, 8, 12, 3, BLACK);
  // Window bars (1 pixel thick)
  display.drawLine(12, 22, 12, 33, WHITE); // vertical
  display.drawLine(8, 28, 15, 28, WHITE);  // horizontal

// Small window below
  display.fillRect(10, 38, 4, 6, BLACK);
  display.drawPixel(10, 38, WHITE); display.drawPixel(13, 38, WHITE);

// === RIGHT TOWER ===
  // Main tower body
  display.fillRect(108, 18, 16, 46, WHITE);
  
  // Pointed roof
  display.fillTriangle(106, 18, 116, 4, 126, 18, WHITE);
  // Roof texture
  display.drawLine(110, 14, 122, 14, BLACK);
  display.drawLine(112, 10, 120, 10, BLACK);
  display.drawLine(114, 6, 118, 6, BLACK);

// Battlements
  display.fillRect(107, 15, 5, 3, WHITE);
  display.fillRect(113, 15, 6, 3, WHITE);
  display.fillRect(120, 15, 5, 3, WHITE);
  display.drawLine(107, 18, 125, 18, BLACK);

// Window (arched)
  display.fillRoundRect(112, 22, 8, 12, 3, BLACK);
  // Window bars (1 pixel thick)
  display.drawLine(116, 22, 116, 33, WHITE); // vertical
  display.drawLine(112, 28, 119, 28, WHITE);  // horizontal
  
  // Small window below
  display.fillRect(114, 38, 4, 6, BLACK);
  display.drawPixel(114, 38, WHITE); display.drawPixel(117, 38, WHITE);

// === CONNECTING WALL ===
  display.fillRect(20, 44, 88, 20, WHITE);
  
  // Unified brick texture (spans across both towers and wall)
  for(int y = 48; y < 64; y += 4) {
    int offset = (y % 8 == 0) ? 0 : 8;
    for(int x = 6 + offset; x < 124; x += 16) {
      if(x < 48 || x > 76) { // Don't draw bricks over the gate
        int xEnd = x + 6;
        if(xEnd > 123) xEnd = 123; // Bound to right tower edge
        display.drawLine(x, y, xEnd, y, BLACK);
        if(x + 3 <= 123) display.drawPixel(x + 3, y + 1, BLACK); // vertical mortar joint hint
      }
    }
  }

// Battlements along the wall
  for(int x = 20; x < 108; x += 8) {
    display.fillRect(x+1, 41, 6, 3, WHITE);
  }
  display.drawLine(20, 44, 107, 44, BLACK); // Wall top line

// === GRAND GATE (center) ===
  // Gate archway (stone border)
  display.fillRoundRect(50, 44, 28, 20, 14, BLACK);
  display.fillRoundRect(52, 46, 24, 18, 12, WHITE);
  display.fillRoundRect(54, 48, 20, 16, 10, BLACK);
  // Make the bottom flat
  display.fillRect(50, 58, 28, 6, BLACK);
  display.fillRect(52, 58, 24, 6, WHITE);
  display.fillRect(54, 58, 20, 6, BLACK);
  
  // Arch stones details (radial lines around the arch)
  display.drawLine(52, 50, 54, 51, BLACK);
  display.drawLine(53, 47, 55, 49, BLACK);
  display.drawLine(57, 45, 58, 48, BLACK);
  display.drawLine(64, 44, 64, 48, BLACK); // center keystone
  display.drawLine(71, 45, 70, 48, BLACK);
  display.drawLine(75, 47, 73, 49, BLACK);
  display.drawLine(76, 50, 74, 51, BLACK);

// Portcullis grid
  for(int x = 56; x <= 72; x += 4) {
    display.drawLine(x, 48, x, 64, WHITE);
  }
  for(int y = 52; y <= 60; y += 4) {
    display.drawLine(54, y, 74, y, WHITE);
  }

// Ground line
  display.drawLine(0, 63, 128, 63, WHITE);
  
  // Left Foundation Base (sloping down to the ground)
  display.drawPixel(3, 60, WHITE);
  display.drawLine(2, 61, 3, 61, WHITE);
  display.drawLine(1, 62, 3, 62, WHITE);
  display.drawPixel(2, 62, BLACK); // rocky texture
  
  // Right Foundation Base (sloping down to the ground)
  display.drawPixel(124, 60, WHITE);
  display.drawLine(124, 61, 125, 61, WHITE);
  display.drawLine(124, 62, 126, 62, WHITE);
  display.drawPixel(125, 62, BLACK); // rocky texture
}

void drawSky(unsigned long now) {
  // 1. Twinkling Stars
  for(int i = 0; i < NUM_STARS; i++) {
    float brightness = (sin(now * stars[i].speed + stars[i].phase) + 1.0) / 2.0;
    if (brightness > 0.55) {
        display.drawPixel(stars[i].x, stars[i].y, WHITE);
        if (brightness > 0.85 && i % 3 == 0) { 
           display.drawLine(stars[i].x - 1, stars[i].y, stars[i].x + 1, stars[i].y, WHITE);
           display.drawLine(stars[i].x, stars[i].y - 1, stars[i].x, stars[i].y + 1, WHITE);
        }
    }
  }

// 2. Shooting Stars
  unsigned long absoluteNow = millis();
  if (!shootingStar.active) {
    if (absoluteNow - lastShootingStarUpdate > 3000) { // Spawn every ~3 seconds
      if (random(0, 10) == 0) { // Slight randomness to exact spawn frame
        shootingStar.active = true;
        shootingStar.x = random(0, 30);
        shootingStar.y = random(2, 15);
        shootingStar.vx = 1.2 + random(0, 100) / 100.0;  // 1.2 to 2.2
        shootingStar.vy = 0.3 + random(0, 50) / 100.0;   // 0.3 to 0.8
        lastShootingStarUpdate = absoluteNow;
      }
    }
  } else {
    // Draw dotted trail
    for (int t = 0; t < 6; t++) {
      int tx = (int)(shootingStar.x - shootingStar.vx * t);
      int ty = (int)(shootingStar.y - shootingStar.vy * t);
      if (tx >= 0 && tx < SCREEN_WIDTH && ty >= 0 && ty < SCREEN_HEIGHT) {
        display.drawPixel(tx, ty, WHITE);
      }
    }
    
    // Bright 3-pixel head
    int hx = (int)shootingStar.x;
    int hy = (int)shootingStar.y;
    if (hx >= 0 && hx < SCREEN_WIDTH && hy >= 0 && hy < SCREEN_HEIGHT) {
      display.drawPixel(hx, hy, WHITE);
      if (hx + 1 < SCREEN_WIDTH) display.drawPixel(hx + 1, hy, WHITE);
      if (hy + 1 < SCREEN_HEIGHT) display.drawPixel(hx, hy + 1, WHITE);
    }

// Move star
    shootingStar.x += shootingStar.vx;
    shootingStar.y += shootingStar.vy;

// Deactivate when off screen
    if (shootingStar.x > SCREEN_WIDTH + 10 || shootingStar.y > SCREEN_HEIGHT) {
      shootingStar.active = false;
    }
  }
}

// =========================================================================
// MAIN LOOP
// =========================================================================

void loop() {
  if (!isPlaying) return;

unsigned long now = millis() - startTime;
  if (now > TOTAL_LOOP_TIME) {
    startTime = millis();
    now = 0;
    lastLyricIdx = -1;
  }

display.clearDisplay();

int currentLyricIdx = -1;
  for (int i = 0; i < numLyrics; i++) {
    if (now >= lyrics[i].calculatedStartTime && now <= (lyrics[i].calculatedStartTime + lyrics[i].durationMs)) {
      currentLyricIdx = i;
      break;
    }
  }

Effect currentEffect = EFFECT_NONE;
  float progress = 0.0;

if (currentLyricIdx != -1) {
    const Lyric& l = lyrics[currentLyricIdx];
    currentEffect = l.effect;
    float elapsedLyric = now - l.calculatedStartTime;
    progress = elapsedLyric / (float)l.durationMs;

if (currentLyricIdx != lastLyricIdx) {
      lastLyricIdx = currentLyricIdx;
    }
  } else {
    lastLyricIdx = -1; 
  }

// 1. DRAW BACKGROUND
  drawSky(now);
  drawBeautifulCastle();

// 2. DRAW LYRICS
  if (currentLyricIdx != -1) {
    const Lyric& l = lyrics[currentLyricIdx];
    float elapsedLyric = now - l.calculatedStartTime;
    
    int textSize = l.size;
    float offsetX = 0;
    float offsetY = 0;
    
    float boxProgress = 1.0;

if (l.effect == EFFECT_HOVER) {
      offsetY = sin(elapsedLyric * 0.003) * 4.0;
    } 
    else if (l.effect == EFFECT_BEAT) {
      offsetY = -sin(progress * PI) * 4.0; 
    }
    else if (l.effect == EFFECT_EXPAND) {
      offsetY = sin(elapsedLyric * 0.003) * 4.0; // Add hover motion to expand effect too
      float expandMs = 150.0;
      if (elapsedLyric < expandMs) {
          boxProgress = elapsedLyric / expandMs;
      } else if (elapsedLyric > (l.durationMs - expandMs)) {
          boxProgress = (l.durationMs - elapsedLyric) / expandMs;
      } else {
          boxProgress = 1.0;
      }
      if (boxProgress < 0) boxProgress = 0.0;
    }

display.setTextSize(textSize);
    int16_t x1, y1;
    uint16_t w, h;
    display.getTextBounds(l.word, 0, 0, &x1, &y1, &w, &h);
    
    if (w > 64) {
        textSize = l.size > 1 ? l.size - 1 : 1;
        display.setTextSize(textSize);
        display.getTextBounds(l.word, 0, 0, &x1, &y1, &w, &h);
    }

int pocketCenterX = 64;
    int pocketCenterY = 21; 
    
    int drawX = pocketCenterX - (w / 2) + (int)offsetX;
    int drawY = pocketCenterY - (h / 2) + (int)offsetY;
    
    int maxBoxW = w + 12;
    int boxW = maxBoxW * boxProgress;
    int boxH = h + 10;
    int boxX = drawX - 6 + ((maxBoxW - boxW) / 2);
    int boxY = drawY - 5;

if (boxW > 2) {
        display.fillRoundRect(boxX, boxY, boxW, boxH, 3, BLACK);
        display.drawRoundRect(boxX, boxY, boxW, boxH, 3, WHITE);
    }
    
    if (boxProgress >= 0.95) {
        display.setTextColor(WHITE);
        display.setCursor(drawX, drawY);
        display.print(l.word);
        
        if (strcmp(l.word, "golden") == 0) {
            display.setCursor(drawX + 1, drawY);
            display.print(l.word);
        }
    }
  }

display.display();
}

ESP32 OLED Golden Brown Lyrics

Project Overview

The ESP32 OLED Golden Brown Song Lyrics Visualizer teaches advanced techniques for creating animated backgrounds with dynamic text rendering on small display screens using I2C communication.

This project displays synchronized Golden Brown song lyrics on a 128×64 SSD1306 OLED display with castle backgrounds, twinkling stars, shooting stars, and professional-quality text animations and effects.

When you run the project, an animated castle scene appears with a starry night sky while Golden Brown song lyrics animate over the background. The text moves with hover, beat, and expand effects creating engaging visual presentation throughout the song sequence.

Key Features: I2C communication between ESP32 and OLED displays, complex background animations with castle graphics, twinkling star effects with shooting star animations, dynamic text animation with multiple effect types, synchronized timing for lyric sequences, lightweight code optimized for microcontroller platforms.

Components Required

To build this project, collect these specific items from your kit and ensure each component is in good working condition.

ESP32 Development Board x 1, SSD1306 OLED Display (128×64) x 1, Breadboard x 1, Jumper Wires x 4, USB Cable x 1.

Circuit Connections

Step 1: Connect Ground Rail for Shared Reference

Connect the ESP32 GND ground pin directly to the negative rail of your breadboard to establish a shared ground connection for your entire circuit and all connected electronic components throughout the system.

Step 2: Place and Position OLED Display Module

Position the SSD1306 OLED display module carefully near the top edge of your breadboard for convenient access and proper alignment with all jumper wire connections during the assembly process to ensure success.

Step 3: Connect VCC Power Pin to Supply

Connect the OLED VCC power pin directly to the ESP32 3.3V output pin to provide the correct voltage level and adequate power supply for the small OLED display module operation and functionality.

Step 4: Connect Ground Pin for Return Path

Connect the OLED GND ground pin to the breadboard negative rail to complete the power circuit and establish the electrical return path for all current flowing through connected components on the breadboard.

Step 5: Connect SDA Data Pin for I2C

Connect the OLED SDA serial data pin to ESP32 GPIO pin 21 to enable I2C protocol serial data transmission between the ESP32 microcontroller and the OLED display device communication successfully.

Step 6: Connect SCL Clock Pin for Timing

Connect the OLED SCL serial clock pin to ESP32 GPIO pin 22 to provide I2C timing synchronization that coordinates precise data transmission between all connected I2C devices on the bus system.

Step 7: Verify All Connections Before Upload

Double-check all four display pins for correct connections and secure jumper wire placement before uploading any code to your ESP32 microcontroller board to prevent connectivity problems during operation and testing.

Important: The SSD1306 OLED display uses the I2C protocol, a two-wire communication standard where the SDA pin transmits data and the SCL pin provides essential timing synchronization for reliable data transfer.

Software Requirements

Before uploading code to your ESP32, install the following software components, libraries, and drivers on your development system.

Arduino IDE : Download and install the latest version from the official Arduino website for code development, editing, and uploading to your microcontroller board.

ESP32 Board Package : Add the ESP32 board package to Arduino IDE by accessing Boards Manager and searching for ESP32 with proper version selection.

Adafruit GFX Library : Install this library using Arduino IDE Library Manager to access graphics drawing functions and text rendering capabilities for display output.

Adafruit SSD1306 Library : Install this library for complete SSD1306 OLED display control, initialization, and I2C communication protocol implementation.

CH340 USB Driver : Download and install the CH340 USB driver for your specific operating system to enable ESP32 board serial communication with your computer.

Verify Installation : Open Arduino IDE, select your ESP32 board from Tools menu, and confirm the COM port shows your connected microcontroller device.

How the Project Code Works

Initialize Display and Star Array Patterns

The setup function configures I2C pins for communication and initializes the SSD1306 OLED display with 400kHz clock speed for reliable data transmission. The initStars function populates a star array with random positions and phase values that create twinkling effects throughout the animation sequence.

Create Detailed Castle Background Graphics

The drawBeautifulCastle function renders a detailed castle scene using geometric shapes including towers, battlements, windows, gates, and foundation elements. The function uses multiple drawing primitives like fillRect, fillTriangle, and drawLine to construct individual castle components with artistic detail and visual appeal.

Animate Sky Elements with Stars and Meteors

The drawSky function calculates twinkling star brightness using sine wave functions to create realistic flickering effects over time. The shooting star system spawns random meteor streaks that travel across the screen with velocity calculations creating dynamic atmospheric effects throughout playback.

Process Lyric Timing Events and Effect Selection

The main loop continuously tracks elapsed time against calculated start times to trigger lyrics at precisely the right moment. Each lyric checks its associated effect type and progress value to determine what animation transformation to apply during current display frame.

Render Lyrics with Dynamic Animation Effects

The code implements hover effects that oscillate text vertically, beat effects that compress and release text, and expand effects that grow rounded text boxes. Text positioning calculations center words on the display while applying offset values from active animations creating smooth coordinated motion effects.

Expected Output

After uploading your code to the ESP32, connect the USB cable and observe the display initialization process beginning.

The OLED display shows a detailed castle scene with a twinkling starry night sky creating an atmospheric background. Golden Brown song lyrics appear centered on the display with smooth animation effects including hovering, beating, and expanding text creating professional presentation quality.

Shooting stars periodically streak across the sky while lyrics animate with beautiful transitions and precise timing synchronization. The animation cycles through all lyrics and automatically restarts for continuous playback creating an engaging and immersive visual experience.

Operational Troubleshooting

OLED Display Remains Blank or Unresponsive to Code :- Verify all four display pins connect to correct ESP32 GPIO pins as specified in the circuit diagram. Check VCC and GND connections for proper power supply with adequate current. Confirm the USB cable provides sufficient power and verify the I2C address matches your OLED model.

Castle or Sky Graphics Appear Corrupted or Partially Rendered :- Confirm both Adafruit GFX and SSD1306 libraries are correctly installed in your Arduino IDE folder. Check the I2C clock speed is set to 400kHz for optimal communication between microcontroller and display device. Verify no other code is interfering with GPIO pins 21 and 22 during execution.

Text Animation Effects Do Not Play or Appear Delayed :- Verify the lyrics array contains correct timing values in milliseconds for each animation sequence entry. Check that delay and effect values match your intended animation playback speed and sequence length. Confirm the millis() function is tracking elapsed time properly without interruption.

Stars Do Not Twinkle or Shooting Stars Do Not Appear :- Ensure the initStars function properly populated the star array with initial values. Verify the random number generator is seeded properly at startup time. Check that the drawing functions for stars and shooting stars are being called every frame in the main loop.

What You Learned

By finishing this project, you understand how to combine complex background animations with timed text animations on small OLED displays. You have learned techniques for rendering detailed graphics like castles and managing multiple animation layers simultaneously with precise timing synchronization on microcontroller systems.

You can apply advanced animation techniques to create immersive visual experiences on embedded platforms with limited resources. You have experienced how layered animations and atmospheric effects enhance storytelling and create memorable user experiences on constrained microcontroller devices.

WHAT'S NEXT?

Ready to Build More?

Explore more Lifetronix projects, improve your skills, and turn your ideas into real working prototypes.

Project

ESP32

ESP32 OLED Golden Brown Lyrics

Instagram

Youtube

Wiring Schematic

ESP32 OLED Golden Brown Lyrics

Project Overview

Components Required

Circuit Connections

Step 1: Connect Ground Rail for Shared Reference

Step 2: Place and Position OLED Display Module

Step 3: Connect VCC Power Pin to Supply

Step 4: Connect Ground Pin for Return Path

Step 5: Connect SDA Data Pin for I2C

Step 6: Connect SCL Clock Pin for Timing

Step 7: Verify All Connections Before Upload

Software Requirements

How the Project Code Works

Initialize Display and Star Array Patterns

Create Detailed Castle Background Graphics

Animate Sky Elements with Stars and Meteors

Process Lyric Timing Events and Effect Selection

Render Lyrics with Dynamic Animation Effects

Expected Output

Operational Troubleshooting

What You Learned

WHAT'S NEXT?

Ready to Build More?