Arduino LED Matrix — Smiley Face & Bouncing Dot!

After blinking Morse code, I wanted to do something even cooler with my Arduino UNO R4 WiFi.

This time I used the built-in LED matrix — a tiny 12×8 grid of LEDs right on the board itself! I made it show a smiley face and a bouncing dot. 😊

What is the LED matrix?

The Arduino UNO R4 WiFi has 96 tiny LEDs arranged in 12 columns and 8 rows. You can turn each one on or off individually to draw pictures, letters, and simple animations.

What you need

Arduino UNO R4 WiFi
USB cable

Still no breadboard, no wires, no extra components! 🎉

The code

/*
  Arduino UNO R4 WiFi LED Matrix Fun
  Displays a smiling face and a bouncing dot on the built-in 12x8 LED matrix.
  Uses the Arduino_LED_Matrix library.
*/

#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

// 8 rows x 12 columns
// Values: 0 = off, 255 = full brightness
uint8_t frame[8][12];

// Bouncing dot position
int dotX = 0;
int dotY = 0;
int dirX = 1;
int dirY = 1;

void setup() {
  Serial.begin(9600);
  matrix.begin();
  Serial.println("LED Matrix Fun started!");
}

void loop() {
  // Show smiley face for 2 seconds
  drawSmiley();
  matrix.loadPixels(&frame[0][0], 8 * 12);
  delay(2000);

  // Show bouncing dot for 3 seconds
  unsigned long start = millis();
  while (millis() - start < 3000) {
    drawBouncingDot();
    matrix.loadPixels(&frame[0][0], 8 * 12);
    delay(80);
  }
}

void clearFrame() {
  for (int y = 0; y < 8; y++) {
    for (int x = 0; x < 12; x++) {
      frame[y][x] = 0;
    }
  }
}

void setPixel(int x, int y, uint8_t brightness) {
  frame[y][x] = brightness;
}

void drawSmiley() {
  clearFrame();
  // Eyes
  setPixel(2, 1, 255); setPixel(3, 1, 255);
  setPixel(8, 1, 255); setPixel(9, 1, 255);
  setPixel(2, 2, 255); setPixel(3, 2, 255);
  setPixel(8, 2, 255); setPixel(9, 2, 255);

  // Cheeks
  setPixel(1, 4, 255); setPixel(10, 4, 255);
  setPixel(1, 5, 255); setPixel(10, 5, 255);

  // Smile
  setPixel(2, 6, 255); setPixel(3, 6, 255);
  setPixel(4, 6, 255); setPixel(5, 6, 255);
  setPixel(6, 6, 255); setPixel(7, 6, 255);
  setPixel(8, 6, 255); setPixel(9, 6, 255);
}

void drawBouncingDot() {
  clearFrame();
  setPixel(dotX, dotY, 255);

  dotX += dirX;
  dotY += dirY;

  if (dotX <= 0 || dotX >= 11) dirX = -dirX;
  if (dotY <= 0 || dotY >= 7) dirY = -dirY;
}

How I uploaded it

Same Arduino CLI commands:

arduino-cli board list
arduino-cli compile --fqbn arduino:renesas_uno:unor4wifi MatrixLED
arduino-cli upload -p /dev/cu.usbmodem9888E00970202 --fqbn arduino:renesas_uno:unor4wifi MatrixLED

How it works

matrix.begin() starts the LED matrix.
matrix.loadPixels(&frame[0][0], 8 * 12) sends the picture to the matrix.
setPixel(x, y, 255) turns one LED on at position (x, y).
clearFrame() turns all LEDs off before drawing the next frame.

Try changing it!

Change the smiley face into a sad face or heart
Add more dots bouncing around
Make the dot leave a trail
Draw your initials

What’s next?

Next I want to make a scrolling message like “HELLO” move across the matrix. Then maybe a tiny game where I catch the bouncing dot!

See my earlier posts: