Make a Customized Magic Mirror With Scratch

Seeing yourself belong

Makerspaces are exciting places to be: they're filled with amazing projects, amazing people, and a culture of experimentation and learning. But sometimes makerspaces can be unapproachable for beginners. From a distance it can seem like everyone in a makerspace is an expert, or that makerspaces are only meant for dudes with robots.

So I decided to build a magic mirror next to the entrance to my school's makerspace to let each student know, even before they walk through the door, that they are welcome in the makerspace. In some ways this project plays on what a mirror is -- a way to see yourself -- by playfully helping students see themselves as creative, capable people who belong in the makerspace as much as anyone else.

The pictures attached to this step show a sneak preview of the final product.

Inspiration

This project draws inspiration from two projects:

Michael Teeuw's magic mirror and Daniel Rozin's wooden mirror. I saw Rozin's wooden mirror at the entrance of NYU's Interactive Telecommunications Program. ITP is a wonderland of learning and creativity, and the wooden mirror there makes for an incredible threshold moment when you get off the elevator. When I came across Teeuw's magic mirror last year, I thought it would be cool to find a way to combine the two and sprinkle in some computer vision software for good measure.

Special thanks

Thanks to the many people who helped out in this project! Some of them are my students (Josh Y, Naomi), some are my colleagues (Josh W, Deb), some are my teachers (Sari, Breanne), some have inspired me without knowing who I am (Michael T, Daniel R), and some collaborated with me though we mostly know each other online (Josh B). What a supportive community -- thanks, everyone!

And what an abundance of Joshs. That's kinda weird. If you end up getting stuck on this project, you should probably go out and find yourself someone named Josh to help you out. Seems like that's what I do.

I'd recommend a few things for this project:

• an old monitor
• a piece of plexiglass
• privacy control window film with mirror finish (I bought a big roll of it at Lowes for $25)
• a computer can run projects from scratchx.org (I've been trying to get this to work on a Raspberry Pi but haven't figured it out yet)

But if you just want to get a feel for how to customize this project, you should be able to do most of the interesting work just with a computer that's running Scratch. You can always get around to the hardware and the mirror part later on.

Let's jump right in:

1. Unroll the reflective film and trim a rectangle the same size as your plexiglass
2. Apply the film to the plexiglass, using a credit card (or whatever you've got) to try to get the air bubbles out
3. Grab your shiny, repurposed piece of plexiglass and stick it on the front of a computer screen

And already you're almost there! By applying the privacy control window film to the plexiglass, we essentially made ourselves a cheap-and-easy one-way mirror. And by placing the one-way mirror in front of a monitor, we took a few steps toward making it a magic mirror. Not bad! Now all we need is some code and some mood lighting to pull this idea together.

We'll address the code in the next step, and as far as the mood lighting -- I'm only sort of kidding. The way that one-way mirrors work is that they are reflective on the shiny side unless a light source on the back is brighter than the ambient light on the front. And so by placing the one-way mirror in front of a monitor, any colors that are bright enough on the monitor will shine through the reflection. Magic! You may need to experiment with dimming the lights in your room (or increasing the brightness of your monitor) to have the monitor shine through clearly enough, but I will leave that up to you.

Check out the attached pictures for a few examples.

Next we're going to hop over to scratchx.org to begin customizing the graphics that appear behind the mirror. Why scratchx.org instead of scratch.mit.edu, you ask? Well here's where things are going to get fun: I put together a Scratch extension that provides new blocks of code which are able to track the position of your head. Take a look at what this allows us to do:

By tracking the x, y, and z coordinates of a face that's picked up by the webcam, we're going to have much more control over what the screen displays and how the graphics correspond to the reflection the user sees in the mirror.

Give it a try yourself: head over to scratchx.org, click "Open extension file," and select the .sbx file attached to this step. You'll see a new set of blocks under the "More blocks" category which will open up some new possibilities!

Ok, let's try putting it all together and get a light bulb sprite to pop up above the user's head. At this stage, aim to keep it simple and just prove that it works. It will take some time to calibrate the project. I'm still working on it myself.

To help keep things simple, my version of the Scratch project only shows the light bulb sprite when the camera is tracking a user's head and it is in a very specific x, y, and z range. This allows me to know that the user's perspective will be in the sweet spot where the light bulb will appear to be just above their head as the look at their own reflection.

As I hope to expand the functionality of this project, I realize that I'm just at the tip of the iceberg when it comes to understanding the perspective and optics at play here: what is it that the user sees? What does the webcam see? How should the user's perspective affect the position of what gets displayed on the screen? Even in just taking the picture attached to this step, the difference between what my eyes could see, what the webcam could see, and what my camera (taking the picture) could see all needed to intersect to demonstrate the concept of the magic mirror. Phew!

If you happen to have a Microsoft Kinect lying around, and a Windows computer that can run the Kinect 1.8 SDK, then you can try another way to make this project work. The Scratch extension that I built is pretty finicky. I wouldn't even call it a beta version; it's more like a v0.001 alpha. (I'd love some help improving it, if anyone would like to jump in and offer a pull request!)

So, if you happen to have the hardware for it, try downloading the Kinect 1.8 SDK and then Stephen Howell's Kinect2Scratch SDK, which will allow you access to new blocks of code in Scratch 1.4. This is very similar to the head-tracking blocks that I made available in the scratchx.org project, however Howell's version is more stable and provides more datapoints you can use.

Good luck

I hope that is enough to help you get started customizing your own magic mirror in Scratch. I'm still working on the polished final version of my own, so please leave your tips and advice in the comments.

Happy making!