In this lesson we create one of the most beautiful and satisfying NeoPixel effects — a smooth, continuous, running rainbow on a 12-LED ring. We affectionately have named this pattern the “Runbow”. This is the “ultimate” version because it is both visually stunning and highly educational, as we explore two fundamentally different programming approaches the Runbow.

The first method is the most intuitive: we place a fixed rainbow across the ring (each LED gets a different hue equally spaced around the color wheel) and then simply rotate the entire pattern one position at a time. This approach is easy to understand because it mimics physically moving a colorful wheel. We save the color of the first pixel, shift all the other pixels one place, and then place the saved color at the end. It feels like a conveyor belt of color circling around the ring.

The second method is more elegant and mathematically pure. Instead of storing and shifting colors, we recalculate the color of every LED on every frame using a moving offset. For each LED we compute its hue as (i / LED_COUNT + offset) % 1.0, where i is the LED’s position and offset is a value that slowly increases over time. This creates a perfectly smooth rainbow that flows around the ring without ever shifting raw RGB values. Because we regenerate the pattern fresh each cycle, there is no risk of color corruption or accumulated errors.

Both techniques produce a gorgeous running rainbow, but they teach very different programming mindsets. The first method helps you deeply understand array manipulation and data movement. The second method introduces the powerful concept of using mathematics and offsets to create motion — a technique used frequently in advanced LED animations, games, and visual effects. In the end, the offset method tends to look smoother and is easier to extend with additional effects (such as brightness pulsing), but both approaches are valuable skills for any embedded AI or IoT developer working with addressable LEDs.You can adjust the speed of the rainbow by changing how much you increment the offset each loop or by modifying the delay. Once you master these two methods, you will be able to create almost any animated pattern you can imagine on your NeoPixel ring. Lets get this party started!

Here is the code we developed in this video:

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import time
import board
import neopixel_spi as neopixel
import colorsys
spi = board.SPI()
LC = 12
PO = neopixel.GRB
strip = neopixel.NeoPixel_SPI(spi,
            LC,pixel_order=PO,
            auto_write=False)
strip.fill(0)
strip.show()
def hsv2rgb(h):
    r, g, b = colorsys.hsv_to_rgb(h,1,1)
    return ( int(255*r), int(255*g),int(255*b))
ts=1
ts2=.1
ts3=.05
try:
    for i in range(12):
        hue = i/12
        color = hsv2rgb(hue)
        strip[i] = color
    strip.show()
    time.sleep(ts)
    for lap in range(70):
        startColor = strip[0]
        for i in range(11):
            strip[i]= strip[i+1]
        strip[11] = startColor
        time.sleep(ts2)
        strip.show()
    offset = 0
    while True:
        for i in range(12):
            hue = (i/12 + offset)%1
            strip[i] = hsv2rgb(hue)
        strip.show()
        offset = (offset + 1/100)%1
        time.sleep(ts3)
    
except KeyboardInterrupt:
    strip.fill(0)
    strip.show()
    print("That's All Folks!")

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import time

import board

import neopixel_spi as neopixel

import colorsys

spi = board.SPI()

LC = 12

PO = neopixel.GRB

strip = neopixel.NeoPixel_SPI(spi,

LC,pixel_order=PO,

auto_write=False)

strip.fill(0)

strip.show()

def hsv2rgb(h):

r, g, b = colorsys.hsv_to_rgb(h,1,1)

return ( int(255*r), int(255*g),int(255*b))

ts=1

ts2=.1

ts3=.05

try:

for i in range(12):

hue = i/12

color = hsv2rgb(hue)

strip[i] = color

strip.show()

time.sleep(ts)

for lap in range(70):

startColor = strip[0]

for i in range(11):

strip[i]= strip[i+1]

strip[11] = startColor

time.sleep(ts2)

strip.show()

offset = 0

while True:

for i in range(12):

hue = (i/12 + offset)%1

strip[i] = hsv2rgb(hue)

strip.show()

offset = (offset + 1/100)%1

time.sleep(ts3)

except KeyboardInterrupt:

strip.fill(0)

strip.show()

print("That's All Folks!")

This is the schematic we are using to connect the NeoPixel ring:

AI On the Edge, Raspberry Pi

AI on the Edge LESSON 45: Adding a NeoPixel Ring To Your Raspberry Pi Project

August 26, 2026 admin

In Lesson 45 of our AI on the Edge series, we take our Fusion AI Lab Kit to the next level by adding a 12-pixel NeoPixel ring. This lesson bridges the gap between pure AI processing and vibrant physical output, showing how your edge AI projects can communicate visually with the real world in a beautiful and engaging way.

