Independence Day Tribute V1

Project

ESP32

Independence Day Tribute V1

Wiring Schematic

ARDUINO / C++

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

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1
#define OLED_ADDR 0x3C
#define SDA_PIN 21
#define SCL_PIN 22

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

// ============================================================
// SETTINGS
// ============================================================

// ALL BLUE TEXT USES THIS SAME SIZE
#define BLUE_SIZE_X 1
#define BLUE_SIZE_Y 2

// Yellow header
#define HEADER_TEXT_Y 4
#define LETTER_GAP 1

// Animation timing
#define LETTER_DELAY 38
#define SPACE_DELAY 18
#define LINE_DELAY 60
#define HOLD_DELAY 220
#define TRANSITION_SPEED 10

// OLED zones
#define YELLOW_HEIGHT 16
#define BLUE_TOP 16

// ============================================================
// TEXT FUNCTIONS
// ============================================================

int getTextWidth(const char *text, int sx, int sy) {
  int16_t x1, y1;
  uint16_t w, h;
  display.setTextSize(sx, sy);
  display.getTextBounds(text, 0, 0, &x1, &y1, &w, &h);
  return w;
}

int centerX(const char *text, int sx, int sy) {
  return (SCREEN_WIDTH - getTextWidth(text, sx, sy)) / 2;
}

// ============================================================
// HEART
// ============================================================

void drawHeart(int cx, int cy, int size) {
  display.fillCircle(cx - size, cy - size / 2, size, SSD1306_WHITE);
  display.fillCircle(cx + size, cy - size / 2, size, SSD1306_WHITE);
  display.fillTriangle(
    cx - size * 2,
    cy,
    cx + size * 2,
    cy,
    cx,
    cy + size * 2,
    SSD1306_WHITE
  );
}

// ============================================================
// SPACED TEXT
// ============================================================

void drawSpacedText(const char *text, int x, int y, int gap) {
  display.setTextColor(SSD1306_WHITE);
  display.setTextSize(1);

for (int i = 0; text[i] != '\0'; i++) {
    display.setCursor(x, y);
    display.write(text[i]);
    x += 6 + gap;
  }
}

// ============================================================
// FIXED HEADER
//
//               I ♥ I N D I A
//
// Only heart pulses.
// ============================================================

void drawHeader(bool pulse = false) {
  const int iX = 30;
  const int heartX = 47;
  const int indiaX = 56;

display.setTextColor(SSD1306_WHITE);
  display.setTextSize(1);

// Fixed I
  display.setCursor(iX, HEADER_TEXT_Y);
  display.print("I");

// Only heart changes size
  drawHeart(heartX, 7, pulse ? 3 : 2);

// INDIA with small letter spacing
  drawSpacedText("INDIA", indiaX, HEADER_TEXT_Y, LETTER_GAP);
}

// ============================================================
// DRAW BLUE TEXT
// ============================================================

void drawBlueText(const char *text, int x, int y, int visible) {
  display.setTextColor(SSD1306_WHITE);
  display.setTextSize(BLUE_SIZE_X, BLUE_SIZE_Y);
  display.setCursor(x, y);

int len = strlen(text);
  if (visible > len) visible = len;

for (int i = 0; i < visible; i++) {
    display.write(text[i]);
  }
}

// ============================================================
// TYPEWRITER CURSOR
// ============================================================

void drawCursor(int x, int y, int visible) {
  int cursorX = x + visible * 6 * BLUE_SIZE_X;

display.fillRect(cursorX, y + 1, 1, 13, SSD1306_WHITE);
}

// ============================================================
// HEART PULSE HOLD
// ============================================================

