I have now gone through the pdf that was in the Taschen assets I have analyzed possible pages where I can apply functions as well as general functions of the magazine app. These functions include ...
Search function
Interactive contents page
Scrolling function for the text instead of slabs of text you view
Image enlargement
Video and audio playback
Caracell and tile slide shows
Index of people and content in the book, and links to the located pages
Links to websites of people in the book
Task bar
Linking subjects to social networks
Text enlargement for older customers
Favourite articles function
Corner icon to jump between content and current page
Links from front title to the articles
Shift blurring with certain article that have large images and scrolling text
Portrait and landscape
A tap mini menu
Here is a mock-up of how the mini menu would look...
Now I have done some more visual research and looked at the gadget magazine T3 Ipad version I have a better understanding of how magazines are presented on tablet devices. Also the closest format to an iPad magazine was Readers Digest. Looking Through the magazine it had functions such as video playback and linked text but that was all. But a function that I dont like is when you turn devices landscape and it turns the view into a two page spread, so my idea is that it creates a slimilar layout to a one page spread but in landcape.
After talking to Andrew about what iPad magazines look like on the device I have found out a number of different functions that the iPad magazine has. These include...
video playback
liked text
interactive content
scrolling
galleries
more info
After looking at the content in the magazine above I plan to find a magazine that is formatted in a similar way to that of the iPad so I can analyse the functions further.
After changing my mind to the Taschen brief I ordered the printed version last night. The reason that I done this was because I feel if the have the printed version of the magazine I can steer away from how the magazine works and feels.
After looking back at my selected briefs I have now decided to go with the Taschen brief where you re-design the Taschen magazine for the market of tablet computers such as the iPad. I have decided to go with this brief because being the owner of an iPhone it has very similar functions to the iPad so I can understand ways that I can present elements of the magazine.
I have created these mock-ups to show how I would layout the elements needed to be shown within the archive. While creating these mock-ups I have realised that the IPTV is not a good way to present the archive and I also feel that I would not do well with this brief. Therefore I am going to look at the other briefs I considered and choose from them
After under going some research both online and using the sky news channel I have come to the conclusion that the best way to create an IPTV is by designing it in a way that is visually pleasing to view but works in a basic way. Therefore I need to take these elements into consideration when designing my IPTV.
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.
