Tag Archives: Pi Camera

In this exciting lesson, we build a real-time Emotion Detector that can recognize basic human emotions using just a Raspberry Pi, a camera, and the power of MediaPipe. The system watches your face and identifies whether you look Neutral, Smiling, Surprised, or Angry — and then reacts instantly by changing the color of a NeoPixel ring and displaying the detected emotion on both the camera preview and a small OLED display.Using MediaPipe’s Face Mesh solution, the program tracks 468 facial landmarks in real time. From these points, we carefully calculate key facial ratios — such as eye openness, mouth width, and mouth height relative to head width. These measurements allow us to create simple but effective rules that distinguish between different emotional expressions. For example, a wide mouth combined with raised cheeks indicates a smile, while a small mouth opening and narrowed eyes suggests anger.The project beautifully integrates several powerful technologies:

Picamera2 for high-performance camera capture
OpenCV for image processing and on-screen text display
MediaPipe Face Mesh for accurate facial landmark detection
NeoPixel RGB ring that lights up in different colors depending on the detected emotion
SSD1306 OLED display that shows both the emotion name and a simplified wireframe of your face

One of the most satisfying parts of this project is seeing the NeoPixel ring instantly change color to match your emotion — green for happy, cyan for surprised, red for angry, and yellow for neutral. The OLED also mirrors the detected emotion, making the entire system feel alive and responsive.This lesson is a fantastic step forward in understanding how to combine computer vision with physical outputs on the edge. You will learn how to extract meaningful measurements from facial landmarks, build rule-based emotion logic, and synchronize visual feedback across multiple devices (camera preview, NeoPixel, and OLED).By the end of Lesson 47, you will have a working real-time emotion recognition system running entirely on a Raspberry Pi — a great foundation for more advanced projects like mood-reactive lights, interactive robots, or even assistive technology.

# ====================================================================
# 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

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()

wOLED = 128
hOLED = 64
I2C_ADDRESS = 0x3C
i2c = board.I2C()
oled = adafruit_ssd1306.SSD1306_I2C(wOLED, hOLED, i2c, addr = I2C_ADDRESS)
fontLarge = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",14)
#################################
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 = []
            j=0
            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))
                x = int(lm.x*W)
                y = int(lm.y*H)
                #cv2.putText(frame,str(j),(x,y),fontFace, .3, (0,255,0),1)
                j = j+1
            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)

            keyLM = faceLandMarks.landmark
            
            headRight = 323
            headLeft = 93
            headWidth = keyLM[headRight].x -keyLM[headLeft].x
            cv2.putText(frame,str(headRight),(int(keyLM[headRight].x*W),int(keyLM[headRight].y*H)),fontFace, .3, (0,255,0),1)
            cv2.putText(frame,str(headLeft),(int(keyLM[headLeft].x*W),int(keyLM[headLeft].y*H)),fontFace, .3, (0,255,0),1)
            
            leftEyeTop = 159
            leftEyeBottom = 145
            leftEyeHeight =keyLM[leftEyeBottom].y -keyLM[leftEyeTop].y
            leftEyeLeft = 130
            leftEyeRight = 154
            leftEyeWidth = keyLM[leftEyeRight].x -keyLM[leftEyeLeft].x
            leftEyeRatio = leftEyeHeight/leftEyeWidth*100 
            
            rightEyeTop = 385
            rightEyeBottom = 253
            rightEyeHeight = keyLM[rightEyeBottom].y -keyLM[rightEyeTop].y
            rightEyeLeft = 465
            rightEyeRight = 249
            rightEyeWidth = keyLM[rightEyeRight].x -keyLM[rightEyeLeft].x
            rightEyeRatio = rightEyeHeight/rightEyeWidth*100
            
            eyeRatio = (rightEyeRatio +leftEyeRatio)/2
            
            mouthLeft = 61
            mouthRight = 291
            mouthTop = 13
            mouthBottom = 15
            mouthWidth = keyLM[mouthRight].x-keyLM[mouthLeft].x
            mouthHeight = keyLM[mouthBottom].y-keyLM[mouthTop].y
            mouthWidthRatio = mouthWidth/headWidth *100
            mouthHeightRatio = mouthHeight/headWidth*100
            
            print(round(mouthWidthRatio,1),round(mouthHeightRatio,1),round(eyeRatio,1))
            color = (255,255,0)
            emotion = 'NEUTRAL'
            if mouthWidthRatio >37 and mouthHeightRatio>4 and eyeRatio<74:
                emotion = 'SMILE'
                color = (0,255,0)
            if mouthWidthRatio <37 and mouthHeightRatio>10 and eyeRatio>70:
                emotion = 'SURPRISED'
                color = (0,255,255)
            if mouthWidthRatio <32 and mouthHeightRatio<4 and eyeRatio<57:
                emotion = 'ANGRY'
                color = (0,0,255)               
            cv2.putText(frame, emotion, (int(W*.1),int(H*.15)),
                    fontFace, 2.2, color, 4)
            strip.fill((color[2],color[1],color[0]))
            strip.show()
            #print('XXXXXXXXXXXXXXXXXXx')
            draw.text((0,0),emotion,font=fontLarge,fill=255)
            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()
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

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

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