void pulseHeart(
  const char *line1,
  const char *line2,
  int x1, int y1,
  int x2, int y2,
  int pulses = 1
) {
  for (int p = 0; p < pulses; p++) {
    display.clearDisplay();
    drawHeader(true);

if (line1) drawBlueText(line1, x1, y1, strlen(line1));
    if (line2) drawBlueText(line2, x2, y2, strlen(line2));

display.display();
    delay(65);

display.clearDisplay();
    drawHeader(false);

if (line1) drawBlueText(line1, x1, y1, strlen(line1));
    if (line2) drawBlueText(line2, x2, y2, strlen(line2));

display.display();
    delay(65);
  }
}

// ============================================================
// BLUE EXIT TRANSITION
// ============================================================

void clearBlueTransition() {
  for (int x = SCREEN_WIDTH; x >= 0; x -= 8) {
    display.fillRect(
      x,
      BLUE_TOP,
      8,
      SCREEN_HEIGHT - BLUE_TOP,
      SSD1306_BLACK
    );

display.display();
    delay(TRANSITION_SPEED);
  }
}

// ============================================================
// TWO LINE TYPEWRITER
// ============================================================

void animateTwoLines(
  const char *line1,
  const char *line2,
  int hold
) {
  // Final positions calculated once.
  // They never move during typing.
  int x1 = centerX(line1, BLUE_SIZE_X, BLUE_SIZE_Y);
  int x2 = centerX(line2, BLUE_SIZE_X, BLUE_SIZE_Y);

// Improved breathing space
  int y1 = 23;
  int y2 = 43;

int len1 = strlen(line1);
  int len2 = strlen(line2);

// TYPE LINE 1
  for (int i = 0; i <= len1; i++) {
    display.clearDisplay();
    drawHeader(false);

drawBlueText(line1, x1, y1, i);

if (i < len1) drawCursor(x1, y1, i);

display.display();

if (i < len1) {
      delay(line1[i] == ' ' ? SPACE_DELAY : LETTER_DELAY);
    }
  }

delay(LINE_DELAY);

// TYPE LINE 2
  for (int i = 0; i <= len2; i++) {
    display.clearDisplay();
    drawHeader(false);

drawBlueText(line1, x1, y1, len1);
    drawBlueText(line2, x2, y2, i);

if (i < len2) drawCursor(x2, y2, i);

display.display();

if (i < len2) {
      delay(line2[i] == ' ' ? SPACE_DELAY : LETTER_DELAY);
    }
  }

// Subtle heart pulse only
  pulseHeart(line1, line2, x1, y1, x2, y2, 1);

delay(hold);
}

// ============================================================
// SINGLE LINE TYPEWRITER
// ============================================================

void animateSingleLine(const char *text, int hold) {
  int x = centerX(text, BLUE_SIZE_X, BLUE_SIZE_Y);
  int y = 34;
  int len = strlen(text);

for (int i = 0; i <= len; i++) {
    display.clearDisplay();
    drawHeader(false);

drawBlueText(text, x, y, i);

if (i < len) drawCursor(x, y, i);

display.display();

if (i < len) {
      delay(text[i] == ' ' ? SPACE_DELAY : LETTER_DELAY);
    }
  }

pulseHeart(text, NULL, x, y, 0, 0, 1);

delay(hold);
}

// ============================================================
// INTRO
//
//              15 AUGUST
//
//               INDIA'S
//            INDEPENDENCE
// ============================================================