We begin by setting up the NeoPixel ring using the SPI interface on the SunFounder Fusion Hat. After importing the necessary libraries (time, board, neopixel_spi, colorsys, and math), we create a simple and reusable hsv2rgb() function that converts Hue values (0.0 to 1.0) into RGB colors that the NeoPixels can understand. This function becomes the foundation for smooth rainbow effects later in the lesson.The lesson starts with basic pixel control. We manually light up each of the 12 pixels one at a time using different colors (red, green, blue, cyan, magenta, yellow, etc.). This slow, deliberate approach lets you clearly see how individual pixel addressing works and helps students understand the coordinate system of the ring.Next, we explore full-ring control by making the entire ring blink between bright red and blue. We then move into motion with a running green pixel moving across a red background — a great introduction to animation techniques. This is followed by a more advanced chasing effect where a blue pixel chases a green pixel around a dim red background.One of the highlights of this lesson is the gentle pulsating aqua effect. Using a sine wave (math.sin), we create a smooth breathing/pulsing animation where the brightness of the color rises and falls naturally. This technique produces a very professional and visually pleasing result that students can easily adapt for future projects.

Finally, we create a rainbow effect. First, we display a uniform rainbow where all 12 pixels show the same color that cycles smoothly through the entire spectrum.

We finish the lesson by assigning the homework. The homework is for you to create the classic running rainbow (what I like to call a “Runbow”), where the colors flow continuously around the ring — one of the most popular and impressive NeoPixel animations.

This lesson reinforces important programming concepts including loops, functions, color theory (HSV vs RGB), timing control, and animation techniques, while giving students an exciting visual payoff. The skills learned here open the door to creating stunning visual feedback for future AI projects — whether it’s status indicators, emotional displays, or attention-grabbing outputs from your edge AI models.

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import time
import board
import neopixel_spi as neopixel
import colorsys
import math

def hsv2rgb(h):
    r, g, b = colorsys.hsv_to_rgb(h, 1, 1)
    return (int(r*255),int(g*255),int(b*255))

spi = board.SPI()
LED_COUNT = 12
PO = neopixel.GRB
strip = neopixel.NeoPixel_SPI(spi,
        LED_COUNT,pixel_order=PO,
        auto_write = False)
strip.fill(0)
strip.show()

strip[0] = (255,0,0)
strip.show()
ts=.1
time.sleep(ts)

strip[1] = (0,255,0)
strip.show()
time.sleep(ts)

strip[2] = (0,0,255)
strip.show()
time.sleep(.1)

strip[3] = (0,255,255)
strip.show()
time.sleep(ts)

strip[4] = (255,0,255)
strip.show()
time.sleep(.1)

strip[5] = (255,255,0)
strip.show()
time.sleep(.1)

strip[6] = (255,100,0)
strip.show()
time.sleep(ts)

strip[7] = (128,0,255)
strip.show()
time.sleep(.1)

strip[8] = (0,255,128)
strip.show()
time.sleep(.1)

strip[9] = (255,0,128)
strip.show()
time.sleep(ts)

strip[10] = (128,255,0)
strip.show()
time.sleep(ts)

strip[11] = (0,128,255)
strip.show()
time.sleep(.1)
ts2=5
for i in range(5):
    strip.fill((255,0,0))
    strip.show()

    time.sleep(ts2)
    
    strip.fill((0,0,255))
    strip.show()
    time.sleep(ts2)
    
strip.fill((255,0,0))
strip.show()
ts3=1
time.sleep(ts3)
ts4=.3
for lap in range(3):
    for i in range(12):
        strip[i] = (0,255,0)
        strip.show()
        time.sleep(ts4)
        strip[i] = (255,0,0)

strip.fill((40,0,0))
strip.show()
time.sleep(ts3)

for lap in range(4):
    for i in range(12):
        greenPos = i
        bluePos = (i + 6)%12
        
        strip[greenPos] = (0,255,0)
        strip[bluePos] = (0,0,255)
        strip.show()
        time.sleep(ts4)
        
        strip[greenPos] = (40,0,0)
        strip[bluePos] = (40,0,0)
        
for laps in range(6):
    for step in range(360):
        brightness= (math.sin(step*3.1415/180)+1)/2
        r = 0
        g = int(255*brightness)
        b = int(50*brightness)
        strip.fill((r,g,b))
        strip.show()
        time.sleep(.005)
        
for laps in range(5):
    for step in range(100):
        hue = step/100
        color = hsv2rgb(hue)
        strip.fill(color)
        strip.show()
        time.sleep(ts)


strip.fill(0)
strip.show()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import time

import board

import neopixel_spi as neopixel

import colorsys

import math

def hsv2rgb(h):

r, g, b = colorsys.hsv_to_rgb(h, 1, 1)

return (int(r*255),int(g*255),int(b*255))

spi = board.SPI()

LED_COUNT = 12

PO = neopixel.GRB

strip = neopixel.NeoPixel_SPI(spi,

LED_COUNT,pixel_order=PO,

auto_write = False)

strip.fill(0)

strip.show()

strip[0] = (255,0,0)

strip.show()

ts=.1

time.sleep(ts)

strip[1] = (0,255,0)

strip.show()

time.sleep(ts)

strip[2] = (0,0,255)

strip.show()

time.sleep(.1)

strip[3] = (0,255,255)

strip.show()

time.sleep(ts)

strip[4] = (255,0,255)

strip.show()

time.sleep(.1)

