Introduction

Image processing and games programming may be the most technically challenging job that a programmer can have. The top level programs may require the best from both programmer and computer. Tic-tac-toe is a simple game that makes it easy to build algorithms for the computer to play its own move. In this article, a interactive webcam based Tic Tac Toe game is developed. Program in coded in C# .NET using AForge .NET Framework for certain image processing tasks and image acquisition.

Webcam in Application

The first step would be getting video feed from webcam within our program. We can use AForge .NET Framework for accomplishing this. Image acquisition is simple and pretty fast using AForge .NET Framework. Check out the code snippet below:

Think of video as a continuous stream of images, for real time image processing we need to process each and every image captured by the webcam. I'm getting an average of 7 fps within my application. More the fps, more smoothly your program will run.

Design and GUI

As you can see in the picture above, I've created a very basic design for Tic Tac Toe using GDI+ of C# .NET.

Laser Detection & Gameplay

The program searches for the brightest red blob in webcam's field of views. We can do so by using two of the filters defined in AForge .NET Framework.

Color filter to filter out everything except red laser light.

Blob Counter to retrieve the position of laser dot or red blob within image.

After laser has been detected, the program keeps track on movement of laser dot and once laser is turned off, it places the user's move within that grid. To understand this, imagine a tic tac toe board with nine different grids as shown in the image below:

The algorithm is designed so that it splits every frame from webcam into nine equal rectangles depicting nine different grids of tic tac toe game. User move is placed within grid in which laser light is turned off. If you don't have laser light or you can't visualize this program, then check out the video at YouTube. For code optimization, we can further add filters before playing any move like checking grid is empty and not occupied by cross or zero, we can also add some pause or sleep so that before program could confirm that there is no laser light within webcam view.

Algorithm For Tic Tac Toe

I tried to implement AI the best way I could, even with a long code. Algorithms are designed with humanistic approach to play tic tac tic. It tries to win the game at first, preventing the other player from winning, and then tries to make a move avoiding "traps" and putting two computer pieces in a row. If none of this is possible, a random move is made.

Using the Program

Well, the program needs a laser light and a webcam streaming images at 640 X 420, you can modify the source code provided in this article to match with your webcam's resolution.

I've added AI within the game for smooth gameplay even if your machine is not high end and it streams images at low frames per second. The program will try to predict the most probable move that you are uptop and will place it automatically even if your laser pointer is near it.

Conclusion

We have reached the end of this article. I might update this program to add more optimization for best game play. However, for now, have fun with it! You can find some videos of this application on my blog. You can also easily modify the code to make this program do much more than just playing tic tac toe. Have fun!

Hello,If I'm not mistaken, every pixel consists of 3 Bytes with 1 Byte for each R, G and B. So, I believe that above filter, will keep a pixel whose R values is between 254 and 255 whereas it will allow wide range in G and B. In my case, laser dot had R value of almost 255(highly red). If your laser is Green(pure green), then try to keep higher and little range in green value around 250 ~ 255 and for R and B keep wide range around 0 - 245. But, these values depends on different kind of web-cams and laser, some laser are like yellowish green, you can play around with these values, unless you find the your laser dot is identified as largest blob.

Since, my code is based on AForge.net library, I'll strongly recommend you to visit the official website of AForge. You could find some very nice articles over there. http://www.aforgenet.com/[^]

The game didn't worked as I expected... but I was trying to find a very easy to use solution to create a chat with web-cam support, and this helped me. Other articles on these libraries confused me, but yours is really clear.Thank you.