Independent Project Look Back

Looking at my written brief I feel that I have written a brief that guides the student because I have guided them to look at Aaron Koblins ‘Flight Patterns’ as a starting point. By doing this I feel that this will plant an idea in their head of how transport data is visualized. Also looking at the brief I have written I have looked at past briefs and copied and modified some of the features of aims, learning outcomes and evidence of study. By doing this it provides the brief with a lot more guidance and shows what should be done for the project.

Looking at my research I feel that I have done the right research because I found out how flight patterns was made. Also by looking at how other transport visualisations have been made I could make mine different and not look like the rest of them and therefore make mine unique. I feel by finding my data the way I did I got all the data that I needed because I started by going to Seaford and Lewes train station and asking for the leaflets of the different route and by doing this there was only 15 out of 33 route leaflets. Therefore by finding the digital versions I have a copy that I can print time and time again and draw over should I find repeats and merging routes in the timetables.

Looking back on my working methods I feel that it all went well because I feel that be researching into how flight patterns was made I could combine my skills in different software to create one piece. But first by analysing the data and editing the map to the stations that are stopped at I had a better understanding of what was needed to be used for the animation. Then by finding out that processing was used to create the data points in flight patterns gave me the idea of taking the edited map into processing and use my knowledge of processing to plot the stations of the map. Then by taking the end result of this into Photoshop and creating the track outline then gave me guidance when it cone to animating the trains in after effects. Therefore looking back on my whole project I feel that I used all the right methods to create my end result that I wanted to.

Finally looking at the final outcome of my project I am happy with it and I feel that I have done what I set out to do. I feel that if I had only shown the map animation the viewer might not make as much of an impact as of showing the map animation and the trains only animation. This is because with the train only animation you have less to visually analyse and it shows how many trains that are running at the given time. Also I feel that by adding the banner bar adds more character to what I am trying to portray because it keeps the animation along the line of the southern rail company by using their company colours. Also I have learned more about after effects because I have found out about the use of expression to create animations of digits.

Compleated Animation

This is my completed animation of the train times, where i have combined six hours of train schedules into a minuet.

Class Crit

After showing the normal passe animation and speed up animation at class crit I got these comment...

• Normal passed one is two long
• its better to use the fast one
• make the outline map solid
• all together very interesting
• add a clock in the corner

Therefor i am going to take in these comments and make changes

Before Class Crit

Due to personal issues i have a extension but i still need to show work at the class crit. So with a number of routes still left to animate i have created an export because enough has been animated for class mates and teaching staff to see what i have created.

Without Track

Considering i am a third of a way through the routes i need to animate i wondered what the animation looks like with no map behind it and i think that it looks interesting. This is because i was inspired by Aaron Koblin and Flight patterns and i think that this is interesting because viewing my animation like this you dont know what the route is so it adds some mystery to the animation,

Creating a Clock

After getting to a point with my animation and deciding that it is symbolizing six hours i have realized that I have not got a clock to show this so i need to find out how to create a animated clock in after effects.

After researching how to do this i found a tutorial with some code here...

Universal Up/Down After Effects Clock

with in this tutorial it shows this variable code

rate = -2;
clockStart = 3604.999;

function padZero(n){
if (n < 10) return "0" + n else return "" + n
}

clockTime = clockStart + rate*(time - inPoint);

if (clockTime < 0){
sign = "-"; clockTime = -clockTime;
}else{
sign = "";
}

t = Math.floor(clockTime);
hr = Math.floor(t/3600);
min = Math.floor((t%3600)/60);
sec = Math.floor(t%60);
ms = clockTime.toFixed(3).substr(-3);
sign + padZero(hr) + ":" + padZero(min) + ":" + padZero(sec) + "." + ms

 and the code works by this analysis

Animating The Wrong Way

Looking back on how i have been animating the routes (which has been one route at at time) i realize that this is taking a long time. So i now plan to go through all the routes and animating the trains once so when it come to doing the whole time table i already have the route animated and all i have to do is adjust the timing of the animated train.

Duplicate Routes

