2019-10-25 | By Adafruit Industries

License: See Original Project Wearables

Courtesy of Adafruit

Guide by Phillip Burgess

Overview

Augmented reality is a popular tech buzzword right now…the concept of overlaying graphics or information over the world you see. In this project we turn that idea around…overlaying the graphics on you!

We’ll use a mix of very new and very old tech. The Adafruit MONSTER M4SK board for the new tech…and for the old, Pepper’s ghost is a 19th century parlor trick for making objects appear to float in space.

With some careful setup of lighting, positions, and angles, and using a sheet of glass…not even special half-mirrored glass, just plain ol’ glass…real and reflected objects seem to occupy the same space. The reflection has a slight transparency to it, hence the “ghost” in the name.

• Will this block my vision?
• Not at all! The effect is totally invisible to the wearer. It can only be seen in the other direction…when looking at you.
• I wear glasses. Is that a problem?
• Most eyeglasses can be accommodated just fine. Exception might be particularly large frames.
• Sometimes the illusion is even more convincing with glasses! With the distances dialed in just right, the ghost eyes appear just behind one’s eyeglasses, the distance and parallax roughly matching one’s natural eyes.
• My eye spacing isn’t average. Can this work for me?
• If your pupillary distance is within a few millimeters of the MONSTER M4SK’s 63.6 millimeters, the effect itself is sufficiently distracting to cover for any slight mismatch.
• If you have wide- or narrow-set eyes, the MONSTER M4SK board is designed to be split in two. Then use this optional 9-pin JST cable to connect the two halves and space them apart at whatever distance you require.

Some well-known applications of Pepper’s ghost include Disneyland’s Haunted Mansion ride and the “holograms” of a few high-profile concerts. The same principle is used in teleprompters and heads-up displays…you see a combination of transmitted and reflected light. That’s what we’re doing here. But rather than you seeing the reflected image, everyone else does…it’s invisible to the wearer and doesn’t block your view.

Items You’ll Need

A hat! The ideal hat for this project has a level brim (not sloped) with sufficient firmness to support the electronics (e.g. a flopsy wizard hat wouldn’t work). The local seasonal costume shop had several suitable options for $10 or less.

Pick something that suits a character or theme you’d like to portray. I had something specific in mind and got this wide-brimmed fedora on Amazon for about $15 and replaced the hat band with some black ribbon. It’s not an exact match, but close enough for folks to make the connection.

An Adafruit MONSTER M4SK board.

(But see the “No MONSTER M4SK?” section below…alternatives are possible!)

A tempered glass cell phone screen protector. I picked up this 3-pack on Amazon for the iPhone Xs because it was cheap and a good size…iPhone Xs Max works well also…there might be even better options with a smaller (or no) notch.

This is a fungible item you can get practically anywhere now (drugstores and so forth). Two important things to look for:

• Tempered glass, not the flimsy plastic sticker type!
• Glossy, not an anti-glare matte surface!

A battery of some sort. Perhaps a good capacity Lithium Ion battery if you’re planning on a long run time. This may require a battery extension cable depending where parts fit in the completed project.

You might already have or could use a USB battery bank if the placement of the MONSTER M4SK board allows adequate clearance for the connection. This approach may require a slim 90° micro-B USB cable.

Last item and NOT SOLD IN STORES: creativity and a willingness to improvise with whatever craft materials and tools you have access to. That might be 3D printing, some Sugru or just some hot glue and a couple well-placed LEGO bricks…it need not be rocket science.

Common Sense Please

This project involves a DELICATE SHEET of GLASS, RIGHT OVER YOUR EYES. Clearly this is not something to wear in a rowdy environment, or a setting where you might trip and fall on your face, and so forth. Please exercise good judgment. You’ll have to take some accountability for your actions.

You can use a piece of acrylic or Lexan as an alternative, but it produces a slightly blurry double-image. If going this route, you do not want half-mirrored plastic. Just plain clear. You need your own face to show through unobstructed.

Best for Controlled Settings

The illusion works best with subdued lighting. Not complete darkness, as your own face is part of the act, and that requires some light. But not out in the sun or in bright interior light either, or the reflection is just washed out. It’s not the right effect for every venue.