# 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

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()

wOLED = 128

hOLED = 64

I2C_ADDRESS = 0x3C

i2c = board.I2C()

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

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

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

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 = []

j=0

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

x = int(lm.x*W)

y = int(lm.y*H)

#cv2.putText(frame,str(j),(x,y),fontFace, .3, (0,255,0),1)

j = j+1

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)

keyLM = faceLandMarks.landmark

headRight = 323

headLeft = 93

headWidth = keyLM[headRight].x -keyLM[headLeft].x

cv2.putText(frame,str(headRight),(int(keyLM[headRight].x*W),int(keyLM[headRight].y*H)),fontFace, .3, (0,255,0),1)

cv2.putText(frame,str(headLeft),(int(keyLM[headLeft].x*W),int(keyLM[headLeft].y*H)),fontFace, .3, (0,255,0),1)

leftEyeTop = 159

leftEyeBottom = 145

leftEyeHeight =keyLM[leftEyeBottom].y -keyLM[leftEyeTop].y

leftEyeLeft = 130

leftEyeRight = 154

leftEyeWidth = keyLM[leftEyeRight].x -keyLM[leftEyeLeft].x

leftEyeRatio = leftEyeHeight/leftEyeWidth*100

rightEyeTop = 385

rightEyeBottom = 253

rightEyeHeight = keyLM[rightEyeBottom].y -keyLM[rightEyeTop].y

rightEyeLeft = 465

rightEyeRight = 249

rightEyeWidth = keyLM[rightEyeRight].x -keyLM[rightEyeLeft].x

rightEyeRatio = rightEyeHeight/rightEyeWidth*100

eyeRatio = (rightEyeRatio +leftEyeRatio)/2

mouthLeft = 61

mouthRight = 291

mouthTop = 13

mouthBottom = 15

mouthWidth = keyLM[mouthRight].x-keyLM[mouthLeft].x

mouthHeight = keyLM[mouthBottom].y-keyLM[mouthTop].y

mouthWidthRatio = mouthWidth/headWidth *100

mouthHeightRatio = mouthHeight/headWidth*100

print(round(mouthWidthRatio,1),round(mouthHeightRatio,1),round(eyeRatio,1))

color = (255,255,0)

emotion = 'NEUTRAL'

if mouthWidthRatio >37 and mouthHeightRatio>4 and eyeRatio<74:

emotion = 'SMILE'

color = (0,255,0)

if mouthWidthRatio <37 and mouthHeightRatio>10 and eyeRatio>70:

emotion = 'SURPRISED'

color = (0,255,255)

if mouthWidthRatio <32 and mouthHeightRatio<4 and eyeRatio<57:

emotion = 'ANGRY'

color = (0,0,255)

cv2.putText(frame, emotion, (int(W*.1),int(H*.15)),

fontFace, 2.2, color, 4)

strip.fill((color[2],color[1],color[0]))

strip.show()

#print('XXXXXXXXXXXXXXXXXXx')

draw.text((0,0),emotion,font=fontLarge,fill=255)

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()

strip.fill(0)

strip.show()

These are the schematics we are using for todays project. If you are taking the class, you should already have these components connected:

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

SSD1306 OLED Connected to the Fusion AI Hat