strip[5] = (255,255,0)

strip.show()

time.sleep(.1)

strip[6] = (255,100,0)

strip.show()

time.sleep(ts)

strip[7] = (128,0,255)

strip.show()

time.sleep(.1)

strip[8] = (0,255,128)

strip.show()

time.sleep(.1)

strip[9] = (255,0,128)

strip.show()

time.sleep(ts)

strip[10] = (128,255,0)

strip.show()

time.sleep(ts)

strip[11] = (0,128,255)

strip.show()

time.sleep(.1)

ts2=5

for i in range(5):

strip.fill((255,0,0))

strip.show()

time.sleep(ts2)

strip.fill((0,0,255))

strip.show()

time.sleep(ts2)

strip.fill((255,0,0))

strip.show()

ts3=1

time.sleep(ts3)

ts4=.3

for lap in range(3):

for i in range(12):

strip[i] = (0,255,0)

strip.show()

time.sleep(ts4)

strip[i] = (255,0,0)

strip.fill((40,0,0))

strip.show()

time.sleep(ts3)

for lap in range(4):

for i in range(12):

greenPos = i

bluePos = (i + 6)%12

strip[greenPos] = (0,255,0)

strip[bluePos] = (0,0,255)

strip.show()

time.sleep(ts4)

strip[greenPos] = (40,0,0)

strip[bluePos] = (40,0,0)

for laps in range(6):

for step in range(360):

brightness= (math.sin(step*3.1415/180)+1)/2

r = 0

g = int(255*brightness)

b = int(50*brightness)

strip.fill((r,g,b))

strip.show()

time.sleep(.005)

for laps in range(5):

for step in range(100):

hue = step/100

color = hsv2rgb(hue)

strip.fill(color)

strip.show()

time.sleep(ts)

strip.fill(0)

strip.show()

In this class we are using this as our standard components. You should already have the core circuit built and should already have the OLED connected. Today you will add the NeoPixel array.

Our core circuit is:

Fusion Hat Circuit Diagram — This is the circuit we will use moving forward in the class

Last week we also added the SSD1306 OLED Display.

And finally today we add the NeoPixel ring from the Fusion AI Lab Kit.

AI On the Edge, Raspberry Pi

AI on the Edge LESSON 44: Displaying Live MediaPipe FaceMesh Avatar on SSD1306 OLED in OpenCV

August 23, 2026 admin

This is Getting Crazy Cool!

Hey guys, welcome back to the Fusion AI Lab series, AI on the Edge! In Lesson 44 we just took things up another notch. We’re now running MediaPipe Face Mesh on our Raspberry Pi 5, pulling all 468 facial landmarks in real time, and then drawing a clean, smooth face contour directly onto a tiny 128×64 OLED display!

That’s right — your face is now living on that little monochrome OLED in real time! Every eyebrow raise, smile, head tilt, and eye movement gets faithfully reproduced on the display. We’re pulling the camera feed with picamera2, processing it with MediaPipe’s powerful face mesh, scaling the landmarks down to OLED resolution, and then drawing the official FACEMESH_CONTOURS connections using PIL. The result is surprisingly smooth and fun to watch! This project really shows the power of combining modern AI vision tools with simple embedded hardware. Watching your own face rendered in real time on a tiny OLED is just plain awesome — it feels like sci-fi stuff from just a few years ago, and now we’re doing it on the Edge with our Fusion AI Lab kit!

If you’ve been following along, you’re starting to see how powerful these tools are becoming. We’re no longer just detecting faces — we’re understanding the structure of the face and visualizing it however we want. And we’re just getting started!

So fire up your Raspberry Pi, grab that OLED, and let’s keep pushing the limits. You’re doing some seriously cool stuff!

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import cv2
import time
from picamera2 import Picamera2
import mediapipe as mp
import numpy as np
#################################
import board
import adafruit_ssd1306
from PIL import Image, ImageDraw, ImageFont
import time

wOLED = 128
hOLED = 64
I2C_ADDRESS = 0x3C
i2c = board.I2C()
oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)

#################################
W=1280
H=720
tStart = time.time()
fps = 0

