Shop Display - How I Would Set It Up

If i was to have my interactive application set up in a shop this is how i would do it. I would have it set up with a monitor and the frame I designed around it. This way the monitor could be any size and the sketch could be enlarged for larger monitors.

Sketch Filming

Today me, Matt, Chris and Guy helped each other with filming up in the lecture room. We bumped into problems along the way. These include positioning of cameras but we come over these because we had two different cameras we tried different positioning. We used a Playstation Eye on top of the projection panel to give a different perspective and the camcorder below the projection panel for a different perspective.

With my camera positioning i placed the camcorder above the monitor. This way i filmed the screen on its own, Chris interacting with the screen and an angle of the screen and projector in the same frame. Now i am home I have filmed myself using the sketch using my screen recording software, this way i can place this recording within the display frame that i have designed.

Adding a Frame Boolean

With the recent modification of my markers they work when they are closer to the screen, so i have decided to add a frame that is controlled by a boolean. This means that when the win and lose markers are noticed the image disapears, but when it sees no markers the image loads.

here is the code that creates the boolean

if(nya.markerid==0==true){
}
if(nya.markerid==1==true){
}
else if(nya.markerid==0==false){
image(img, 0, 0);
}

New Leaflet Design

I then re-designed the back of the leaflet to look more magical. I done this by creating a wormhole style effect with stars coming out of the bright center. Part of this new design included finding a sutiable bolder font and re-wording the text to sound like Nike had written it.

It also included in re-wording the text and to do this i researched the Nike website. I done this by finding a shoe that I thought the magic would be like, then by looking at the features and description it has I gave some of these features to the wording of my new leaflet design.

Marker Modification

After the comment of making the markers less obvious, Therefore I have made the markers pretty much identical apart from the win marker has a slightly smaller white box. This makes the it slightly harder for the feed to tell them apart but it is still able to.

Comments After the Break

After spending the Christmas break developing my sketch and leaflet design I asked for comments on return and this is what I got…

• Need to make the markers less obvious
• Research the way nike word their info and the re word leaflet in the same way
• Add a barcode system to the leaflet so that the shop can work out if the people are cheating
• Add a nike frame to the sketch so that it gets peoples attention when walking past

Further suggestions on on how I should re-word and re-design the leaflet include

• Extra light shoes
• Nike has launced a new trainer
• Cut out the experience comment
• Try a different font (bolder)
• Play with the design (more Magical)
• Boast about nike
• Cut out AR marker comment
• Say hold the card so the nike logo is facing the camera
• Have a look at nike branding for ideas

Display Frame

With my idea, it is set up as a screen either inside or outside a shop, this screen has a lens at the top so I thought that I should design a frame to go round the screen.

Due to my markers needing light so that the captured markers can be told apart I would need to either bring spot lights or use the light emitted from the screen at a way of eliminating the area in front of the screen so the markers are easier for the sketch to decode.

Keeping with the magic theme I have used the hats that I drew for the sequence and used them as a base for the twisting text to come out of so that it looks like a spell. I have Also used a photo of Brighton's Churchill Square to put it in the local area.

Leaflet Design

Now I have got the markers less obvious i need to design them for a leaflet, so i added more space to the bottom of the card and text to tell the user where to hold the card. This is because if the user places there finger over the black border of the AR marker it wont work.



I have also designed the back of the leaflet to further the promotion. I have done this by giving guidelines to how the competition works, what the AR marker and thats its an interactive expirence.

Then to further the competition I have added a section that says if you lose dont worry because if you submit your email address you could win a voucher. This will make buyers more interested in the new brand and gives Nike a chance to advertise and promote via email because once they have got their address they can keep sending them emails.

Putting Sebs Suggestions Into Place

Once I had the suggestions from Seb I decided to first try the simplest suggestion which was to chnage the size of the camera feed. So I changed the size of the camera feed to 320 x 240 and this made no difference.

I then decided to try the other suggestion of changeing the complexity of the marker, this did not make any difference. But I did keep these re-designed markers because it is an easier marker to read.

Then I thought before I play around with the format of the video why not try the pace of the sequence. Therefore i doubled the pace from 5 seconds to two and a half. Then when this played in processing it played as 5 seconds long which was the length i wanted. So i have solved the problem that needed solveing.