AI On the Edge, Tutorial

AI on the Edge LESSON 20: Resizing, Moving, Converting and Tiling Video frames in OpenCV

June 1, 2026 admin

Welcome back to the AI on the Edge class series! In this lesson, we are diving deep into some of the most critical foundational skills you need when working with video streams on edge devices: Resizing, Moving, Converting, and Tiling video frames using OpenCV.

When you are developing real-world AI applications on the edge, you rarely just display a single camera feed. You often need to manipulate frames to feed them into your AI models, look at grayscale versions for edge detection, or arrange multiple windows on your desktop neatly so you can monitor your data visually.

If you want to follow along exactly as we do in the video, make sure you have your Raspberry Pi 5 set up with your Camera Module.

What We Cover in This Lesson

Fixed FPS Estimation: We continue using our robust low-pass filter formula to track smooth, non-jittery frames-per-second data directly on the video frame.
Creating Named Windows: Understanding how cv2.namedWindow() combined with cv2.WINDOW_GUI_NORMAL gives you absolute programmatic control over the placement of your displays.
Resizing & Moving Windows: How to accurately position multiple OpenCV windows on your screen using specific coordinates while accounting for operating system taskbars and window decorative margins.
Frame Manipulation: Using cv2.resize() to scale down video frames and cv2.cvtColor() to transform the color space from BGR to grayscale.
Window Tiling: Arranging a main camera view, a scaled-down color view, and a scaled-down grayscale view in a perfect grid layout on your desktop.

The Complete Lesson 20 Code

Below is the complete Python code we developed during this lesson. It sets up your hardware camera stream, calculates running performance metrics, processes three distinct variations of the video feed, and tiles them cleanly on your screen.

# ====================================================================
# 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
piCam = Picamera2()
W=640
H=360
tStart = time.time()
fps = 0
RES = (W,H)
piCam.preview_configuration.main.size = RES
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)

topBar = 65
windowWaste = 25

cv2.namedWindow("Camera", cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow("Camera", W, H)
cv2.moveWindow("Camera",0,topBar)

cv2.namedWindow("Camera Small", cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow("Camera Small",  int(W/2), int(H/2))
cv2.moveWindow("Camera Small",0,topBar+windowWaste+H)
    
cv2.namedWindow("Gray Small", cv2.WINDOW_GUI_NORMAL)
cv2.resizeWindow("Gray Small", int(W/2), int(H/2))
cv2.moveWindow("Gray Small",int(W/2),topBar+windowWaste+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)
    frameSmall=cv2.resize(frame,(int(W/2),int(H/2)))
    frameGraySmall = cv2.cvtColor(frameSmall,cv2.COLOR_BGR2GRAY)

    myText = "FPS: "+str(round(fps,1))
    cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)
    cv2.imshow("Camera", frame)
    cv2.imshow("Camera Small",frameSmall)
    cv2.imshow("Gray Small",frameGraySmall)

    if cv2.waitKey(1)==ord('q'):
        break
cv2.destroyAllWindows()
print('Program Terminated')

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

# 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

piCam = Picamera2()

W=640

H=360

tStart = time.time()

fps = 0

RES = (W,H)

piCam.preview_configuration.main.size = RES

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)

topBar = 65

windowWaste = 25

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

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

cv2.moveWindow("Camera",0,topBar)