piCam = Picamera2(1)
piCam.preview_configuration.main.size = (W, H)
piCam.preview_configuration.main.format = "RGB888"
piCam.preview_configuration.controls.FrameRate = 60
piCam.preview_configuration.align()
piCam.configure("preview")
piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))
fontFace = cv2.FONT_HERSHEY_SIMPLEX
fontThickness = int(W/425)
fontScale = H*.0015
fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(
    
    max_num_faces=1,
    refine_landmarks=True,
    min_detection_confidence=0.5,
    min_tracking_confidence=0.5)

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)
cv2.moveWindow('Camera',0,65)
cv2.resizeWindow('Camera',W,H)
while True:
    deltaT = time.time() - tStart
    tStart=time.time()
    fps = fps*.95 + (1/deltaT)*.05
    frame = piCam.capture_array()
    frame = cv2.flip(frame, -1)

    rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    results = faceMesh.process(rgb)
    
    if results.multi_face_landmarks:
        for faceLandMarks in results.multi_face_landmarks:
            #print(faceLandmarks)
            image = Image.new("1",(wOLED,hOLED))
            draw = ImageDraw.Draw(image)
            lmAll = []
            for lm in faceLandMarks.landmark:
                xOLED = int(lm.x*wOLED)
                yOLED = int(lm.y*hOLED)
                draw.point((xOLED,yOLED), fill = 255)
                #print(xOLED,yOLED)
                lmAll.append((xOLED,yOLED))
            for idx in mp.solutions.face_mesh.FACEMESH_CONTOURS:
                #print(idx)
                lineStart = idx[0]
                lineEnd = idx[1]
                pt1 = lmAll[lineStart]
                pt2 = lmAll[lineEnd]
                draw.line((pt1[0],pt1[1],pt2[0],pt2[1]), width=1, fill = 255)


            #print('XXXXXXXXXXXXXXXXXXx')
            oled.image(image)
            oled.show()
        #print()

#     if results.multi_face_landmarks:
#         for faceLandmarks in results.multi_face_landmarks:
#             # Optional second pass for glow effect
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,
#                 landmark_drawing_spec=None,
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(100, 100, 100),
#                     thickness=1
#                 )
#             )
#             # === Best looking translucent mesh ===
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,
#                 landmark_drawing_spec=None,                    # Hide dots
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(0, 0, 180),      # Bright cyan/teal
#                     thickness=7
#                 )
#             )
# 
#             # Optional: Extra detail on irises (makes eyes look better)
#             mp.solutions.drawing_utils.draw_landmarks(
#                 image=frame,
#                 landmark_list=faceLandmarks,
#                 connections=mp.solutions.face_mesh.FACEMESH_IRISES,
#                 landmark_drawing_spec=None,
#                 connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
#                     color=(255, 0, 0),
#                     thickness=7
#                 )
#             )

    myText = "FPS: "+str(round(fps,1))
    cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

    cv2.imshow("Camera", frame)

    if cv2.waitKey(1) == ord('q'):
        break

cv2.destroyAllWindows()
piCam.stop()
oled.fill(0)
oled.show()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import cv2

import time

from picamera2 import Picamera2

import mediapipe as mp

import numpy as np

#################################

import board

import adafruit_ssd1306

from PIL import Image, ImageDraw, ImageFont

import time

wOLED = 128

hOLED = 64

I2C_ADDRESS = 0x3C

i2c = board.I2C()

oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)

#################################

W=1280

H=720

tStart = time.time()

fps = 0

piCam = Picamera2(1)

piCam.preview_configuration.main.size = (W, H)

piCam.preview_configuration.main.format = "RGB888"

piCam.preview_configuration.controls.FrameRate = 60

piCam.preview_configuration.align()

piCam.configure("preview")

piCam.start()

textLowerLeft = (int(W*.01),int(H*.05))

fontFace = cv2.FONT_HERSHEY_SIMPLEX

fontThickness = int(W/425)

fontScale = H*.0015

fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(

max_num_faces=1,

refine_landmarks=True,

min_detection_confidence=0.5,

min_tracking_confidence=0.5)

cv2.namedWindow('Camera',cv2.WINDOW_GUI_NORMAL)

cv2.moveWindow('Camera',0,65)

cv2.resizeWindow('Camera',W,H)

while True:

deltaT = time.time() - tStart

tStart=time.time()

fps = fps*.95 + (1/deltaT)*.05

frame = piCam.capture_array()

frame = cv2.flip(frame, -1)

rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

results = faceMesh.process(rgb)

if results.multi_face_landmarks:

for faceLandMarks in results.multi_face_landmarks:

#print(faceLandmarks)

image = Image.new("1",(wOLED,hOLED))

draw = ImageDraw.Draw(image)

lmAll = []

for lm in faceLandMarks.landmark:

xOLED = int(lm.x*wOLED)

yOLED = int(lm.y*hOLED)

draw.point((xOLED,yOLED), fill = 255)

#print(xOLED,yOLED)

lmAll.append((xOLED,yOLED))

for idx in mp.solutions.face_mesh.FACEMESH_CONTOURS:

#print(idx)

lineStart = idx[0]

lineEnd = idx[1]

pt1 = lmAll[lineStart]

pt2 = lmAll[lineEnd]

draw.line((pt1[0],pt1[1],pt2[0],pt2[1]), width=1, fill = 255)

#print('XXXXXXXXXXXXXXXXXXx')

oled.image(image)

oled.show()

#print()

# if results.multi_face_landmarks:

# for faceLandmarks in results.multi_face_landmarks:

# # Optional second pass for glow effect

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,

# landmark_drawing_spec=None,

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(100, 100, 100),

# thickness=1

# )

# # === Best looking translucent mesh ===

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,

# landmark_drawing_spec=None, # Hide dots

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(0, 0, 180), # Bright cyan/teal

# thickness=7

# )

# # Optional: Extra detail on irises (makes eyes look better)

# mp.solutions.drawing_utils.draw_landmarks(