Skype Talk With Seb

Now I have finished my sketch it was time to have my skype talk with Seb. As far as I was concerned my only problem was the speed of the video playback when I showed my marker. This is because it was playing at a slow rate.

Therefore the suggestions that I got back from Seb were…

• Change the size of the camera feed, try halving the size to 320x240
• Inspect the video file (format, file size, ect)
• Make the markers less complex, cut out the text
• The pace of the film, try doubling the pace of the film

So i need to spend the next few days problem solving to see if i can improve the video playback

Pairing Win and Lose Sequences With Markers

Now I have created my sequences and my own markers, I have paired them together by editing code and files to work togeather. I have also added the translate and rotate code to place and position the video over the top of the marker.

Compleated Sequences

I have completed the sequences for the win and lose markers, I have tried to make the sequences the same size as the markers so thats why they are pixelated because they are being stretched. i have created the sequence with the x for a lose marker and the nike logo for a win marker.

Win & Lose Sequences

Over the next few days i need to create a win and loose sequence for my markers. Because so far i have been using just random videos that i have had on my computer. These are mockups of how my sequences will look. I want the sequences to look identical apart from the icon that comes out of the hat. This way people entering the competition will not know weather they have won until the icon comes out of the hat.

Merging POGG & AR

After spending a few days learning how to create video playback through processing i have now worked out how to combine it with my AR sketch that places cubes over the markers, so when a movie shows i video is placed on the marker instead of the cube...

Create classes for the movies

TheoraMovie myWMovie;//Win Movie
TheoraMovie myLMovie;//Lose Movie

Setup the Movies

//Win Movie Setup
myWMovie= new TheoraMovie(this, "win.ogg");
myWMovie.loop();
//END - Win Movie Setup

//Lose Movie Setup
myLMovie= new TheoraMovie(this, "lose.ogg");
myLMovie.loop();
//END - Lose Movie Setup

Marker detection setup for win movie and loose movie

if(nya.markerid==0){myWMovie.read();image(myWMovie, 0, 0);}
else if(nya.markerid==1){myLMovie.read();image(myLMovie, 0, 0);}

Video Playback

Before I try to place video over the top of the marker I first need to understand how video playback works in processing. The most plausible technique so far seems to be the POGG technique. This is the technique where processing and the OGG video format is combined.If anybody wants to know how to do this, there are examples on the pogg website ...
http://www.fotosdelpais.com/octavi/pogg/doku.php?id=pogg

Getting My AR Markers to Work With Sketch

With my own markers designed and generated into patt files it is a simple step replace my markers in place of the defalt ones. I just need to place my patt files in the data folder within the sketch folder. Then in the sketch change the name of the patt file to the same name as my generated patt files….

String[] marker={"patt.nikel","patt.nikew"};

And this is the result

AR Marker Maker Online

After searching the internet I found an online AR marker generator. But as normal I have run into some problems. The way that they are created is by uploading images or using webcams to take photos, the image is the converted into a patt file. But a problem that happens when you download the patt file is that it downloads as a photoshop pattern file. Therefore when you download the file you need to rename it patt."filename" so it saves it as a unreconised file but it is still a patt file when used in processing.

Marker Making

Now I have got a sketch working with the defalt markers the next thing is to get one working with my own that I have designed. I have designed my own but not knowing how patt files work i need to research the way that they are constructed. Here are the designs that I want to turn into patt files...

AR Code SOLVED !!!

After scoring the internet for a way to get NyARToolKit to work on the mac i found a Spanish processing blog who was also trying augmented reality and he posted that these lines of code are what make AR work on a mac....

try {
quicktime.QTSession.open();
} catch (quicktime.QTException qte) {
qte.printStackTrace();
}

after pasteing this code at the top of the void setup i get the result of a cube being placed over the AR card when shown on camera

AR Research

After researching augmented reality i have found a library called ARToolkit. This library is to be used to develop augmented reality for PC, but after further research the augmented reality library i found a version for mac called NyARToolkit. But at the moment i am having problems to get the sketch that i found to work on mac. Therefor i am undertaking further research to make the sketch work on mac.