void intro() {
  const char *date = "15 AUGUST";
  const char *india = "INDIA'S";
  const char *independence = "INDEPENDENCE";

int dateX = centerX(date, 1, 1);
  int dateY = 3;
  int dateLen = strlen(date);

// 15 AUGUST — letter by letter
  for (int i = 0; i <= dateLen; i++) {
    display.clearDisplay();

display.setTextColor(SSD1306_WHITE);
    display.setTextSize(1);
    display.setCursor(dateX, dateY);

for (int j = 0; j < i; j++) {
      display.write(date[j]);
    }

if (i < dateLen) {
      display.fillRect(dateX + i * 6, dateY, 1, 8, SSD1306_WHITE);
    }

display.display();

if (i < dateLen) {
      delay(date[i] == ' ' ? SPACE_DELAY : LETTER_DELAY);
    }
  }

delay(100);

// INDIA'S slides smoothly upward
  int indiaX = centerX(india, BLUE_SIZE_X, BLUE_SIZE_Y);

for (int y = 42; y >= 25; y -= 3) {
    display.clearDisplay();

display.setTextSize(1);
    display.setCursor(dateX, dateY);
    display.print(date);

drawBlueText(india, indiaX, y, strlen(india));

display.display();
    delay(18);
  }

delay(70);

// INDEPENDENCE slides upward
  int independenceX = centerX(
    independence,
    BLUE_SIZE_X,
    BLUE_SIZE_Y
  );

for (int y = 63; y >= 47; y -= 2) {
    display.clearDisplay();

display.setTextSize(1);
    display.setCursor(dateX, dateY);
    display.print(date);

drawBlueText(india, indiaX, 25, strlen(india));
    drawBlueText(
      independence,
      independenceX,
      y,
      strlen(independence)
    );

display.display();
    delay(16);
  }

delay(350);

// Cinematic wipe away
  for (int y = 0; y < SCREEN_HEIGHT; y += 8) {
    display.fillRect(0, y, SCREEN_WIDTH, 8, SSD1306_BLACK);
    display.display();
    delay(8);
  }

// Header enters from left
  for (int x = -100; x <= 0; x += 10) {
    display.clearDisplay();

display.setTextSize(1);
    display.setCursor(30 + x, HEADER_TEXT_Y);
    display.print("I");

drawHeart(47 + x, 7, 2);

drawSpacedText(
      "INDIA",
      56 + x,
      HEADER_TEXT_Y,
      LETTER_GAP
    );

display.display();
    delay(12);
  }

delay(80);
}

// ============================================================
// OUTRO
// Same blue text size as every lyric.
// ============================================================

void outro() {
  animateTwoLines(
    "HAPPY",
    "INDEPENDENCE DAY",
    900
  );
}

// ============================================================
// FULL VIDEO
// ============================================================

void playVideo() {
  intro();

animateTwoLines("KHATRO SE", "HASKE", HOLD_DELAY);
  clearBlueTransition();

animateTwoLines("KHELNA", "ITNI TOH", HOLD_DELAY);
  clearBlueTransition();

animateTwoLines("HAMME", "HIMMAT HAI", HOLD_DELAY);
  clearBlueTransition();

animateTwoLines("MORE KALAI", "MAUT TAK", HOLD_DELAY);
  clearBlueTransition();

animateTwoLines("ITNI TOH", "HAMME", HOLD_DELAY);
  clearBlueTransition();

animateSingleLine("TAAQAT HAI", 350);
  clearBlueTransition();

outro();

display.clearDisplay();
  display.display();
  delay(250);
}

// ============================================================
// SETUP
// ============================================================

void setup() {
  Wire.begin(SDA_PIN, SCL_PIN);

if (!display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR)) {
    while (true);
  }

display.clearDisplay();
  display.display();
}

// ============================================================
// LOOP
// ============================================================

void loop() {
  playVideo();
}

Independence Day Tribute V1

Project Overview

The ESP32 OLED Independence Day Tribute teaches advanced techniques for creating animated patriotic displays using typewriter effects and cinematic transitions on small OLED screens.

This project celebrates India’s Independence Day with an animated tribute displayed on a 128×64 SSD1306 OLED featuring patriotic messages with smooth typewriter text animations. The sequence includes a fixed header with a pulsing heart, cinematic transitions between messages, and a special finale displaying the message “I ♥ INDIA”.

When you run the project, the OLED displays an engaging animation sequence beginning with a date reveal followed by carefully timed patriotic messages. Each line of text appears character by character with typewriter effects while smooth transitions and heart pulses create an emotional and visually engaging Independence Day celebration.