As i have been animating the routes I have realised that even though there are thirty three routes there are a few routes that are within each other, so this shows that there may be loads of routes but there are routes that merge and cross over with each other. Therefore the animation has not have as much as i thought there was.

Time Period To Animate

After spending a week animating train routes I have realised that looking at the time I have to compleate the project i have decided to animate a time period of six hours because by animating twelve hours it would take too long to animate a thirty three routes.

Create An Outline

After showing the PSD of the stations that I plotted in processing processing i thought that it would be best that i create an outline as a guide for when i start animating the model trains, this will be so i have a guideline to keep in

Class Presentation Of Work So Far

After returning to class and presenting my ideas to the class i showed them what point i had got to with my idea. I got good feedback from the class but when i showed my map it was suggested that i keep the outline of the original map so people have something to follow. Therefore i am going to look at the way i have created the map and modify it.

Convert Processing to PSD

After plotting the map in processing I took a still of the processing map and then opened it up in Photoshop and then plotted it again because i have come up with the idea that the stations could appear as the trains go over them the first time.

Design the Train

With my idea being about trains and animation i thought that it would be best to design a small figure to animate instead of dots. Therefore this keeps my animation a long the idea of being based on a train schedule.

Map Plotten In Processing

After completing the edited map I took it into processing and plotted the stations using processing. Now I have completed the map i am going to look at it and see if there is any diffrent ways that i can animate it.

Edited Map

After going through the schedules i found out that there was a number of stations and routes that needed to be taken out. Therefore this is the final outcome map that i need to modify and animate over the top...

Found My Data

After trying to collect all the leaflets of the Southern Rail i resorted to the internet and i have found that all the leaflets are available as pdf's to download. My task now is to go through all of these schedules and compare the stations that they stop at to the map, because after looking at the official map not all the stations on there are owned/run by Southern Rail but are only drop off stations. Therefore once i know the stations that are on the schedule i can remove the ones that are not.

Data Art on BBC Backstage

Search Web

When using the BBC website and you want to find something quick normally you use the search tool similar to google which when you search it gives you a list of results on a page. But with SearchWeb it lets you look for content on the BBC website, by searching terms it then generates a information tree of your searched term containing links to web pages with the BBC homepage at its centre.

By taking the data that is the information you have searched for and presenting it in the form of a tree you can quickly see the connections with the different areas of the BBC that your search has covered. Using a tree structure makes it easier to navigate much easier to follow topics, once again colour is used as a way of showing difference

Public Transport Visualization of North West England

Public Transport Journeys in the North West of England from ItoWorld on Vimeo.

This visualization is showing the public transport in the north west of England. The data was taken from National Public Transport Data Repository (NPTDR), if you look closely at the map you will see that Liverpool is on the left and Manchester right. By looking at the colour coding on the map and the way that it is layed out, I am analysing that the blue are travel on the roads due to the fact that they are much denser on the map. Also that the whites are trains because they are moving at a much faster speed, there is a less ratio of blue to white and that the whites are animated on a fixed path.

Trafic Visulisation

This visualization is the use of data from Waze users (a mobile application providing free turn-by-turn navigation based on the live conditions of the other Waze users) combined with passive traffic data. The pulsating circles are alerts from users reporting hazards, traffic jams, highway patrol, and communicating with one another. While the lines are trips made by Waze users, the way that they work is when they first appear in white the trip is starting, then once the trip has been completed they fade to gray.

This shows that by using a length of time can be a good way to show that the data has changed. Also with this example it shows that colour is a way of showing different categories that you may have within your data. I will take this analysis and see if i can apply it to my idea in some way.

My Plan

Now i have researched how flight patterns was made I have a plan to create my idea.

1. take a image of the map into processing
2. plot the points of the train stations over the map
3. take this into photoshop for some further editing
4. take into after effects
   
5. animate the schedules over the map

What I need to do now is collect all the data that i need and analyse it to see if there is any think that i need to take into consideration for my animation.

How Flight Patterns Was Made

After looking further into flight patterns i found out the different stages that it went through to be created. it was created by collecting the data from the FAA, then plotted the data points in processing and animated in after effects.