cv2.namedWindow("Camera Small", cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow("Camera Small", int(W/2), int(H/2))

cv2.moveWindow("Camera Small",0,topBar+windowWaste+H)

cv2.namedWindow("Gray Small", cv2.WINDOW_GUI_NORMAL)

cv2.resizeWindow("Gray Small", int(W/2), int(H/2))

cv2.moveWindow("Gray Small",int(W/2),topBar+windowWaste+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)

frameSmall=cv2.resize(frame,(int(W/2),int(H/2)))

frameGraySmall = cv2.cvtColor(frameSmall,cv2.COLOR_BGR2GRAY)

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

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

cv2.imshow("Camera", frame)

cv2.imshow("Camera Small",frameSmall)

cv2.imshow("Gray Small",frameGraySmall)

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

break

cv2.destroyAllWindows()

print('Program Terminated')

AI On the Edge, Tutorial

AI on the Edge LESSON 19: Create a Bouncing Box in OpenCV On Raspberry Pi

May 29, 2026 admin

Hey everyone, Paul McWhorter here!

Welcome back to the AI on the Edge series! In today’s lesson, we’re going to have some fun and take our first real steps into computer vision animation.

We’re going to create a colorful box that bounces around the screen like an old-school screensaver, while displaying a live FPS counter so we can see how well our Raspberry Pi is handling the workload.

Even though it looks simple, this project teaches you several foundational skills you’ll use again and again in computer vision:

Working with coordinates and drawing shapes in OpenCV
Creating smooth real-time animation
Detecting boundaries and reversing direction
Calculating and displaying live FPS

These are the same techniques you’ll build on later when we start doing object tracking, collision detection, and more advanced AI vision projects.

What You Learned in This Lesson

How to draw filled rectangles on a live video stream
How to move objects smoothly frame by frame
How to make objects “bounce” realistically off screen edges
A clean method for calculating and displaying FPS
Using variables to easily control size, position, speed, and color

This bouncing box may look basic, but once you understand how to do this, you can create all kinds of animated graphics that interact with what the camera sees.

Pro Tip: After you get it working, play around with the speed, box size, and colors. Try making multiple bouncing boxes with different speeds and directions — it’s a great way to experiment!

Ready for more? In the next lesson, we’re going to kick things up a notch and start working with multiple objects and more complex interactions.

Keep building, keep learning, and I’ll see you in the next video!

— Paul McWhorter

For your convenience, this is the code we developed in the 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 cv2
import time
from picamera2 import Picamera2
piCam = Picamera2()
W=1280
H=720
tStart = time.time()
fps = 0
RES = (W,H)
piCam.preview_configuration.main.size = RES
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)

x1 = int(.1*(W-1))
y1 = int(.25*(H-1))
upperLeft = (x1,y1)
bW = int(W*.15)
bH = int(H*.15)
x2 = x1 + bW
y2 = y1 + bH
lowerRight = (x2, y2)
xDelta = 1
yDelta = 1
boxColor = (0,255,255)
boxThickness = -1

while True:
    deltaT = time.time() - tStart
    tStart=time.time()
    fps = fps*.95 + (1/deltaT)*.05
    frame= piCam.capture_array()
    frame=cv2.flip(frame,-1)
    myText = "FPS: "+str(round(fps,1))
    cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale,fontColor,fontThickness)
    
    cv2.rectangle(frame,upperLeft,lowerRight,boxColor,boxThickness)
    x1=x1+xDelta
    y1=y1+yDelta
    x2 = x1 +bW
    y2 = y1 +bH
    upperLeft = (x1,y1)
    lowerRight = (x2,y2)
    if x1<=0 or x2>=(W-1):
        xDelta=xDelta*(-1)
    if y1<=0 or y2>=(H-1):
        yDelta=yDelta*(-1)
    cv2.imshow("Camera", frame)
    cv2.moveWindow("Camera",0,60)
    if cv2.waitKey(1)==ord('q'):
        break
cv2.destroyAllWindows()
print('Program Terminated')

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

# 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

piCam = Picamera2()

W=1280

H=720

tStart = time.time()

fps = 0

RES = (W,H)

piCam.preview_configuration.main.size = RES

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)

x1 = int(.1*(W-1))

y1 = int(.25*(H-1))

upperLeft = (x1,y1)

bW = int(W*.15)

bH = int(H*.15)

x2 = x1 + bW

y2 = y1 + bH

lowerRight = (x2, y2)

xDelta = 1

yDelta = 1

boxColor = (0,255,255)

boxThickness = -1

while True:

deltaT = time.time() - tStart

tStart=time.time()

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

frame= piCam.capture_array()

frame=cv2.flip(frame,-1)

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

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

cv2.rectangle(frame,upperLeft,lowerRight,boxColor,boxThickness)

x1=x1+xDelta

y1=y1+yDelta

x2 = x1 +bW

y2 = y1 +bH

upperLeft = (x1,y1)

lowerRight = (x2,y2)

if x1<=0 or x2>=(W-1):

xDelta=xDelta*(-1)

if y1<=0 or y2>=(H-1):

