Build Your First Computer Vision Project

Have you ever wanted to play ping pong but didn't have a partner? Well, with a bit of coding and computer vision, you can create a solo ping-pong game that lets you play against yourself!

In this blog post, I'll guide you step-by-step on how to make this game using Python, OpenCV, and a hand-detection module.

SoloPong Demo

To see the solo ping pong game in action, check out the demo video below. Watch as I play the game using hand gestures detected by the webcam.

https://www.youtube.com/watch?v=4_GEyFlE7M0

GitHub - https://github.com/ayush-that/SoloPong

What You'll Need

Python installed on your computer
A webcam
Some image assets for the game (ball, bats, background, and game over screen) from the GitHub repository

Writing Down the Code

Importing Libraries and Setting Up the Camera
```
 import numpy as np
 import cv2 as cv
 import cvzone
 from cvzone.HandTrackingModule import HandDetector

 cap = cv.VideoCapture(0)
 cap.set(3, 1280)
 cap.set(4, 720)
```
We start by importing the necessary libraries. We use OpenCV (cv) for image processing, cvzone for hand detection, and NumPy (np) for numerical operations. We then set up the webcam with a resolution of 1280x720.

Loading Image Assets

 imgBg = cv.imread("assets/bg.png")
 imgGO = cv.imread("assets/gameover.png")
 imgBall = cv.imread("assets/ball.png", cv.IMREAD_UNCHANGED)
 imgBat1 = cv.imread("assets/bat1.png", cv.IMREAD_UNCHANGED)
 imgBat2 = cv.imread("assets/bat2.png", cv.IMREAD_UNCHANGED)

We load the images for the background, game over screen, ball, and bats. Make sure you have these images in the assets folder.

Setting Up the Hand Detector
```
 detector = HandDetector(detectionCon=0.8, maxHands=2)
```
We initialize the hand detector with a detection confidence of 0.8 and allow it to detect up to 2 hands.
Initializing Game Variables
```
 ballPos = [100, 100]
 speedX = 25
 speedY = 25
 gameOver = False
 score = [0, 0]
```
We set the initial position of the ball and its speed. We also initialize the game over flag and the score.
Main Game Loop
```
 while True:
     _, img = cap.read()
     img = cv.flip(img, 1)
     imgRaw = img.copy()
```
We enter the main game loop, read the frame from the webcam, and flip it horizontally for a mirror effect. We also make a copy of the original frame.

Hand Detection and Overlaying Bats

 hands, img = detector.findHands(img, flipType=False)
 img = cv.addWeighted(img, 0.1, imgBg, 0.9, 0)

 if hands:
     for hand in hands:
         x, y, w, h = hand["bbox"]
         h1, w1, _ = imgBat1.shape
         y1 = y - h1 // 2
         y1 = np.clip(y1, 20, 415)

         if hand["type"] == "Left":
             img = cvzone.overlayPNG(img, imgBat1, (59, y1))
             if 59 < ballPos[0] < 59 + w1 and y1 < ballPos[1] < y1 + h1:
                 speedX = -speedX
                 ballPos[0] += 30
                 score[0] += 1

         if hand["type"] == "Right":
             img = cvzone.overlayPNG(img, imgBat2, (1195, y1))
             if 1195 - 50 < ballPos[0] < 1195 and y1 < ballPos[1] < y1 + h1:
                 speedX = -speedX
                 ballPos[0] -= 30
                 score[1] += 1

We detect hands in the frame and overlay the bats based on the hand positions. If the ball hits a bat, its direction changes, and the score is updated.

Ball Movement and Collision Detection

 if ballPos[0] < 40 or ballPos[0] > 1200:
     gameOver = True
 if gameOver:
     img = imgGO
     cv.putText(
         img,
         str(score[1] + score[0]).zfill(2),
         (585, 360),
         cv.FONT_HERSHEY_COMPLEX,
         2.5,
         (200, 0, 200),
         5,
     )

 else:
     if ballPos[1] >= 500 or ballPos[1] <= 10:
         speedY = -speedY

     ballPos[0] += speedX
     ballPos[1] += speedY

     img = cvzone.overlayPNG(img, imgBall, ballPos)
     cv.putText(
         img,
         str(score[0]),
         (300, 650),
         cv.FONT_HERSHEY_COMPLEX,
         3,
         (255, 255, 255),
         5,
     )
     cv.putText(
         img,
         str(score[1]),
         (900, 650),
         cv.FONT_HERSHEY_COMPLEX,
         3,
         (255, 255, 255),
         5,
     )

We update the ball's position and check for collisions with the screen edges. If the ball goes out of bounds, the game is over. Otherwise, we continue updating the ball's position and overlay it on the frame.

Displaying the Game

 img[580:700, 20:233] = cv.resize(imgRaw, (213, 120))
 cv.imshow("Image", img)
 key = cv.waitKey(1)
 if key == ord("r"):
     ballPos = [100, 100]
     speedX = 25
     speedY = 25
     gameOver = False
     score = [0, 0]
     imgGO = cv.imread("assets/gameover.png")

We display the game frame and handle the "R" key press to reset the game.

Thank you for following along! Have fun building and playing your own solo ping pong game. If you have any questions or run into issues, feel free to leave a comment below.

Thank You for reading. Please leave a like and if you wish to read more such articles, subscribe to my Newsletter. You can connect with me on Twitter and LinkedIn. 🤠

Build Your First Computer Vision Project

Table of contents

SoloPong Demo

What You'll Need

Writing Down the Code