Ping Pong by VISEO

Article

"Le Ping Pong" in Live

Live Pong “Le ping pong” is an experimental casual game developed in React.js, using the webcam and including body recognition within a web-app. The body recognition comes from PoseNet, a project developed in open source by Google.

 

An article by Baptiste, Web & Mobile Developer Trainee.

The game is very straightforward, it’s a classic Pong Game, retro style, but instead of moving the platform with keys or a joystick, you have to physically move your hand up and down.

 

How does it work?

  • The principle

Two computers must connect to the website, each one will be asked to grant the app access to the webcam. One will create a session, and the other one will join it. The game begins when the player who created the session chooses his side (left or right).

 

The game immediately starts with the ball launched on one side. The goal is to send back the ball with your platform. When the ball crosses the screen of a computer, it appears on the other one. The platform moves up and down according to the position of the right player’s right hand and the left player’s left hand.

 

  • The React App

Ping Pong by VISEO

 

There are two main components that work in parallel: the webcam (which is in charge of detecting the position) ; and the pong game, which displays the game elements, deals with the interactions between the different objects, and communicates with Firebase.

 

The application uses Redux to store various information, like the ‘pose’, detected by PoseNet, and the position of all the Pong’s objects.

 

When the ball crosses the screen, an update is sent to Firebase, and the computers adjust their behaviour to suit the position of the ball (the whole process is made by comparing the side of the player with the side of the ball).

 

How did we built it?

While looking on the web about body detection in a web navigator, we came across Google’s PoseNet, a CNN designed to detect the posture and position of a human body. This open source project is made to be used on a browser, using their infamous library: TensorFlow.js. To make it short, this library is used to make machine learning in JavaScript environments (like a browser).

 

After a few tests to understand how it works, we started building the project. We used Facebook’s React.js library to make a single-page web-app.

 

To read the full article, click here

Baptiste 

Baptiste by VISEO
Web & Mobile Developer Trainee
Paris

As a fourth year student at HEI, an engineering school in Lille. Web development and data science are areas I particularly like. During my internship, my mission was to develop a game that allowed me to cover different technologies and thus increase my skills.