Key Features: I2C communication between ESP32 and OLED displays, typewriter-style text animation with character-by-character reveal, cinematic transitions with sliding wipes and effects, pulsing heart animation with dynamic scaling, fixed header with centered text rendering, multi-stage animation sequence with timing control, lightweight code optimized for microcontroller platforms, beginner-friendly structure with customizable patriotic messages.

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 : 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 Animation Timing Configuration

The setup function configures the I2C pins for OLED communication and initializes the SSD1306 display with proper addressing and communication settings. The project defines animation timing constants controlling the speed of typewriter effects, transition delays, and heart pulse animations.

Implement Typewriter Text Animation with Character Reveal

The animateTwoLines and animateSingleLine functions display text character by character creating a typewriter effect where each letter appears with a configurable delay. Text positioning is calculated once and remains centered throughout the animation ensuring consistent visual presentation.

Render Dynamic Heart Animation with Pulsing Effects

The drawHeart function creates a heart shape using filled circles and triangles while the pulseHeart function animates the heart scaling between sizes. The pulsing effect enhances emotional impact during patriotic message transitions and display sequences.

Create Cinematic Transitions with Clearing and Sliding Effects

The clearBlueTransition function progressively removes text from the display using horizontal wipes creating a cinematic clearing effect. The intro function implements sliding animations where the header enters from the left side creating dynamic visual transitions.

Manage Multi-Stage Animation Sequence with Timing Control

The playVideo function orchestrates the complete animation sequence calling individual animation functions in sequence with proper timing between stages. The loop function continuously replays the animation creating an engaging repeating display.

Expected Output

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

The OLED shows an animated date reveal followed by patriotic messages appearing with typewriter effects and a fixed header displaying the message “I ♥ INDIA”. Each message is accompanied by smooth transitions and heart pulses creating an emotionally engaging patriotic tribute.

The complete animation sequence cycles continuously throughout the ESP32 operation displaying multiple patriotic messages with consistent timing and visual polish. The cinematic transitions between messages create professional visual effects enhancing the celebration atmosphere.

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..

Text Appears But Animation Timing Looks Incorrect or Too Fast :- Verify the animation timing constants including LETTER_DELAY and LINE_DELAY define proper millisecond values for character reveal. Check that the delay functions are properly called between animation frames. Adjust timing constants to control animation speed and create desired visual effects.

Heart Animation Does Not Pulse or Appears Distorted on Display :- Confirm both Adafruit GFX and SSD1306 libraries are correctly installed in your Arduino IDE folder. Verify the drawHeart function parameters match the display resolution and coordinate system. Check that the pulseHeart function is being called with correct line parameters.

Display Shows Partial Text or Rendering Issues During Transitions :- Ensure all jumper wire connections are secure with no loose contacts interrupting data transmission between devices. Verify the clearDisplay and display functions are called at proper intervals to update the screen. Check that the I2C communication remains stable without timing violations during transitions.

What You Learned

By finishing this project, you understand how to create complex multi-stage animation sequences with typewriter effects and cinematic transitions on OLED displays. You have learned techniques for managing animation timing, implementing smooth transitions, and synchronizing multiple visual effects to create emotionally engaging patriotic presentations.

You can apply animation sequencing techniques to create commemorative displays and celebratory presentations on embedded systems. You have experienced how careful timing and visual effects enhance emotional impact and create memorable viewing experiences on resource-constrained microcontroller platforms.

WHAT'S NEXT?

Ready to Build More?

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

Project

ESP32

Independence Day Tribute V1

Instagram

Youtube

Wiring Schematic

Independence Day Tribute V1

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 Animation Timing Configuration

Implement Typewriter Text Animation with Character Reveal

Render Dynamic Heart Animation with Pulsing Effects

Create Cinematic Transitions with Clearing and Sliding Effects

Manage Multi-Stage Animation Sequence with Timing Control

Expected Output

Operational Troubleshooting

What You Learned

WHAT'S NEXT?

Ready to Build More?