Aaron Koblin

Due to the fact that Aaron Koblin has inspired my idea with his Flight Patterns, I though that it is best to look further into his career. Aaron koblin is an artist who is well known in creating art using data and digital technologies.

His work with digital arts did not start until 2004 on his course Design Media Arts MFA program at UCLA when he was given a book on procedural graphics and generative art, which also lead him to processing. But processing is not the only programming language that he learned, he also knows ActionScript, Lingo, C++ and Max/MSP.Koblin works by not only using data but other techniques such as crowdsourcing to create his digital art and visualizations.

Crowdsourcing

Aaron Koblin work uses crowdsourcing to generate data, this is done by using ideas and getting other people to participate. The two pieces Ten Thousand Cents and The Sheep Market are created by using the Amazon's Mechanical Turk distributed labour tool. This is where people are given a tiny piece of a picture to replicate or a drawing of a object to do. But there is no knowledge of the overall task or outcome of what they were drawing.


Data Art

As well as being known for crowdsourcing Aaron Koblin also is known for his data art & visualisations. The best known one is Flight Patterns which is the visualisation of the data that is the paths of air traffic that fly over North America within a 24 hour time span.

Present Idea & Feedback Suggestion

After presenting my idea i have been told to look at it in different ways because at first i way calling my idea data art, but then after looking at my idea in need to not call it data art. But because i am taking data and turning it into something visual i should look at it as a visualization. Therefore i am taking data and visualizing the data in a fun and exciting way as more of an information piece about train scheduling.

Once i presented my idea it was suggested that i look at these websites

http://traintimes.org.uk/map/

http://traintimes.org.uk/map/tube/

http://transport.wspgroup.fi/hklkartta/

http://www.redfunnel.co.uk/ferry-travel/service-status/live-vessel-positions/

After looking at all of these pieces i have analyzed that these are interactive live data maps and that this is not what i am trying to create. Therefore my aim is to create a visualization of the different routes that the southern rail network does.

Writing Idea Document

After thinking about which idea I would like to do I have decided to do the data visualization and looking at the quotes that i can use from the brief i think that it is best to use...

“The cities of the world are concentric, isomorphic, synchronic. Only one exists and you are always in the same one. It's the effect of their permanent revolution, their intense circulation, their instantaneous magnetism.”
Jean Baudrillard

I would then title my project " Synchronisation Of The South " to symbolize the fact that people use trains to travel from town to town as a way of organising their lives. While thinking about my project i have thought how i can start my proposal...

"With human life becoming so fast paced the need for travel is needed a lot more, and with the price in petrol increasing a lot more people are turning to using the train. Therefore for my project I would like to create a piece of data are like that of aaron koblins flight patterns. Only I will be using the data of train times of the southern rail company."

My plan now is to write the rest of the proposal by researching how Aaron Koblins Flight Patterns was made.

Independent Project Set

After being told about the independent project a while ago I have been thinking about what to do for it, and now the project has been set there are two ideas that I would like to do.

Idea 1 - Infographics

With the amount of smart phones and devices out on the market it is having a large impact on the way that people run their lives. Therefore for this project I will take a number of statistics about the devices on the market and create an information motion graphics sequence using these statistics.

I will touch on areas of statistics such as…

• How fast these devices get sold
• The amount of apps that are sold
• The most popular apps that are out there
• The ratio of apps sold to devices sold
• How people feel about the devices

An example would be a sequence like this ...



Like this example I would use images combined with text that it highlighted to show key facts.

Idea 2 - Data Visualization

Looking at data in a visual way is interesting because a large amount of figures and numbers have been turned into something that can be visually understood. So my other idea is to pay homage to a visulisation that i find interesting, and this is Aaron Koblin's Flight Patterns.



The way that I would do this is by collecting the timetables of the Southern Rail, then like Aaron Koblin i would show the routes on a map. But a way I would make it different is by using the map that Southern Rail has created for there passengers.

Conclusion

