DIY Interactive Floor

This project is about how to make an interactive floor using just a projector, computer, and webcam.

1. Lightweight projector (a cheap one will do fine)
2. Computer or laptop running Windows, Mac, or Linux
3. Webcam/External camera
4. Tripod (I suggest 3ft minimum)
5. Video cable (for connecting the computer to projector: HDMI, VGA, etc.)
6. internet connection

Ok, this step is boring, but it's important and you will thank yourself later.

Find an indoor area with carpet or concrete (the floor needs to be close to or white). Next, you need to define a clear space in this area (this will be where users interact). This area can vary in size depending on how powerful your projector is. The cheaper ones under $100 USD usually are not as bright as the more expensive ones, which can cover more area. It's important to know how bright your projector is; because the farther you put it away from the play space, the bigger and dimmer it's going to get. I suggest the experience should be played in the dark for cheap projectors that use a lot of space.

Attach the projector onto a tripod and extend it to at least 4ft or higher (Shorter than 4ft may distort the experience and make shadows and resolution a bigger problem). Angle the tripod a little down, so the projector is aiming at the ground a meter in front of it. Plug the projector and computer into the video cable, then the webcam into the computer. Power the projector on. On your computer, (Only tested on windows) Open the control center by clicking the notification button past the clock, then expand the menu. Click project, and ensure that extend is selected (This should be on default for Mac, not sure about Linux systems).

On your computer, you will need a free useful piece of software called OBS. This app is used mainly for live-streaming and recording, but it is also used for projector mapping.

Download OBS Studio from the official website and set it up for your device. When you first open it, a setup wizard may come prompting if you want to set obs up for streaming or recording; click recording. Next you will need an extension for obs called "Corner Pin". Download it from the website and open obs. Up in the top left bar, click tools then scripts. Click the plus icon which will open a file picker, then navigate to where the filter-cornerpin.lua file you downloaded is. Select and open it; you know you've done it right when the description on the right reads

"Corner Pin, New filter by khaver-v1.6". Click close then create a new rendering source, like a window or desktop capture. I like to have a web browser tab open at this time, so I use a window capture for setting this up. DO NOT SET THE DISPLAY CAPTURE TO THE SCREEN YOUR PROJECTOR IS MIRRORING. Right-click the preview and click fullscreen projector, then click the new display (your projector). This should not be the one that says DISPLAY1, but the name of the projector. This will make the projector mirror the preview.

Great! OBS is set up, the projector is displaying the output page, but there's one problem: The image is splayed across everything! The floor, the wall, even furniture! We want to limit it only to the floor, without installing the projector on the ceiling; This is where Projection Mapping comes in.

Now you can look up the title of this step, there's a lot of mind-bending subsections that go into this. We're doing Floor Mapping, so that's where you would get more info.

Click on the window/display capture then filters, which just lit up. Click the plus icon under effect filters to bring up a list. In the list, select corner pin and click ok. The following part is what you will need to do every time the setup moves locations:

With the projector on and the window having a source, adjust the sliders controlling the corner pin while looking at the output in real life. It helps to have another person getting a top-down view of the play area, you are trying to straighten out the image, and restrict it to only being on the floor. When you're done, the preview should emulate the projector's perspective and restrict the image only to the floor as if the projector was mounted on the ceiling.

Nice, the image is getting projected onto the floor only, without mounting to the ceiling.

But you've come to a fork in the road: You can either just look up a video of bubbles to display and end it here, or you can program an interactive game (spoiler: you don't have to really do coding)!

If you're a programmer, feel free to try to make the rest of this on your own. If you're just someone who owns a projector and wants to make a cool game, keep reading!

We're going to make a simple highly-customizable program in scratch, or you can just edit my finished project here (It might not work very well with your setup, you will have to customize it).

Go to scratch.mit.edu and create a new project. Click on the add extensions button in the corner and select video sensing (Once installed, the webcam camera should have turned on). 

Make two sprites, each with a costume1 and costume2. These sprites should be boxes or rectangles, you can position these on the left and right sides or the screen. The costume2 needs to ONLY be a different color than costume1. I create costume 1, duplicate it, then change it to a different color. 

The code inside needs to be as follows:

This will make it if the camera detects you inside one of the sprites, that sprite will light up by changing costume. This code needs to be in each sprite.

If you start it now, the box will light up when you walk into a sprite, great! The issue is that it's finicky and will not show up properly on the projector. In order to fix this, the camera needs to be on the floor a few feet away from the play area and needs to see all of it. This distance can vary depending on how big the play space is. The bigger the playspace, the higher the camera needs to be. click the fullscreen button in the right corner, then the start flag. If you stand on the box on the floor, it should light up and change color if everything is made correctly. Try jumping back and forth from each box and watch the effect!

You can add more boxes, create a piano, change the texture, This step is all yours!

Be careful when adding more boxes though, the program may trigger multiple at a time. What I did in my example for the top middle box is that I noticed that it looked like I was standing on the bottom of the playspace, so I made an invisible box right where I was standing to trigger changing the box on the top!

The purple box is the one that lights up, while the green one is the one that gets triggered.

Another tough one was the top left box because it kept triggering the left box instead of itself; so I did the same thing but I put a dummy on the box, then made a small invisible box where it the dummy stood.

When you've got something you're happy with, show someone! 

They'll most likely be impressed and if not, bore them with the details about how long this took to make and that following a tutorial by a teen was so complex.

This was certainly not the most effective and interactive floor system, but it was made of basic supplies and it was made by you!