# image=frame,

# landmark_list=faceLandmarks,

# connections=mp.solutions.face_mesh.FACEMESH_IRISES,

# landmark_drawing_spec=None,

# connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

# color=(255, 0, 0),

# thickness=7

# )

myText = "FPS: "+str(round(fps,1))

cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

cv2.imshow("Camera", frame)

if cv2.waitKey(1) == ord('q'):

break

cv2.destroyAllWindows()

piCam.stop()

oled.fill(0)

oled.show()

In this lesson we are still using our standard Fusion AI Lab Kit cirtuit from the earlier lessons:

We have also connected the OLED to the above circuit according to this diagram:

AI On the Edge

AI on the Edge LESSON 43: Adding SSD1306 OLED to Your Raspberry Pi Projects

August 19, 2026 admin

In today’s lesson in the AI on the Edge series, we’re adding a very important piece to our growing collection of skills — learning how to use the SSD1306 OLED display with the SunFounder Fusion AI Lab kit.

One of the key goals of this class is to build intelligent systems that can run completely on the edge — without needing to rely on the cloud. A big part of that is giving our edge devices the ability to communicate clearly with us. That’s exactly where the little SSD1306 OLED really shines. Whether you’re building a smart robot, an autonomous sensor node, or an AI-powered monitoring system, having a crisp, low-power display to show status, results, or even fun animations makes your project feel complete and professional.

In this video, we start with the basics and gradually build up. You’ll learn how to connect the OLED using I2C, initialize it with CircuitPython, and then use the PIL library to create images in memory before sending them to the screen. We explore loading different font sizes so you can create nice, readable layouts. Then we move into drawing shapes — rectangles, circles, and borders — before finishing with a fun bouncing ball animation that brings the whole thing to life.

This lesson is particularly important in our AI on the Edge journey because the SSD1306 is extremely lightweight and uses almost no processing power, making it perfect for running alongside face detection, object tracking, speech recognition, and other AI tasks without slowing down your Raspberry Pi. You’ll see how easy it is to display messages like detection results, confidence scores, system status, or even playful personality messages from your AI creations.

By the end of this lesson, you’ll have the confidence to add a real display to any project in this class. Whether you want to show live face tracking data, sensor readings, or just give your robot a fun way to “talk” to the world, the skills you learn here will be used again and again in future projects.

So if you’re following along with the AI on the Edge series, this is another big step forward. Grab your Fusion AI Hat, open up Thonny, and let’s get that OLED screen lighting up with some personality!

As always, I strongly encourage you to take the code and make it your own. Change the messages, create new animations, and think about how you can use this display in your own AI projects. That’s where the real learning and creativity happens

So far in this class we have been using this schematic:

In this lesson, we will be adding the SSD1306 OLED display. Keep the schatic above, but now add the OLED display to the breadboard. It should be connected to the Fusion Hat as follows:

Connect the VCC pin of OLED display to 3.3V on Fusion HAT+
Connect the GND pin of OLED display to GND on Fusion HAT+
Connect the SCL pin of OLED display to SCL (GPIO 3) on Fusion HAT+
Connect the SDA pin of OLED display to SDA (GPIO 2) on Fusion HAT+

While we are updating our project components, go ahead and connect the neoPixel ring to yout Fusion Hat. Here is the schematic to add the neopixel ring, and we will be using it in future lessons.

In the video, we developed the following code to show you how to put the SSD1306 OLED through its paces using the Fusion AI Hat on the Raspberry Pi 5.

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import board
import adafruit_ssd1306
from PIL import Image, ImageDraw, ImageFont
import time

W =128
H = 64
I2C_ADDRESS = 0x3C

i2c = board.I2C()
oled = adafruit_ssd1306.SSD1306_I2C(W, H, i2c, addr=I2C_ADDRESS)

fontLarge = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",14)
fontMedium = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",10)
fontSmall = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",8)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.point((int(W/2),int(H/2)), fill =255)
oled.image(image)
oled.show()
ts=1
time.sleep(ts)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.text( (0,0), "TopTechBoy.com",font=fontLarge, fill=255)
draw.text( (0,16), "SSD1306 OLED",font=fontMedium, fill=255)
draw.text( (0,26), "Fusion AI Hat",font=fontMedium, fill=255)
draw.text( (0,36), "Hello Makers",font=fontMedium, fill=255)
draw.text( (0,46), "Enjoy!",font=fontSmall, fill=255)
oled.image(image)
oled.show()
time.sleep(ts)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.rectangle((int(.1*W),int(.1*H),int(.9*W),int(.9*H)),
               width=5, outline=255, fill=0)
draw.text((int(W/4),int(H/2.5)),
          "Hello World",font=fontMedium, fill=255)

oled.image(image)
oled.show()
time.sleep(ts)