It also helps if you are average height and interacting eye-to-eye. The gag is hidden under the brim of a hat…so if you’re tall, or if you’re interacting with kids or seated people looking up at you, the illusion falls apart.

No MONSTER M4SK? No problem!

The MONSTER M4SK is an all-in-one board, no soldering, and easy to customize with new graphics. But the illusion we present here is just as effective with any illuminated type of display…perhaps you’ve built our Teensy Eyes or Pi Eyes in the past…or any other OLED or backlit LCD device. Or a smartphone display (if you can provide your own software or graphics). Even LED matrices if you want a low-res robot effect.

The key is that black pixels are transparent, showing through to your face, while lit pixels appear progressively more opaque.

It could even work with a couple of “LED throwies” if you just want a glowing eyes effect (Dune, werewolf, etc.)

Code & Graphics

Let’s get the tech set up before working on the crafty stuff.

Our MONSTER M4SK guide walks through the process of setting up the board for the first time. There are two, maybe three steps to this process:

1. Get the onboard flash filesystem working. If your MONSTER M4SK board already shows up as a flash drive called “CIRCUITPY,” you can skip the initial steps!

2. Get the eye code running in a basic state. If your M4SK board is already running eyes, do this step anyway to make sure you have the latest code.

3. Install some graphics for this project’s eye designs.

Here’s the link to that guide:

Visit the MONSTER_M4SK Quickstart Page

The “Download Eye Graphics” button on that page gives you a ZIP file containing not just the default hazel eyes, but some specially-designed ones for this project as well. These are in two folders called “doom-red” and “doom-spiral.” With the MONSTER M4SK board connected to USB, copy both of these folders over to the CIRCUITPY drive.

Inside each of the folders is a file called config.eye. Move or copy that file out of one of those folders, into the “root” directory of CIRCUITPY. If you’ve been customizing the eyes on the board already, make sure you back up the original config.eye first!

“Doom” in this case refers to the character Judge Doom from Who Framed Roger Rabbit? In the film’s climax, freaky 2-D animated cartoon eyes were superimposed over actor Christopher Lloyd’s face, fueling kids’ nightmares for generations to come! I was aiming to mimic a couple of these effects…

The doom-red eyes are modeled after the red-irised eyes he wears for most of this part of the movie.

There’s a short moment where the character’s eyes go through several bizarre patterns, including the classic cartoon “hypno eyes.” A last-minute addition to the eye animation code made it possible to spin the eye graphics…specifically so I could make this effect! These are in the doom-spiral folder.

Most any MONSTER M4SK eye graphics should work okay, but I made a few tweaks to these specifically to assist with the Pepper’s ghost effect…

• Both of these eye designs are more wide-open than the stock eye graphics. This helps obscure the wearer’s own eyes at more angles…and conveniently is more on-model with this character.
• Also, they don’t blink all the way closed. Because “off” pixels are transparent in this gag, the wearer’s eyes would briefly be visible any time the overlaid eyes blink. This half-blink still gives a reasonable impression of blinking and misdirects watchers from seeing your eyes.

These adjustments were made using the upper.bmp and lower.bmp eyelid bitmaps, plus the squint setting in config.eye. If making your own ghost-eyes, you can copy those files as a starting point. Or you could do no eyelids at all. Even the default eyes would be intense over a skull-painted face that way!

But Wait, There’s More…

If the eye code just doesn’t do what you want…really any graphics, you can display on the MONSTER M4SK screens could be used with this gag. Writing your own code is one option. Or, as I’m writing this, Ladyada is making headway on an animated GIF player, which opens this up to pretty much anything!

If there’s any content that’s left/right sensitive (e.g. text or certain graphics), flip the image horizontally, since this project uses a reflection. We don’t bother with the eyes since they look OK either way.

Assembly Part 1

Thus, begins the “arts and crafts” part of the project. I’ll walk through some of the steps I used here, but your situation might be totally different, and you’ll want to find a solution that works with your available tools, materials and skillset.

Glass Prep

The glass screen protector might have a protective backing on it. Now’s a good time to peel that away.

