Prototyping

We did some preliminary prototyping with different kinds of materials and different angles, brightnesses and phones.

The important facts are these:

>>brightness DOES matter, too high sometimes contrasts out, while too low doesn't always read
>>a direct parallel to the camera is essential for the best read and reaction time
>>the fiducial does not read on all brightness levels when colored (it was pink)
>>the fiducial seems to work on both iphone and android on all brightness levels when black
>>how well the fiducial reads is directly tied to how fast the reaction is
>>the reaction seems to lag about a half of a second at it's highest read
>>the camera will have to be mounted under the plexi, all in a self-contained space



So I measured the windows and these are the dimensions. We really want to use vellum as it rear-projects nicely and looks the most professional when mounted on the glass.

Will was very excited.

What they do and how they be

Fiducials!

Here are plans for incorporating the population experience into the fiducial one, and some functionality and how the users affect the aesthetics. The background will not be a grid, I just haven't quite figured that out yet and it was easier to design on it in the meantime.

The interaction will start with only a few "pink" squares. We'll call these "population" squares because they will have the ability to change color. The # of population squares in the interaction is based entirely on how many people have scanned the QR code. This causes the fiducial interaction to be tied to the population count, and creates an experience with a lot of variety and change as the event progresses.

The green square is the repeller. It not only moves the population squares away, but if it comes in contact with the black attractor square, it causes an explosion of all the population squares following the attractor and scatters them across the screen.

Example of the repeller square pushing away some population squares

The "orange" square, we'll call it the "controller" square, has the ability to change the color of the population squares.

If it comes into contact with any of the population squares, they will take on the controller square's color.

More color changing

Once the controller square is out of range, the colors stop changing. This allows for the interaction to become multi-colored and more interesting for the users

The repeller square can also repel the controller square

The user that has the fiducial for the controller square can rotate their phone to switch the color of their controller. This makes it so that it can change the population squares into a variety of colors at the users will.
A diagram of how more people scanning the QR code causes more population squares to appear

Fiduciaries & Awkward Pictures

Awkward Picture

I think a shape could be used around the QR code that is split in half just like the code is. That shape would be used as the "target" box for the two people that have the codes on their heads. In my opinion this would allow users unfamiliar with what fully formed QR codes look like, the ability to understand the experience without it being explained. If there is a "blob" or a distinct shape of some kind around the QR, the users see that and then see the joined shape somewhere on the screen and get the idea that they should merge the shapes together.

Potentially there could be a little rack next ot the screen that would have cards in it with the QR code that leads to the gallery where the pictures are going to be uploaded. Also on that card, there could be the URL so that people lacking smartphones could also access the gallery.

Also, the camera could be mounted on top of the projection screen and the projector should be behind it. This backlighting would make it so that the shadows were not on the screen and would not detract or confuse the user in the experience.

The pictures being taken could also be uploaded and transferred to a live, growing QR code on the wall opposite of the gym on the main floor. This would build using the pictures being taken by the Awkward Picture experience and when complete, lead the public to the gallery of the pictures.

For the fiducial experience, the setup could be on the 8th floor where there are two windows leading to the staff kitchen. There would be two screen/sheets behind on the inside of the windows that are being back projected on by projectors in the kitchen. There would be random/abstract shapes being projected. Between the two window son the outside (where the users will be) there will be a mounted camera and below that 4 QR codes. Each QR code corresponds to a different element of the experience (e.g. light, screens, sound and movement). When scanned, the user receives a fiduciary on their phone that they hold up to the camera and control that element with. LEDS inside the kitchen affect the screens ambient color and that is controlled by one QR. Another controls the shapes themselves that are on the projection. One other controls the sound coming out of the speakers next to the windows, and the last QR controls the speed and randomness of the movements of the projected shapes.

QR Sketches

Experiments for incorporating QRs into a more interesting context

QR Experimentation

So I did a lot of experimenting with manipulating QR codes and seeing if they would still read. I discovered a lot of things, the biggest being that it is nearly impossible to manipulate the three large "target" areas any more than changing the shape (e.g. from square to circle) without making them unreadable. It seems that the inner parts of the code are much more lenient with manipulation. Check it out!

note: all of these were tested on my android

So I started basic, changing everything from squares to circles and adding color to the b/w. This read just fine.

So then I tried to just live trace it in illustrator to see what would happen. It did not like this.

So I went back and changed the two color to multi-colored. It did not read.

I had a suspicion the former didn't read due to the lightness of the yellows and therefore changed all of the yellows to other colors. It worked!

Then I started experimenting with the "target" areas. This did not go well.

I tried the outside only, the inside only and the middle ring only.

This one in particular baffled me. It read, but it read the WRONG thing! It thought the QR was referring to something else, which was extremely interesting to me.

So then I started in with type. this worked fine.

This did not.

This didn't work either. I tried a few variations of the placement on this just to see if there were certain "target" areas within the inside that I was blocking but none of these seemed to work.

Then I got the idea to just use really loose shapes and see if it would work when I was pretty sloppy about it. It did.

This led me to try using characters instead of blocks of color. This first one didn't work.

I suspected it might be because the letters weren't covering enough 'ground' where the squares/circles used to be so I used a bold style....it worked!

Then I tried just changing little things like color and letters in it, it worked fine but it's not very readable for that purpose.

Then I wondered if I could do a kind of mash up of the letters/a little randomness and while it took longer than the others had to read, it did eventually get it.

Then I wanted to try the big letters on the targets again and see if it would work if i could close out the letters with color so that you could still read the letters but the scanner would pick up on the "target." Nada.

I figured it was due to the "S" but even after cutting out part of it to make white space inside, it still wouldn't read.

All in all, I think I got a lot out of this exercise and have kind of figured out some of the boundaries of manipulating QR.

Creative QRs

So I did some research on adding and manipulating QR content and how far you can take it. I've tried all of these and they have all worked for me with the exception of the last one which wouldn't read for me. According to some articles you can manipulate a QR code about 30% and it will still read. I will update later with my own experiments but I was surprised at how manipulated this are and that they still worked relatively well.

A few other links that talk about manipulating QR codes:

http://contentdeveloper.com/2010/01/how-to-customize-qr-codes-with-your-brands-identity/

http://www.tiglu.com/index.php/tiglu/post/adjusting_qr_codes_to_fit_your_design

Student Show Mockup

Here is a couple renditions of how the building projection could be interacted with by the users coming to the show. Through their iPhones/iTouches, they could control a piece of the projection; however, the windows would act as "blocks" to the interaction so that it becomes a kind of obstacle based fun interaction.

Student Show Research Imagery

Here are some of the pictures I took while researching ideas for the student show. For full descriptions, see the flickr group here where Alex posted our pictures.