image = Image.new("1", (W,H))
draw = ImageDraw.Draw(image)
draw.rectangle((int(.1*W),int(.1*H),int(.45*W),int(.45*H)),width=1, outline=255, fill=0)
draw.rectangle((int(.55*W),int(.1*H),int(.9*W),int(.45*H)),width=1, outline=255, fill=255)
d=25
draw.ellipse((int(.1*W),int(.55*H),int(.1*W)+d,int(.55*H)+d),width=1, outline=255, fill=0)
draw.ellipse((int(.55*W),int(.55*H),int(.55*W)+d,int(.55*H)+d),width=1, outline=255, fill=255)
oled.image(image)
oled.show()
time.sleep(ts)

xCenter=40
yCenter=25
radius=7

dx = 1
dy = 1

for frame in range(500):
    image = Image.new("1", (W,H))
    draw = ImageDraw.Draw(image)
    draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0) 
    draw.ellipse((xCenter-radius,yCenter-radius,xCenter+radius,yCenter+radius), width=1,outline=255,fill=255)
    #draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0)    
    oled.image(image)
    oled.show()
    
    xCenter = xCenter + dx
    yCenter = yCenter + dy

    if xCenter <= radius or xCenter >= W-1-radius:
        dx = -dx
    if yCenter <= radius or yCenter >= H-1-radius:
        dy = -dy

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import board

import adafruit_ssd1306

from PIL import Image, ImageDraw, ImageFont

import time

W =128

H = 64

I2C_ADDRESS = 0x3C

i2c = board.I2C()

oled = adafruit_ssd1306.SSD1306_I2C(W, H, i2c, addr=I2C_ADDRESS)

fontLarge = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",14)

fontMedium = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",10)

fontSmall = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",8)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.point((int(W/2),int(H/2)), fill =255)

oled.image(image)

oled.show()

ts=1

time.sleep(ts)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.text( (0,0), "TopTechBoy.com",font=fontLarge, fill=255)

draw.text( (0,16), "SSD1306 OLED",font=fontMedium, fill=255)

draw.text( (0,26), "Fusion AI Hat",font=fontMedium, fill=255)

draw.text( (0,36), "Hello Makers",font=fontMedium, fill=255)

draw.text( (0,46), "Enjoy!",font=fontSmall, fill=255)

oled.image(image)

oled.show()

time.sleep(ts)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.rectangle((int(.1*W),int(.1*H),int(.9*W),int(.9*H)),

width=5, outline=255, fill=0)

draw.text((int(W/4),int(H/2.5)),

"Hello World",font=fontMedium, fill=255)

oled.image(image)

oled.show()

time.sleep(ts)

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.rectangle((int(.1*W),int(.1*H),int(.45*W),int(.45*H)),width=1, outline=255, fill=0)

draw.rectangle((int(.55*W),int(.1*H),int(.9*W),int(.45*H)),width=1, outline=255, fill=255)

d=25

draw.ellipse((int(.1*W),int(.55*H),int(.1*W)+d,int(.55*H)+d),width=1, outline=255, fill=0)

draw.ellipse((int(.55*W),int(.55*H),int(.55*W)+d,int(.55*H)+d),width=1, outline=255, fill=255)

oled.image(image)

oled.show()

time.sleep(ts)

xCenter=40

yCenter=25

radius=7

dx = 1

dy = 1

for frame in range(500):

image = Image.new("1", (W,H))

draw = ImageDraw.Draw(image)

draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0)

draw.ellipse((xCenter-radius,yCenter-radius,xCenter+radius,yCenter+radius), width=1,outline=255,fill=255)

#draw.rectangle((0,0,W-1,H-1), width=1, outline = 255, fill=0)

oled.image(image)

oled.show()

xCenter = xCenter + dx

yCenter = yCenter + dy

if xCenter <= radius or xCenter >= W-1-radius:

dx = -dx

if yCenter <= radius or yCenter >= H-1-radius:

dy = -dy

AI On the Edge, Raspberry Pi

AI on the Edge LESSON 42: Create Composite Images Using Masks in OpenCV and MediaPipe

August 16, 2026 admin

In this exciting project, we combine a Raspberry Pi 5, the Fusion AI Lab Kit, a Pi Camera, and a remote IP camera to generate a stunning real-time composite video. Watch as a glowing, translucent MediaPipe face mesh of my face hovers magically over live video of the Mighty River Nice scenery captured by an IP camera. The effect looks futuristic and professional — perfect for creative video effects, interactive installations, or just blowing your mind with computer vision! Using Picamera2 for high-frame-rate local capture and OpenCV with an RTSP stream from the river camera, we process everything in real time. MediaPipe’s Face Mesh detects and tracks facial landmarks, which we draw as beautiful cyan/teal contours with glowing irises. Then we create a clean mask, separate the mesh foreground from the river background, and blend them seamlessly into one composite frame. You’ll see every debugging layer live on screen too — meshLayer, mask, inverted mask, riverBG, and meshFG — so you can understand exactly how the magic happens.This tutorial is beginner-to-intermediate friendly and packed with practical OpenCV + MediaPipe techniques you can adapt for your own augmented reality projects. Whether you’re a longtime follower of the Paul McWhorter channel or new to the Fusion AI Kit, you’ll walk away inspired and ready to build your own hovering effects, overlays, or interactive displays.Grab the full code from the video description, fire up your Pi 5, and start creating jaw-dropping computer vision projects today. Drop a comment and let me know what you’d like to overlay next — another face mesh, hand tracking, or something completely different? Let’s keep pushing the limits of what we can do with affordable AI hardware!

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================
 
