Instant Wallpaper Generator

Intro: Instant Wallpaper Generator

Inspired by the Immersion Room at the Cooper Hewitt Design Museum, the Instant Wallpaper Generator is a simple and interactive installation by artist and designer Purin Phanichphant. It offers the audience a unique experience: the ability to tangibly generate a wallpaper pattern that instantly gets projected onto the wall right in front of them.

Using provided 2D geometric shapes, construction paper, found objects, audiences can create their own designs on the “capture area” and watch their creations get replicated and magnified up on the wall projection. This is made possible by using a webcam to capture live video, running it through a simple code written in Processing, and projecting the output using a short-throw projector.

With ease and simplicity in manipulating the pattern and the instant dramatic effect, the Instant Wallpaper Generator aims to let audiences, both young and old, capture their imagination into reality.

STEP 1: Planning & Dimensions

The first first thing to do is to plan out the space, particularly the projection cone. Working with an Optoma GT760 720p short-throw projector, the distance of the pedestal/podium from the wall is roughly 6’. Optoma actually has a decent website that helps you figure out how big your projection would be, given the placement/position of your projector: http://www.optomausa.com/distancecalculator/

The idea here is to cover an entire wall you’re working with, from floor to ceiling, say, at least 8’ tall. This allows for one to feel more immersed in the projection. The projection quality works best on a white wall with a smooth surface.

STEP 2: The Pedestal Box & the Camera Arm Attachment

The pedestal box will provide three functions: 1. A tabletop surface for the image capture 2. A housing / hiding place for the projector and the computer running it and 3. A place where the camera and its arm will attach.

In my design, I went with W 24” x H 34” x D 18”. The pedestal was made with 0.5” MDF, with no bottom. I cut out a W 18” x H 4” slot at the bottom of the box’s back to slide in the projector.

I then built two pieces of camera arm attachment, to be attached to the back of the box, out of 0.75” MDF. Each piece are roughly 4” x 5.5” x 1.5”, with a 1” diameter hole to fit the camera arm. Plus, I drilled a 3/4” hole in the back of the pedestal box, so that the USB cable will go in to attach to the computer.

Put together the box and the camera arm attachment using wood or drywall screws. I painted the entire piece with flat black acrylic paint. Now on to the camera arm itself!

STEP 3: The Camera Arm

The camera arm will need to hold the camera cylinder assembly sturdily. You can imagine building it so that it’s adjustable, but I like mine to be fixed-position and minimal. I used a 1” diameter hollow aluminum tubing with 1/8” wall thickness. I rough-cut the piece on a metal cold saw, then bent it using a tubing bender with appropriate setup for a 1” tubing. I did a few more rough cuts on the cold saw (and de-burred the ends using a hand file). The final dimensions for my camera arm are H 31” x D 11.5”, with the bottom edge of the aluminum tubing lining up with the bottom piece of the attachment. The idea is to place the camera cylinder right in the middle of the capture platform/table top, and for the distance from the camera to the table top to be appropriate (in my case, that distance is 16.5”). I spray-painted the piece with black primer, which provides a nice flat finish, just like the paint I used for the pedestal box.

STEP 4: The Camera Cylinder

The camera cylinder will house a webcam as well as an USB LED lamp (even though I ended up turning it off, so you can ignore that part in my design). The cylinder needs to attach to the camera arm as well.

I used a 4” diameter PVC pipe to fit the Logitech C920 pro webcam I have. I got this 4” diameter PVC pipe from McMaster Carr, but I’m imagining they can be bought at any home improvement store. I then cut it down to 6” length using a cold saw.

For the cylinder bottom and cap, I designed the pieces in Illustrator (see the attached file) and cut them on an Epilog laser cutter on a 1/8” acrylic. Note how I designed it so that the cap and bottom fit into the PVC pipe nicely, as well as providing perfect fit for the camera and the [unused] LED lamp. The acrylic pieces were glued together using super glue. The bottom was later glued to the PVC pipe using regular latex glue.

I spray-painted the entire cylinder, the cap, and the bottom using black primer.

STEP 5: Putting Together the Camera Cylinder and Camera Arm