The screen protector is a thin sheet of tempered glass bonded to a layer of plastic. The latter makes it cling to a phone screen better and reduces shattering if dropped. You can see and feel the difference: plastic side’s a little sticky, while the glass side is smooth and gives a better reflection. You want that slick glass side to face the MONSTER M4SK screens.

3D-Printable Option

If you’re blessed with a 3D printer, this is an excellent way to hold the pieces at exactly the right angle…

I designed a little 3D-printable doodad to hold the glass over the MONSTER M4SK at a 45-degree angle. It’s just the right width to fit across the bridge of the nose, and both the board and glass press-fit into place.

As I’ll get to on the next assembly page…for my hat setup, this had the parts too close together for the illusion to work at its best. Regardless, I’ll still use this clip just for the glass later.

Notice it’s printed on-edge, not lying flat. It’s stronger this way, the print layers won’t crack apart when press-fitting.

Maybe you’ll have a use for it or could fashion your own. Here’s the .STL file if you’d like to give it a try:

Click to download Phil’s M4SK glass doodad (.STL file)

Some tempered glass screen protectors are thinner than others. If you find yours falling out of the clip, a piece of clear tape folded over the edge of the glass adds just a tiny bit of extra thickness.

Alternatives to 3D Printing

And if you don’t have a printer? That’s okay, this is the part where you improvise…

Is there some medium you’re comfortable with? Maybe woodworking, in which case something like the 3D clip above could be made with a few cuts using hand tools. Maybe polymer clay, making grooves for the PCB and glass by pressing in and removing them from a chunk of clay before baking. Maybe Sugru (silicone putty) or Apoxie Sculp (epoxy putty), or something else entirely.

Can you make or find something that grips the glass, but allows it to be replaced later should it crack? Binder clips? Double-stick tape?

With a medium that takes some time to air cure, you’ll need to support the pieces at just the right angle for whatever the setting time is, usually many hours! Look around you, see if you have something that can function as a 45-degree wedge. A LEGO roof brick? A glass prism? A piece of scrap wood? You can fix it in place temporarily with masking tape, then remove it later once the putty or other material has fully set.

Assembly Part 2

In a first attempt at this project I’d tried installing the MONSTER M4SK board under the brim of the hat. This might work for you, but I found it presented a couple of problems…

First, the screens used on the MONSTER M4SK bleed a fair bit of light around the perimeter. For the Pepper’s ghost effect to really work we want the eye graphics to be the only source of light.

This can be fixed by making a stencil from vinyl, craft foam or construction paper, with cutout circles for the eyes.

Second, the effect looked great head-on, but any amount of parallax had the cartoon eyes projected about half an inch in front of my own eyes. We can fix this!

The trick is to position the screens at the same distance from the glass as one’s own eyes…they’ll then appear to occupy the same space. I’ll just move the board up above the brim of the hat, with cut-outs for the eyes.

Every hat and head and how it fits will be different! So, before you go cutting or gluing anything, do some test mock-ups first by holding things in place manually, or with bits of masking tape or whatever you can improvise. Check in a mirror or with a friend’s help. Figure out the ideal distance…under brim, over brim, how much extra space…then we can proceed.

If planning to make a stencil or eye holes in your hat, here’s a template you can download and print:

Download printable PDF template for MONSTER M4SK

Before you cut into anything, be absolutely certain the template prints actual size! Hold the MONSTER M4SK board over it to confirm.

If you don’t have a printer you can still make your own template manually: the eye holes are 30-millimeter circles, spaced 63.6 mm center-to-center (or 33.6 mm inner edge-to-edge), and the minimum headroom above the circles is 13.5 millimeters.

Cut out the paper template carefully with a hobby knife or scissors, and do one last size check over the MONSTER M4SK before committing to the hat…

Trace the eye holes onto the hat with a contrasting pen or pencil. Silver Sharpie markers are a godsend, or colored pencil may work just fine.

The TOP EDGE of the MONSTER M4SK faces “in,” toward the forehead.

Remember, cutting the hat is only required if you’ve determined the best placement for the MONSTER M4SK is over the brim. If going under the brim, leave the hat alone, and the template is still useful for making a light-blocking stencil.

Carefully cut the eye holes using a sharp hobby knife. Better to go a little small than too large…you have more control to make adjustments with additional passes.