after completing my project i can look back and see how I did. Looking back at the trouble I had at the start with choosing a brief i am glad that I choose the Taschen brief because I learned more about how magazine are modified and how they work on the I pad. Also i feel that i have learned more on animation with the techniques that i have used. I feel that by creating animated mock-ups i was very prepared when it come to creating the final things.

I have also learned that i do not have the best voice in the for narration and that i over explain things too much. This has made me realized that when writing a audio description that i need to think a lot about timing and the flow.

Overall I feel that i found this project very challenging and i am pleased with my results. i have learned that with audio description a lot of thought is needed with the voice and slow animations make the user feel that the sequence is just dragging on.

Comments From Class Crit

Today i have presented my entries to the class and these are the comments that I got back

• Voice could be edited
• Could use someone else for voice over
• Voice over is too long
• Keep everything and use text to explain actions
• Remove voice over and only use to explain key concepts
• Title screens are cut too short
• Can use images of ipad and tv
• Rationale doesn’t need to be so long
• Remove intro
• Could ad music over the top , try incompetech

Therefore after looking at the comments from classmates my plan is to

• Cut out my voice over
• Use self explanatory titles
• Show my other animations
• Place music over the top
• Cut down the length of my rationale

Sequence Before Class Crit

this is my sequence before class crit after I have cut out the features index, caracel, favourite articles, shopping, text presentation and grid view

Stills Before Crit

Sequence Cut Down

After assessing my my sequence I have realised that it is too long so today I have cut the sequence down to what I think answershe brief best. This has now cut my sequence down to 3 minuets and i have kept a feature in each category.

I will now use my stills to explain four things...

1. supporting rationale
   
2. future capabilities
   
3. task bar
4. portrait and landscape

Final Presentation onto still

With My final presentation now finished (totaling to a duration of near 7 minuets) I have a presentation of all my modifications to show at class crit. Then if anybody thinks its too long or suggestion of what are my best features i can easily cut out animations, and because everything is animated i have no more features to animate so if my presentation gets good feedback i wont need to animate anything on the short amount of time that we have to modify our presentations before submission to D&AD. Therefore the next task is to create the stills with my supporting reasons for my choices and future modfications that could be presented with future tech.

All Pages Animated

Now I have animated all of my modifications for the presentation it is time to place them in the frame of the iPad and animate the gestures over the top. I will do this by using this frame that I have created from a high definition image of the iPad...


Then i will use this hand to symbolize the gestures over the top of the animation..

Scripting My Demonstration

After spending a few days animating my modifications and writing a script for the audio discription to go with the animation i have realized that my presentation may run for at least three minuets. So I am still going to animate all my ideas and have an audio description over the top so i have the option of using them all or just selecting ones to present

Production Planning

Considering today I am starting the final production of my presentation of the way I would modify the Taschen magazine for the growing tablet device market. I have looked at the different modifications that i plan to demonstrate and so i don't confuse the viewer what the modification is about i have place them into categories. These Categories are

• To Start a task bar explaination
• Navigation
• Media Delivery
  
• Functionality
• Personlisation

Taschen Rivals

When researching for Taschen Magazine rivals the closest I could find was a magazine called Azure. This magazine has smiler layout that Taschen but I find that it doesnt use a lot of full page photos like Taschen. Also the articles are a lot briefer for the reader which is probably less daunting for the viewer.

What To Do, What To Do

After showing my full list of functions of the magazine to people I am getting multiple opinions back on how I should present it. One oponion is that i should select my best ideas and only do them and the other is do them all. So i am going to work on the best first and see how long that make the sequence.

Overall I like all my ideas and i am most likely to do them all because some are longer and some are shorter.

How I Will Present My Work

Now I am into production i have fully decided how i am going to present my work. First i am going to make an animated video of how the different functions work and demonstrate how the user experience will look. Then with my stills i am going to demonstrate the future capabilities ideas along with explaination for my choices and the gesture functions.

Deliverables Demo

After having a class with giles we got shown about how to present our word to the D&AD Judges. With my the briefs I thought that it was either or with videos or static images but now I have been show how previous work was submitted I have a much better idea of how I will present my work to D&AD

Time To Go Into Production

