After looking at the brief and thinking about how I could present this to the BBC Archive I have come up with the idea that I would choose the IPTV format to focus on as a way of presenting the archive. I would get this idea into the public eye by creating an advert with the press red icon in the corner which launches an interactive archive. The reason that I would focus on this is because with the digital switchover happening therefore more people are going to have televisions and services that have interactive functions available.
The way that I would design the format is by on the home page of the IPTV I would give an explination about the BBC archive and give a list of time periods to chose from. Then by selecting it opens a graphical timeline. I would persent it as a graphical timeline because this would not make the material seem so acedemic like the brief asks. Within this timeline I would mix catogries such as historical, political, religious, artistic, births and deaths. By doing this I feel that this is another way to make it seem not so acedemic and you can see a wide span of events over different catogries.
The way that i would then demonstrate how this would then cross platforms further I would redesign the IPTV in the same style into an app. This app would also have the graphical timelines with an interactive function. Also by creating an app this would help with connections to a physical format of the archive. This is because I would also present the archive in an exibition of props and other material that is not digitalised, this could also be have the same layout formatted as a timeline. Then next to the material within the exibition would be a brief info panel, on these info panel would be a QR code if the viewer wanted further info. And so I don’t alinate the tablet market there would be a code under the QR code for them to enter, this is because not all tablet devices have a camera
After looking through the briefs I have decided to go with the BBC Archive brief where the aim is to design a platform that brings to life the cultural riches within the BBC Archive for audiences to enjoy now and in the future. Therefore after watching the video I am going to start thinking of ways that the archive can be presented.
Today we were set the new brief that was to chose from a list of briefs set by the D&AD competition. The briefs to choose from are ...
DISNEY - ANIMATION CREATE A LEAD CHARACTER, WITH HEART AND OPTIMISM, FOR A NARRATIVE-DRIVEN COMEDY CARTOON
EON - DIGITAL DIRECT ENGAGE GENERATION ‘Y’ IN A RELATIONSHIP WITH E.ON THAT CHAMPIONS NEW WAYS TO USE ENERGY IN THE HOME AND EMPOWERS THEM TO ENLIST OTHERS IN AN ENERGY REVOLUTION
TASCHEN - DIGITAL DESIGN RE-DESIGN THE TASCHEN MAGAZINE FOR THE NEW BREED OF MULTIMEDIA TABLET DEVICES
DIESEL - ILLUSTRATION CREATE AN ILLUSTRATED INTERPRETATION OF A MUSICAL TRACK THAT IS EXPERIENCED BY THE VIEWER IN AN UNCONVENTIONAL AND PIONEERING WAY
MCDONALDS - INTEGRATER COMMUNICATIONS CREATE AN INTEGRATED CAMPAIGN THAT CELEBRATES THE INHERENT DEMOCRACY OF THE McDONALD’S BRAND
BBC - INTERACTIVE DESIGN DESIGN A PLATFORM FOR THE BBC ARCHIVE THAT BRINGS TO LIFE ITS CULTURAL RICHES FOR AUDIENCES TO ENJOY NOW AND IN THE FUTURE.
HSBC - MOVING IMAGE CREATE A SHORT FILM THAT COMMUNICATES THE UNIQUE AND POSITIVE BENEFITS OF THE ARCHITECTURAL AND ENVIRONMENTAL DESIGN IN MAGGIE’S CARE CENTRES
ANJOWIGGINS - OPEN GRAPHICS CREATE A VIRAL MOVEMENT AMONGST DESIGNERS THAT UNBREAKABLY LINKS ARJOWIGGINS CREATIVE PAPERS WITH CREATIVITY AND THE CREATIVE DESIGN PROCESS
OXFAM - OPEN PRESENT AN IDEA THAT ENGAGES SUPPORT FOR OXFAM BY TRIGGERING SHARED VALUES AND CONCERNS IN A WIDE RANGE OF PEOPLE
After looking deeper into these briefs I have narrowed it down to three briefs that interest me, these briefs are ...
When I got the brief I didn’t quite know what processing was but after some research and our first lesson it was clear we would be using code. Therefore I become very weary of processing because I feel that I am not that good at code and this looked quite complex. This fear also had an impact on my idea generation because I didn’t know what was possible but further research I found that augmented reality (AR) could be done. This interested me a lot because of a game on my phone called AR defender which I was amazed by because of a little image being able to have a graphic lay over it. Once I had decided that AR could be produced I though to get an idea of how the code works I started with a QR sketch to read a QR linked to my website.
Once I had a QR sketch working I found and tried a number of AR libraries that failed to work for me. No matter what I tried they would not work for me, so I decided to look on Vimeo and YouTube and I found a video of someone getting an AR library called NyAR2 that I had found but didn’t get to work on a Mac. This fuelled my determination to getting the library to work on a Mac. I then searched the web trying to find how it worked and I found two lines of code (on a Spanish blog) that got it to work on a Mac. I then translated the page to get a understanding of how this code worked.
Now I had an AR sketch working that used the default markers and placed a 3D cube over the top of the markers it was time to develop my own. Therefore I used the images of the default markers as a template and designed my own. Then by searching the internet I found a website that created marker files from images. Along this journey I had a few obstacles to create the patt file but after looking at the file name I realised that when saving the files I need to re-name them to create the right format. Once I had created my own patt files I felt that I had triumphed because understanding how the patt files work mean that you understand the way AR works.
Once I fully understood how AR and the markers worked the next obstacle was placing a video over the top of the marker instead of a graphic. This needed further research, and after researching video playback using processing I found POGG. This is the use of the OGG video file using processing to play the video file. After practicing with POGG I looked at my sketch and worked out how I could integrate the POGG code with the AR code. After several tries I successfully stitched the code together and placed video over the top of the marker instead of the 3D cube. It then took some modification of code to make the video display properly.
After completing my sketch I felt that it was missing something, I thought it didn’t look interactive and that it wouldn’t get people attention in stores. Therefore I added an image over the top of the capture to show people where to point the card. This gave the sketch an interface also I had modified my markers further and they needed to be in a certain position to be notice so this added guidance for the user. The after some advice from Seb of how to make the image be there when a marker is not see and when a marker is seen it disappears I was told to use a Boolean (something that we hadn’t covered in class). After researching what a Boolean was I found out that it has a true and false statement in it, I thought this sounded familiar to some code I already had which was the marker detector. Therefore I modified the marker detector by adding a true and false statement on the end. This statement worked by using the true statement for if you see the win or lose marker don’t load anything, then if you don’t see a marker at all load the point frame.
The way that I created my sketch by researching other sketches and stitching it together I feel that I have grasped a wider understanding of how the code works. I say this because I feel that if I had just copied a sketch and tweaked it I wouldn’t understand it as well. I feel that by getting AR to work, integrating film playback and creating my own markers I have a much better understanding of how AR in processing works.
Looking back on my project and how it has gone I have some new views on my skills and what is driven me to create an AR interaction. These views include…
I feel that I now have more confidence with code
Processing is something that I have confidence to pursue further because I find it so interesting and rewarding
I find it interesting how changing a few figures can change the whole look and feel of a sketch and the elements within it
I want to explore processing further due to Aaron Kobin using it in his work and I find his work so interesting
Having a professional of the field like Seb there to help use through the process was useful because of his knowledge and class demonstrations.
I am posting my code online via a screen grab that i have merged together, I am pleased with what I have completed my sketch and how it works. by looking at examples and stitching together i have learned a lot more than i thought i would because it seamed like a hard project at the beginning
//Classes Capture cam;//Camera Capture SingleARTKMarker nya;//AR Marker TheoraMovie myWMovie;//Win Movie TheoraMovie myLMovie;//Lose Movie //END - Classes
//Point Image Setup PImage img; //END - Point Image Setup
void setup() {
//Code to make AR work on MAC try { quicktime.QTSession.open(); } catch (quicktime.QTException qte) { qte.printStackTrace();} //END - Code to make AR work on MAC
//Sketch Size, Color & Frame Rate Setup size(640,480,OPENGL); colorMode(RGB, 100); frameRate(30); //END - Sketch Size, Color & Frame Rate Setup
//Load Point Image img = loadImage("point.png"); //END - Load Point Image
//The Camera Capture cam=new Capture(this,width,height); //END - The Camera Capture
//Load Point Image img = loadImage("point.png"); //END - Load Point Image
//Marker Detection Setup nya=new SingleARTKMarker(this,width,height,"camera_para.dat",SingleARTKMarker.CS_LEFT); println(nya.VERSION); String[] marker={"patt.nikew","patt.nikel"}; nya.setARCodes(marker,318);// size of the video that is placed over the marker nya.setConfidenceThreshold(0.6,0.5); //END - Marker Detection Setup
//Win Movie Setup myWMovie= new TheoraMovie(this, "win.ogg");//Loacting the win movie myWMovie.loop();//Play movie on a loop //END - Win Movie Setup
//Lose Movie Setup myLMovie= new TheoraMovie(this, "lose.ogg");//Loacting the lose movie myLMovie.loop();//Play movie on a loop //END - Lose Movie Setup
}//END - Void Setup
void draw() {
background(255); if (cam.available() !=true) { return; } cam.read();
//Draw a background hint(DISABLE_DEPTH_TEST); image(cam,0,0); hint(ENABLE_DEPTH_TEST); //END - Draw a background
//Marker Detector switch(nya.detect(cam)){ case SingleARTKMarker.ST_NOMARKER: break; case SingleARTKMarker.ST_NEWMARKER: case SingleARTKMarker.ST_UPDATEMARKER: //END - Marker Detector
//3D Space Setup PGraphicsOpenGL pgl = (PGraphicsOpenGL) g; nya.beginTransform(pgl); //END - 3D Space Setup
//Marker coordinate system. translate(-159,130,0);//x,y,z position of the video rotate(PI);//rotation of the video rotateY(PI);//rotate video so the nike logo is the right way round if(nya.markerid==0){ // If win marker is seen myWMovie.read(); // Read Process image(myWMovie, 0, 0); // Load Win Movie } // This has now linked the Win movie to the win marker else if(nya.markerid==1){ // If lose marker is seen myLMovie.read(); // Read Process image(myLMovie, 0, 0); // Load Lose Movie } // This has now linked the lose movie to the lose marker nya.endTransform(); //END - Marker coordinate system. }
//Point Image Booleans if(nya.markerid==0==true){ // If Win marker is seen } // Load nothing if(nya.markerid==1==true){ // If Lose marker is seen } // Load nothing else if(nya.markerid==0==false){ // If Win or Lose marker is removed image(img, 0, 0); // Load Point Image } // Close Load Point Image //END - Point Image Booleans
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
