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.

Augmented Reality

After researching the Hugo Boss example i have found hou how it was created. It used a technique called "Augmented Reality". This is currently moving over to the iphone platform with games that use the camera. i have has a go with basic code and icon but at the moment i cannot find a libary that works with mac. I am researching the above example to see if i can get this to work with an idea that i have developed

Processing Artists : Aaron Kobin

After going to OFFF and seeing data visualizations I was inspired staright away. But not knowing how they were created I automatically thought that they were created with a special effects program so I tried to create some data art with after effects. But when I started this project and found out that they were created using processing it made me want to learn as much as I can about processing as possible. What makes me like Aaron Kobin so much is that he can create such interesting pieces of art with just data. I am now going to look at his pieces of art and how they were created.

Flight Patterns – After coming up with the idea of creating this piece Kobin Worked with RLM and later Wired Magazine to retrieve data with high accuracy that showed the paths of each airplane over North America which was the able to be animated using processing. With this piece Kobin has received amazingly broad exposure, this includes National Science Foundation's First Place award for Scientific Visualization, screened at the Coachella Music Festival, and appeared in numerous magazines and television programs. The piece has also earned a place in the permanent collection at the Museum of Modern Art in New York.

New York Talk Exchange- With this piece Kobin asked asked AT&T to provide data on the way that New York City communicates with the rest of the world. Once the data was collected a number of visualizations was created to show the international city relationships to New York.

Visual Research : Hello Kitty Store

This piece of processing is aimed at both children and the parents who come in the store. It first works by photographing the customers as they come in the door, this must work by using lasers or triggers when they come in the door to take the photo, then frame it. The second part of the video shows and interactive display where children use a device that simulates a cursor for controlling the different elements to colour in the different parts of the outline drawing.

This is a cleaver way of keeping people in the store. This is because whatever way you look at this example while the kids might interact with the application the parents might be getting bored therefore while they are bored they might go round looking at products and might start buying them. The other way you can look at this example is while children play with the application they will probably like the products even more and therefore the parents will most likely end up buying them.

Visual Research : Smith & Smith, Spain

the embed has been disabled by user so Click Here to view the video on YouTube

This piece has got to be a much further developed piece that I have seen so far. The reason that I say this is because this is more of a website displayed in an touchscreen window display. I say this because looking at the features of the piece there are many buttons and tabs along with photos and information. Even thought I think this is the further developed piece I also think that you can put too much information into a piece. The reason that I say this is because looking at the display there are large pictures and large chunks of text. I think that it might have been better to keep the images and limit the text because I think that the viewer of this piece may look at how many sections there are and think it might just be easier to go in the shop and look at the products.

Visual Research : Hugo Boss

This piece has got to be the one that works the best. The reason that I say this is because watching the video of the interactive window display looks like it uses the same technology as QR readers on the iPhone to read the BOSS promotional cards and change how they look when you view them on the interactive screen.

Another reason that I find this interactive window display works well because it draws you into the store. This is because by activating the promotional cards outside you have to go inside to see if you have won a voucher. Therefore even if you haven’t won on your voucher BOSS has achieved what they set out to do and that was to get you in the shop. So if you haven’t won you are in the shop and you might like some of the products and therefore buy some and this would give BOSS a sale and they would of made some money for them, which is what they set to do in the first place.

This is why I find that this is this promotion the best because it has got you in the store to check if you have one and even if you haven’t one you are in the store.

Visual Research : Apple Store

This piece is not an interactive piece but more of a visual attention-grabbing piece. The reason that I say this is because if you own an iPhone you will notice the display and even though the icons are travelling fast you reconise symbols but not them all. It is a cleaver way of presenting the icons because it looks like a particle sequence presenting all the apps out there. Another cleaver way that the window is displayed is by using a model of an iPhone to select single apps to display and what the apps do.

This is a cleaver way of getting the attention of both current customers and new ones. The reason that I say this is because by using eye catching techniques to show a range of apps, the company is showing what is available to you ( that is if you have an iPhone or you want one).

Visual Research : Nike Footlocker

This piece of processing is aimed at people who want to interact with the window display, but it also works for people who just walk past the window. This window display works with sensor cameras, so that when people move past the sensors the leaves over the image of the shoe move so that the shoe can be seen. By looking at the video not many people interact with the display, but by watching the video it seems the higher the person in front of them the more of the background image is revealed. I think that if the amount of particles that move when people walk past was increased so more of the background image was shown people might pay more attention.