Now I have spent a week creating mockups of how I would like my tablet magazine to flow I think it is time to create the finals with more detail in them. I have show the teachers how I would make the tablet magazine to look and I have had positive feedback on the animations and how they look and flow.

Usability Questions

After presenting my ideas to teachers I was given these usability questions to answer on my ideas and I have written my answers in italics...

Utility:

Does the user perceive the functions in the system as useful and fit for the purpose?

Yes with functions such as favorite articles, search, image enlargement, video play back and shopping basket

Usability:

does the user feel that it is easy and efficient to get things done with the system?

Yes because by being able to buy books straight from the magazine there is no swapping between the browser and the app

Aesthetics:

Does the user see the system as visulally attractive?

Yes with the way the pages flow and the image caracals are presented in a visually attractive way.

Does it feel pleasurable in hand?

Yes because the way that the pages would flow would be soft and light flow and dosent just snap from one page to another

Indetification:

can I identify myself with the product?

Yes by having a favorite articles function you can identify what kind of material and subjects you like, also being able to post on social networking you can show

Do I look good when using it?

Yes by looking at a magazine with sophisticated books in it and not doing complex functions you look more like you are reading and not playing a game/app

Simulation:

does the system give me inspiration or WOW experiences?

Yes because with the corner tile that allows you to swap between content page and your current page it makes it more interesting

Value:

Is the system important to me ?

Yes because having these function possible within one app saves time on viewing and passing on to friends. As well as being able to be viewed on a tablet device scave carrying around a magazine

What is its value for me?

The value of the uses is the amount of time saving, interesting and personalization that can be done within the app is a high value

Mock-Up Five : Shift Focus

This is my mockup of a shift focus function where you drag up the title on a large picture and it creates a blur over the large image for the text and more imagery to be placed on.

Mock-up Four : Scrolling Text

This is my mock up of the scrolling text function, I have done this function because in the PDF there is a two page spread where there is a large amount of text so rather than having a small size slab of text there is a scrolling and enlarging function.

Mock-up Three : Image enlargement, Favorite Article & Social Networking

Here is my mock-up of the functions where you can enlarge an image to view in more detail, add an article to a favorite article list and post articles on social networks

Mock-up Two : Shopping

Here is my mock-up of the function of shopping for promoted books with the Taschen app

Mock-up One : Image Caracel & Open Web

Here is my mock-up of a page in the Taschen pdf where I am demonstrating an image caracel and opening the web page from within the app.

Pages & Applied Functions

Here is my list of functions that I am going to

(Pages of provided PDF)

Cover
• Direct link from cover titles to articles

Pg 2 & 3
• Right image full screen
• Shift focus to show text
• Slide show or caracal of the other images

Pg 7
• Right image full screen
• Shift focus to show text
• Slide show or caracal of the other images
• Video link to famous speech

Pg 9
• Scroll column text
• Images placed out down the side

Pg 14
• Scroll column text
• Menu dial link

Pg 17 & 18
• Sofa on one page
• Scrolling text
• Webpage link

Pg 23 & 24
• Tile slide of promotions
• Links to buying what they are promoting

Pg 29
• Redo layout
• Web links
• Radial menu

Pg 34
• Re arrange text and sub text
• Create a caracal or slide show for all the images

Pg 37
• Image slide show for the left
• Scroll text for the right side

Pg 40
• Shopping link for book
• Show the famous films with movie link

Pg 42
• Image slide show
• Sale link to book
• Scrolling text

I am now going to start creating mock-up animations of how I would like these functions to move, flow and look like

PDF Analysis & Function Plan

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...

IPad Visual Research

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.

iPad Research

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.

Ordered Taschen Magazine

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.

Change To Taschen

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.

Mock-Ups

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

IPTV Research

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.

Developed Idea

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

Choosing A Brief

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.

New Briefs: D&AD

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 ...

• TASCHEN - DIGITAL DESIGN
• BBC - INTERACTIVE DESIGN
• DIESEL - ILLUSTRATION

Final Sketch Class Interaction Video

Processing Conclusion

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.