import cv2
import time
from picamera2 import Picamera2
import mediapipe as mp
import numpy as np
import secret
W=1280
H=720
tStart = time.time()
fps = 0

piCam = Picamera2(1)
piCam.preview_configuration.main.size = (W, H)
piCam.preview_configuration.main.format = "RGB888"
piCam.preview_configuration.controls.FrameRate = 60
piCam.preview_configuration.align()
piCam.configure("preview")
piCam.start()

cam = cv2.VideoCapture(secret.RTSP1,cv2.CAP_FFMPEG)
cam.set(cv2.CAP_PROP_BUFFERSIZE,0)
cam.set(cv2.CAP_PROP_POS_FRAMES,0)

textLowerLeft = (int(W*.01),int(H*.05))
fontFace = cv2.FONT_HERSHEY_SIMPLEX
fontThickness = int(W/425)
fontScale = H*.0015
fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(
    
    max_num_faces=1,
    refine_landmarks=True,
    min_detection_confidence=0.5,
    min_tracking_confidence=0.5)

cv2.namedWindow('Composite',cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow('Composite',W,H)
cv2.moveWindow('Composite',0,65)

cv2.namedWindow('meshLayer',cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow('meshLayer',320,180)
cv2.moveWindow('meshLayer',0,H+65)

cv2.namedWindow('grayLayer',cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow('grayLayer',320,180)
cv2.moveWindow('grayLayer',320,H+65)

cv2.namedWindow('maskLayer',cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow('maskLayer',320,180)
cv2.moveWindow('maskLayer',320*2,H+65)

cv2.namedWindow('invLayer',cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow('invLayer',320,180)
cv2.moveWindow('invLayer',320*3,H+65)

cv2.namedWindow('riverBG',cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow('riverBG',320,180)
cv2.moveWindow('riverBG',W,65)

cv2.namedWindow('meshFG',cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow('meshFG',320,180)
cv2.moveWindow('meshFG',W,180+65+20)
while True:
    deltaT = time.time() - tStart
    tStart=time.time()
    fps = fps*.95 + (1/deltaT)*.05
    frame = piCam.capture_array()
    frame = cv2.flip(frame, -1)
    
    _, river = cam.read()
    river = cv2.resize(river,(W,H))
    meshLayer = frame.copy()
    meshLayer[0:H-1,0:W-1] = [255,255,255]
    rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    results = faceMesh.process(rgb)

    if results.multi_face_landmarks:
        for faceLandmarks in results.multi_face_landmarks:
            # Optional second pass for glow effect
            mp.solutions.drawing_utils.draw_landmarks(
                image=meshLayer,
                landmark_list=faceLandmarks,
                connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,
                landmark_drawing_spec=None,
                connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
                    color=(0, 150, 200),
                    thickness=2
                )
            )
            # === Best looking translucent mesh ===
            mp.solutions.drawing_utils.draw_landmarks(
                image=meshLayer,
                landmark_list=faceLandmarks,
                connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,
                landmark_drawing_spec=None,                    # Hide dots
                connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
                    color=(0, 0, 180),      # Bright cyan/teal
                    thickness=7
                )
            )

            # Optional: Extra detail on irises (makes eyes look better)
            mp.solutions.drawing_utils.draw_landmarks(
                image=meshLayer,
                landmark_list=faceLandmarks,
                connections=mp.solutions.face_mesh.FACEMESH_IRISES,
                landmark_drawing_spec=None,
                connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(
                    color=(255, 0, 0),
                    thickness=7
                )
            )
    gray = cv2.cvtColor(meshLayer,cv2.COLOR_BGR2GRAY)

    _ , mask =cv2.threshold(gray, 250, 255, cv2.THRESH_BINARY)
    invLayer = cv2.bitwise_not(mask)
    riverBG =cv2.bitwise_and(river, river, mask = mask)
    meshFG = cv2.bitwise_and(meshLayer,meshLayer, mask=invLayer)
    composite = cv2.add(riverBG,meshFG)
    
    myText = "FPS: "+str(round(fps,1))
    cv2.putText(composite,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

    cv2.imshow("Composite", composite)
    cv2.imshow("meshLayer",meshLayer)
    cv2.imshow("grayLayer",gray)
    cv2.imshow("maskLayer",mask)
    cv2.imshow("invLayer",invLayer)
    cv2.imshow("riverBG",riverBG)
    cv2.imshow("meshFG",meshFG)
    if cv2.waitKey(1) == ord('q'):
        break

cv2.destroyAllWindows()
piCam.stop()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

import cv2

import time

from picamera2 import Picamera2

import mediapipe as mp

import numpy as np

import secret

W=1280

H=720

tStart = time.time()

fps = 0

piCam = Picamera2(1)

piCam.preview_configuration.main.size = (W, H)

piCam.preview_configuration.main.format = "RGB888"

piCam.preview_configuration.controls.FrameRate = 60

piCam.preview_configuration.align()

piCam.configure("preview")

piCam.start()

cam = cv2.VideoCapture(secret.RTSP1,cv2.CAP_FFMPEG)

cam.set(cv2.CAP_PROP_BUFFERSIZE,0)

cam.set(cv2.CAP_PROP_POS_FRAMES,0)

textLowerLeft = (int(W*.01),int(H*.05))

fontFace = cv2.FONT_HERSHEY_SIMPLEX

fontThickness = int(W/425)

fontScale = H*.0015

fontColor = (0,0,255)

faceMesh = mp.solutions.face_mesh.FaceMesh(

max_num_faces=1,

refine_landmarks=True,

min_detection_confidence=0.5,

min_tracking_confidence=0.5)

cv2.namedWindow('Composite',cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow('Composite',W,H)

cv2.moveWindow('Composite',0,65)

cv2.namedWindow('meshLayer',cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow('meshLayer',320,180)

cv2.moveWindow('meshLayer',0,H+65)

cv2.namedWindow('grayLayer',cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow('grayLayer',320,180)

cv2.moveWindow('grayLayer',320,H+65)

cv2.namedWindow('maskLayer',cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow('maskLayer',320,180)

cv2.moveWindow('maskLayer',320*2,H+65)

cv2.namedWindow('invLayer',cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow('invLayer',320,180)

cv2.moveWindow('invLayer',320*3,H+65)

cv2.namedWindow('riverBG',cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow('riverBG',320,180)

cv2.moveWindow('riverBG',W,65)

cv2.namedWindow('meshFG',cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow('meshFG',320,180)

cv2.moveWindow('meshFG',W,180+65+20)

while True:

deltaT = time.time() - tStart

tStart=time.time()

fps = fps*.95 + (1/deltaT)*.05

frame = piCam.capture_array()

frame = cv2.flip(frame, -1)

_, river = cam.read()

river = cv2.resize(river,(W,H))

meshLayer = frame.copy()

meshLayer[0:H-1,0:W-1] = [255,255,255]

rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

results = faceMesh.process(rgb)

if results.multi_face_landmarks:

for faceLandmarks in results.multi_face_landmarks:

# Optional second pass for glow effect

mp.solutions.drawing_utils.draw_landmarks(

image=meshLayer,

landmark_list=faceLandmarks,

connections=mp.solutions.face_mesh.FACEMESH_TESSELATION,

landmark_drawing_spec=None,

connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

color=(0, 150, 200),

thickness=2

)

# === Best looking translucent mesh ===

mp.solutions.drawing_utils.draw_landmarks(

image=meshLayer,

landmark_list=faceLandmarks,

connections=mp.solutions.face_mesh.FACEMESH_CONTOURS,

landmark_drawing_spec=None, # Hide dots

connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

color=(0, 0, 180), # Bright cyan/teal

thickness=7

)

# Optional: Extra detail on irises (makes eyes look better)

mp.solutions.drawing_utils.draw_landmarks(

image=meshLayer,

landmark_list=faceLandmarks,

connections=mp.solutions.face_mesh.FACEMESH_IRISES,

landmark_drawing_spec=None,

connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(

color=(255, 0, 0),

thickness=7

)

gray = cv2.cvtColor(meshLayer,cv2.COLOR_BGR2GRAY)

_ , mask =cv2.threshold(gray, 250, 255, cv2.THRESH_BINARY)

invLayer = cv2.bitwise_not(mask)

riverBG =cv2.bitwise_and(river, river, mask = mask)

meshFG = cv2.bitwise_and(meshLayer,meshLayer, mask=invLayer)

composite = cv2.add(riverBG,meshFG)

myText = "FPS: "+str(round(fps,1))

cv2.putText(composite,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)

cv2.imshow("Composite", composite)

cv2.imshow("meshLayer",meshLayer)

cv2.imshow("grayLayer",gray)

cv2.imshow("maskLayer",mask)

cv2.imshow("invLayer",invLayer)

cv2.imshow("riverBG",riverBG)

cv2.imshow("meshFG",meshFG)

if cv2.waitKey(1) == ord('q'):

break

cv2.destroyAllWindows()

piCam.stop()

Technology Tutorials

AI on the Edge LESSON 46: Ultimate Dazzleing Running Rainbow On a NeoPixel Ring

AI on the Edge LESSON 45: Adding a NeoPixel Ring To Your Raspberry Pi Project

AI on the Edge LESSON 44: Displaying Live MediaPipe FaceMesh Avatar on SSD1306 OLED in OpenCV

AI on the Edge LESSON 43: Adding SSD1306 OLED to Your Raspberry Pi Projects

AI on the Edge LESSON 42: Create Composite Images Using Masks in OpenCV and MediaPipe

Making The World a Better Place One High Tech Project at a Time. Enjoy!