Assemble the camera arm onto the camera arm attachment, securing it with two 1” internal diameter collets. Be sure to straighten it perpendicular to the front and back of the box. Feed the USB cable through the aluminum tubing (this one I got fits perfectly), with the female end at the camera cylinder, and the male end at the bottom of the pedestal, through the small hole to be connected to the computer.

Attach the camera cylinder assembly onto the camera arm, then connect the USB of the Logitech webcam to the USB extension that runs through the aluminum tubing.

STEP 6: The Code

As for the code, I used Processing running on a Mac laptop. The idea is simply to take in the webcam video input, and display smaller versions of them in a tiled manner (using the “translate” function), row by row. I’m far from an expert at programming, and I essentially manually hard-coded each row, as opposed to writing an object that I reuse over and over again. But the code works well enough for my use — see the attached .pde file. When I run it, I actually use Mac’s screen zoom function to make the sketch appear full-screen on the projection.

STEP 7: Play Shapes

This part is completely optional, but I thought it would be fun to provide some basic shapes for users to start off with. I cut 1/8” acrylic pieces on the laser cutter, on both black and white colors, and sandwich the two colors together using super glue (so that one side is black, and the other side is white).

STEP 8: Putting It All Together

Connect the projector to the computer (in my case, it’s mirroring a laptop screen). Fire up Processing and run the sketch. You might have to change the camera name variable (should be listed in the debug console), depending on the camera model you have. The one last step is to make the sketch look full screen. I did this using Mac OS’s “Zoom” capability (under System Preferences > Accessibility > Zoom > Use scroll gesture with modifier keys to zoom.

Voila! Anything under the camera should now tile up on the wall. Try all sorts of shapes, objects, colors, motion, etc. Have fun!

Comments

[ReedJ1]

This is awesome! I definitely want to give this a try. Has anyone attempted to do this through windows rather than Mac? Also, where are you hiding the projector?

[SherylinRM]

Ok I must be missing something here.

Please excuse my ignorance, however. Would it not be easier to get one of those small projectors and play it with all sorts of designs and pictures instead?

I am asking because I see this a Rube Goldberg type machine is all.

Not trying to mean. Just trying to understand is all.

Thanks :)

[purincess]

If you're talking about one of those school projectors with transparency films, then I think I understand what you mean by that being more of a direct manipulation (i.e. you draw on a transparency film and you see an enlarged version on the wall. However, to get a tiled effect (like a wallpaper), that would require some serious lens design. Using a webcam and a piece of software like the above is much simpler in my opinion. :)

[SherylinRM]

Actually was thinking if you put a laptop on to the overhead then whatever you have on your screen goes on the wall. But the type of projector I meant was this

http://www.bestbuy.ca/en-CA/category/projectors-ac...

I hope that helps you understand my question better. :)

Thanks again and sorry for my late reply to your reply :)

[borogoves]

I liked the Cooper Hewitt installation too. I think they project onto all four walls, and perhaps the ceiling? With keystoning on each projector, you could probably go to two walls and get the seams to match up reasonably well.

[purincess]

They do it on two walls at the Cooper Hewitt. I've worked on a project where we did 3 walls, and it was quite delightful.

[simont3]

i get the error (see screen shot below) 'size of sketch cannot be determined ....... use only numbers and not variables..... it may be a processing 3 vrs 2 thing? any thoughts?

ta

[robmac]

Yes we got the same error.

[milkykilm]

In processing 2 you can use variables for size() function. In processing 3 you can't do that.

Therefore, you can adjust the size of the sketch to the resolution of your screen or use fullScreen() instead.

Hope it helps.

[robmac]

That did it! I also did not have the video in library. New to this. Thanks.

[purincess]

Thanks for looking into this. I used Processing 2 instead of 3 to run the sketch!

[abolfazl fakour]

ok.

[deluges]

Fantastic. Are you thinking of a raspberry pi and pico projector version for a cheaper and more mobile version?

[purincess]

Haha! That would be perfect for a little diorama! Or a play doll house!

[rexxar]

The problem with a pico projector is the distance to the wall, but you could install it a few meters away