yDelta=yDelta*(-1)

cv2.imshow("Camera", frame)

cv2.moveWindow("Camera",0,60)

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

break

cv2.destroyAllWindows()

print('Program Terminated')

AI On the Edge

AI on the Edge LESSON 17: Decorating and Annotating Video Frames in openCV

May 22, 2026 admin

Welcome to AI on the Edge – Lesson 17: Decorating and Annotating Video Frames in OpenCV. In this lesson we take our live video stream from the Raspberry Pi camera and start making it really useful and professional-looking. Now that we can grab frames and display them, it’s time to learn how to draw directly on top of those frames. We’re talking rectangles, lines, arrows, circles, and crisp text overlays — all the visual elements you’ll need when you start adding real AI like face detection or object recognition.

You’ll see exactly how to use OpenCV’s drawing functions to create clean, scalable annotations that look great whether you’re running at 320×180 for maximum speed or higher resolutions like 1280×720. We cover how to control line thickness, use filled shapes, position text properly, and most importantly, how to make all your drawings scale automatically with your chosen resolution so everything stays nicely proportioned.

By the end of this lesson you’ll have the skills to draw bounding boxes around detected objects, add confidence scores, label people or items, draw tracking lines — basically anything you need to show what your AI is seeing. This is one of those foundational skills that you’ll use over and over again in your computer vision projects.As always, I encourage you to type the code along with me in the video, then start playing with colors, sizes, positions, and messages. Change things around, break it, and make it your own. That’s the best way to really learn this stuff.

So fire up your Raspberry Pi 5, grab that camera, and let’s start turning raw video frames into clear, informative, and great-looking annotated output!

# ====================================================================
# 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
from picamera2 import Picamera2
piCam = Picamera2()
W=1280
H=720
# W= 640
# H= 360
W=320
H=180
RES = (W,H)
piCam.preview_configuration.main.size = RES
piCam.preview_configuration.main.format = "RGB888"
piCam.preview_configuration.controls.FrameRate=60
piCam.preview_configuration.align()
piCam.configure("preview")
piCam.start()
while True:
    frame= piCam.capture_array()
    frame=cv2.flip(frame,-1)

    upperLeft = (int((W-1)*.1),int((H-1)*.1))
    lowerRight = (int((W-1)*.9),int((H-1)*.9))
    myColor = (255,0,0)
    myThick = int(W/250)
    cv2.rectangle(frame,upperLeft,lowerRight,myColor,myThick)
    
    upperLeft = (int((W-1)*.3),int((H-1)*.3))
    lowerRight = (int((W-1)*.7),int((H-1)*.7))
    myColor = (0,0,255)
    myThick = int(W/250)
    myThick = -1
    cv2.rectangle(frame,upperLeft,lowerRight,myColor,myThick)
 
    startingPoint = (int((W-1)*.1),int((H-1)*.1))
    endingPoint = (int((W-1)*.9),int((H-1)*.9))
    myColor = (255,0,0)
    myThick = int(W/250)
    cv2.line(frame,startingPoint,endingPoint,myColor,myThick)
 
    startingPoint = (int((W-1)*.7),int((H-1)*.3))
    endingPoint = (int((W-1)*.3),int((H-1)*.7))
    myColor = (0,255,0)
    myThick = int(W/250)
    cv2.arrowedLine(frame,startingPoint,endingPoint,myColor,myThick)
 
    myCenter = (int((W-1)/2),int((H-1)/2))
    myRadius = int(.1*(H-1))
    myThick = int(W/250)
    myColor = (0,255,0)
    cv2.circle(frame,myCenter,myRadius,myColor,myThick)
    
    myCenter1 = (int((W-1)*.3),int((H-1)*.3))
    myCenter2 = (int((W-1)*.7),int((H-1)*.7))
    myCenter3 = (int((W-1)*.7),int((H-1)*.3))
    myCenter4 = (int((W-1)*.3),int((H-1)*.7))
    myRadius = int((W-1)*.05)
    myColor = (255,0,0)
    myThick= -1
    cv2.circle(frame,myCenter1,myRadius,myColor,myThick)
    cv2.circle(frame,myCenter2,myRadius,myColor,myThick)
    cv2.circle(frame,myCenter3,myRadius,myColor,myThick)
    cv2.circle(frame,myCenter4,myRadius,myColor,myThick)  

    myText = "My Excellent Label"
    textLowerLeft= (int(W*.01),int(H*.05))
    fontFace = cv2.FONT_HERSHEY_SIMPLEX
    fontThickness = int(W/450)
    fontScale = H*.0015
    fontColor = (255,0,255)
    cv2.putText(frame,myText,textLowerLeft,fontFace,fontScale, fontColor, fontThickness)


    cv2.imshow("Camera", frame)
    

    cv2.moveWindow("Camera",0,60)
    if cv2.waitKey(1)==ord('q'):
        break