Since this hat is 35% polyester fiber, frayed edges could be cleaned up by briefly passing a lighter underneath. Please don’t set your hat or anything else on fire.

Hold the MONSTER M4SK in place, flip the hat and see how it looks.

If you cut the holes too big, don’t panic! You can still fashion a stencil from vinyl or construction paper or what not, and keep it held between the board and hat.

The board is best held in place with some hot glue. Or you can try poking extra holes in the hat and using M3 screws and nuts, but I found this made unsightly puckers in the hat brim.

On the next page I show covering up the board with some fabric to hide it.

TO DISMANTLE THE PROJECT LATER, or to reposition the board, hot glue can be removed using a Q-Tip dipped in rubbing alcohol. This doesn’t dissolve the glue, it just seeps between the glue and PCB and cleanly breaks the bond. This won’t get any glue out of the fibers of the hat though.

Before you bolt or glue the board in place…at some point you’ll want to remove the clear plastic stickers that protect the screens during PCB assembly. They’ve done their job and just make the image blurry now.

For holding the glass now…you can use the same 3D-printed clip doodad shown on the prior page…but not clipped to the PCB. It can be affixed under the brim of the hat using hot glue or E6000.

Assembly Part 3

Detour! Mine Needed More Work…

As it turns out, this still wasn’t enough extra distance to fix the parallax problem…I’d need to raise the board just a few more millimeters above the brim.

Your hat/eye/distance situation might be altogether different, so don’t feel like you need to do all this. If your eye reflections are looking good where they are, you can skip ahead to the next section below.

IMPORTANT: I’ve accumulated decades of craft detritus and never throw anything out. While building or adjusting your own hat, I’m not suggesting you should run out and buy any of this stuff! Rummage through your own life’s detritus and see what might work.

I discovered one can’t just raise the board and keep the same eye holes, reason being that the Pepper’s ghost illusion works in three dimensions…it would be like looking down a tube slightly off-axis, partly blocking the screens. So, I cut the eye holes a bit bigger.

Also cut a hole so I could run a wire from the battery inside the hat to the board outside, and for a USB cable.

To raise the board a few millimeters, I cut some little blocks out of an old neoprene mouse pad and fixed them in place with hot glue. Foam-core board or corrugated cardboard could also be used.

Make sure the screens align with the holes before the glue sets. If I were doing this over, you’d see a stencil around the screens blocking stray light. This was my prototype and I’d painted over things instead.

Once the board was securely in place, I used the same 3D-printed doodad…but only for holding the screen glass, not the circuit board. Make sure the clip is straight before the glue sets.

Once in place, then I painted over the edge of the clip and anything else shiny in the vicinity to prevent reflections. This is just me being super-persnickety and probably isn’t necessary.

Okay, Back on Track…

With my wacky adjustments in place, now we can wrap this up all the same…

So now there’s this board out in the open on top of the brim.

One option is just to keep it there like that, if it’s less about the costume and more about being able to share the project and show how it works.

I wanted to make some effort to cover the board…and by chance in my craft hoard was some black felt that was an excellent match for the hat. I covered just the front part, held in place with some fabric glue and clamped in place to dry.

Afterward, I trimmed along the edge and also glued on some craft-detritus elastic as a more tasteful replacement for the original hat band.

This does cover up many of the connectors and buttons on the board, so keep that in mind when planning. I need occasional access to the reset button to get the board in bootloader mode for uploading new code, but the fabric has enough “give” that the button can be pressed through it.

It’s a bit lumpy but not super conspicuous. If you really wanted to go all-out one could make an entire fake brim and conceal the board in there.

I’m okay with some stuff showing though, if one goes looking for it. It’s an opportunity to “pull back the curtain” for interested people and explain how it works. It’s also easier to access the power switch this way.

Slip the glass back into place, power it up, and there it is!

Spend a little time practicing with a mirror, cell phone camera or with a friend’s help, learning the best placement of the hat and how much you can turn your head with the illusion intact. I intentionally glued the glass-holding doodad in such a way that it lightly touches my forehead. With some practice, I should be able to sense if the hat is aimed correctly on my head.