cv2.destroyAllWindows()
print('Program Terminated')

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

# 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

from picamera2 import Picamera2

piCam = Picamera2()

W=1280

H=720

# W= 640

# H= 360

W=320

H=180

RES = (W,H)

piCam.preview_configuration.main.size = RES

piCam.preview_configuration.main.format = "RGB888"

piCam.preview_configuration.controls.FrameRate=60

piCam.preview_configuration.align()

piCam.configure("preview")

piCam.start()

while True:

frame= piCam.capture_array()

frame=cv2.flip(frame,-1)

upperLeft = (int((W-1)*.1),int((H-1)*.1))

lowerRight = (int((W-1)*.9),int((H-1)*.9))

myColor = (255,0,0)

myThick = int(W/250)

cv2.rectangle(frame,upperLeft,lowerRight,myColor,myThick)

upperLeft = (int((W-1)*.3),int((H-1)*.3))

lowerRight = (int((W-1)*.7),int((H-1)*.7))

myColor = (0,0,255)

myThick = int(W/250)

myThick = -1

cv2.rectangle(frame,upperLeft,lowerRight,myColor,myThick)

startingPoint = (int((W-1)*.1),int((H-1)*.1))

endingPoint = (int((W-1)*.9),int((H-1)*.9))

myColor = (255,0,0)

myThick = int(W/250)

cv2.line(frame,startingPoint,endingPoint,myColor,myThick)

startingPoint = (int((W-1)*.7),int((H-1)*.3))

endingPoint = (int((W-1)*.3),int((H-1)*.7))

myColor = (0,255,0)

myThick = int(W/250)

cv2.arrowedLine(frame,startingPoint,endingPoint,myColor,myThick)

myCenter = (int((W-1)/2),int((H-1)/2))

myRadius = int(.1*(H-1))

myThick = int(W/250)

myColor = (0,255,0)

cv2.circle(frame,myCenter,myRadius,myColor,myThick)

myCenter1 = (int((W-1)*.3),int((H-1)*.3))

myCenter2 = (int((W-1)*.7),int((H-1)*.7))

myCenter3 = (int((W-1)*.7),int((H-1)*.3))

myCenter4 = (int((W-1)*.3),int((H-1)*.7))

myRadius = int((W-1)*.05)

myColor = (255,0,0)

myThick= -1

cv2.circle(frame,myCenter1,myRadius,myColor,myThick)

cv2.circle(frame,myCenter2,myRadius,myColor,myThick)

cv2.circle(frame,myCenter3,myRadius,myColor,myThick)

cv2.circle(frame,myCenter4,myRadius,myColor,myThick)

myText = "My Excellent Label"

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

fontFace = cv2.FONT_HERSHEY_SIMPLEX

fontThickness = int(W/450)

fontScale = H*.0015

fontColor = (255,0,255)

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

cv2.imshow("Camera", frame)

cv2.moveWindow("Camera",0,60)

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

break

cv2.destroyAllWindows()

print('Program Terminated')

Technology Tutorials

Tag Archives: Pi Camera

AI on the Edge LESSON 47: Emotion Detector Using MediaPipe, OpenCV and Raspberry Pi

AI on the Edge LESSON 20: Resizing, Moving, Converting and Tiling Video frames in OpenCV

What We Cover in This Lesson

The Complete Lesson 20 Code

AI on the Edge LESSON 19: Create a Bouncing Box in OpenCV On Raspberry Pi

What You Learned in This Lesson

AI on the Edge LESSON 17: Decorating and Annotating Video Frames in openCV

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