<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">

    <channel>
    
    <title>Rawkes &#45; Captain&#39;s Blog</title>
    <link>http://rawkes.com/</link>
    <description></description>
    <dc:language>en</dc:language>
    <dc:creator>rob.hawkes@gmail.com</dc:creator>
    <dc:rights>Copyright 2010</dc:rights>
    <dc:date>2010-07-18T13:48:31+00:00</dc:date>
    

    <item>
      <title>Version 4 is Coming: Help Make it Awesome</title>
      <link>http://rawkes.com/blog/2010/07/18/version-4-is-coming-help-make-it-awesome</link>
      <guid>http://rawkes.com/blog/2010/07/18/version-4-is-coming-help-make-it-awesome</guid>
      <content:encoded><![CDATA[<p><strong>Update (21 July):</strong> The survey is now closed. Thanks to all 38 of you who filled out the entire thing. I love each and every one of you!</p>

<p>As some of you may be aware, over the last few months I've been thinking about the next version of Rawkes. I've had plenty of wicked ideas but it's come to the stage in my planning where I need some input from you, the people who visit Rawkes and who I care about deeply. All I can say right now is that the focus is going to be on content; specifically on introducing new content and making the current content better.</p>

<p>There isn't a timeframe for the next version of Rawkes just yet, but rest assured it's top on my list of things I need to get done before I go insane.</p>

<p><del datetime="2010-07-21T20:00:00Z">So, I'd much appreciate it if you could take some time out of your busy schedule to answer a short survey about Rawkes and its future</del> <ins>The survey is now over. Thanks to everyone who participated.</ins>. It will help me immensely and the results will benefit you all as a whole.</p>

<p>Watch this space for further updates about version 4. Exciting times are afoot!</p>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-07-18T13:48:31+00:00</dc:date>
    </item>

    <item>
      <title>The Emotional Side of Twitter &#45; My Dissertation Proposal</title>
      <link>http://rawkes.com/blog/2010/05/16/the-emotional-side-of-twitter-my-dissertation-proposal</link>
      <guid>http://rawkes.com/blog/2010/05/16/the-emotional-side-of-twitter-my-dissertation-proposal</guid>
      <content:encoded><![CDATA[<p>Surprisingly I'm nearly two thirds of the way through my degree at Bournemouth University. I don't think I'll ever understand how time seems to melt away while my back is turned. Still, it means the final year is fast approaching, which means it's dissertation time. That's right, the stressful moment in a student's life where they need to wrack their brain for something they've learnt in the last few years that'll make an interesting thesis. Well, it's a little more exciting than that but it certainly feels that way sometimes!</p>

<p>The first step in the life of a dissertation is the proposal, the proof of concept that outlines your thesis and the theories and topics that will be discussed within. At this point it's all a bit up in the air and open to change, although that doesn't make it any less difficult to decide upon. I believe I'm nearly there in regards to my own dissertation proposal and in an act of madness or, I hope, genius, I would like to share my thoughts with you with the aim of bringing to light any glaring issues.</p>

<h2>It's not what you know, it's who you know</h2>

<p>During my time at university I've become increasingly interested in network theory. From crowdsourcing to simple communication, I'm fascinated by the psychology behind their structure, and amazed at the power they wield. There are many other topics I'm interested in, like the issues surrounding ubiquitous computing, but it's networks that I always come back to time and time again so it would be a mistake not to include them in some way.</p>

<p>It would be wrong to try and tackle the entire concept of networks in a single dissertation so I plan to refine my definition of networks, at least in relation to my research. The dramatic rise of Twitter as a tool for social communication, as well as it's open data and API, makes it a prime specimen for analysis. I may expand my outlook after the initial research, but I believe Twitter is an extremely potent example of how networks work and illustrates beautifully the ways in which they can be used.</p>

<h2>It's an emotional business</h2>

<p>At the core of my dissertation proposal are the concepts of emotion and sentimentality, in particular their effect on behaviour. When coupled with networks this becomes a rich area of research. For example;</p>

<ul>
<li>Are sentiments and emotions reciprocated across networks?</li>
<li>Are the actions of one's self defined by the perceptions of others in the network?</li>
<li>Can emotion and sentiment be predicted based on that of the network as a whole?</li>
<li>In what way is individual behaviour affected by the emotion and sentiment of a network?</li>
<li>Does the emotion and behaviour on social networks reflect that of the offline world?</li>
</ul>

<p>Those questions alone fascinate me, and I'm sure there are plenty of other insights that will arise from this area once I get started. Needless to say, my hobbyist interest in psychology and behaviour will drive my passion in this area of research.</p>

<h2>Measuring Christmas spirit</h2>

<p>The main aim of the dissertation is to expand from my work with the <a href="http://rawkes.com/blog/2009/12/01/my-involvement-in-redwebs-spirit-of-christmas-2009">Redweb spirit of christmas project</a>, a project which analysed in a basic way the emotion of individual tweets in relation to a particular subject. My plan is to dig a little deeper and find out if the widespread analysis of such information on social networks can be used to predict behaviours. One such example could be in the ability to use this information to gauge public opinion on particular issues. Is the opinion expressed on a social network comparable to that of the offline world?</p>

<h2>Bringing in the big guns</h2>

<p>A dissertation is useless without academic foundations and solid support from existing theories and research. Fortunately there is a wide variety of work out there today that relate to individual areas of what I hope to research. Here are just a few;</p>

<ul>
<li><a href="http://en.wikipedia.org/wiki/Erving_Goffman#The_Presentation_of_Self_in_Everyday_Life">Erving Goffman and his presentation of self</a></li>
<li><a href="http://en.wikipedia.org/wiki/Social_comparison_theory">Leon Festinger's social comparison theory</a></li>
<li><a href="http://en.wikipedia.org/wiki/Social_network_analysis">Social network analysis</a></li>
</ul>

<p>I hope that during my reading during the summer I will uncover many more theorists and concepts that relate to my thesis.</p>

<h2>My question to you is this</h2>

<p>I'm settled on the core focus of my dissertation proposal but I would very much like to hear about concerns or ideas that may enhance my research. Please get in touch with me via the comments or <a href="http://twitter.com/robhawkes">my Twitter account</a> and I will answer each and every one of you. I'd also appreciate any pieces of advice from anyone who's already completed a dissertation.</p>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-05-16T20:10:51+00:00</dc:date>
    </item>

    <item>
      <title>Barcamp Bournemouth and HTML5 Canvas</title>
      <link>http://rawkes.com/blog/2010/04/11/barcamp-bournemouth-and-html5-canvas</link>
      <guid>http://rawkes.com/blog/2010/04/11/barcamp-bournemouth-and-html5-canvas</guid>
      <content:encoded><![CDATA[<p>On a gloriously sunny Saturday I headed down to Bournemouth University to take part in my first barcamp experience. When walking into the event a whole mixture of feelings were rolling around inside of me. I was excited at being around like-minded people, curious at what to expect, and also nervous knowing that I'll be doing my first bit of proper public speaking later in the day.</p>

<p>The whole concept of an un-conference was new to me so I really had no idea what to expect. How many people would be there? Are they all going to be professional industry folk? Will there be any other students? My past experience has been with much bigger and more organised conferences like dConstruct. Most definitely the biggest difference is that absolutely anyone can walk up to the schedule and add their 45 minute presentation or activity. The cool thing about this is that everyone is free to have a say and talk about what they want. On the flip-side, however, there is a clear element of competition between speakers about positioning of their talks so they don't clash with other potentially popular talks. I wasn't too worried about this myself, seeing as it was my first talk, but I know that there is a certain unconscious aspect that a bigger audience equals a more popular talk.</p>

<p>My nerves and excitement hit fever-pitch at 3:15pm when it was my turn to present. I'd been preparing my talk on HTML5 canvas for the last few days and hadn't practised it. Luckily, after some initial technical difficulties, the talk went well and even encouraged a few questions at the end. The highlight of my talk was when a young fellow in the front row fell asleep. I now know why they call it the graveyard shift. If you're interested in seeing why I believe HTML5 canvas is the future of graphics on the Web, then have a flick through my slides which I've included below.</p>

<figure>
<object width="620" height="500"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=barcampbournemouthcanvaskeynote-100410160445-phpapp02&amp;stripped_title=html5-canvas-the-future-of-graphics-on-the-web" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=barcampbournemouthcanvaskeynote-100410160445-phpapp02&amp;stripped_title=html5-canvas-the-future-of-graphics-on-the-web" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="620" height="500"></embed></object>
<p class="legend">HTML5 Canvas: The Future of Graphics on the Web</p>
</figure>

<p>Still, the day was great fun and I enjoyed all the talks that I attended. Here is a quick overview of my favourites:</p>

<ul>
<li><a href="http://twitter.com/poor_ginger" title="Angela Barnard's Twitter profile">Angela Barnard</a>'s plea to recognise the importance of content strategy. I found this particularly interesting as I'm currently battling with the content for Rawkes and how to organise and approach it in future versions.</li>
<li><a href="http://twitter.com/phishtitz" title="David Burton's Twitter profile">David Burton</a>'s humorous and thought-provoking <a href="http://www.blurredfocus.co.uk/wordpress/?p=1228">overview of creativity and his 10 tips for better brainstorming</a>. He also highlighted how different people have different traits when it comes to being creative. Personally I see myself as a fact-finder with a little bit of organising thrown in for good measure.</li>
<li><a href="http://twitter.com/randomapricot" title="Damian Proctor's Twitter profile">Damian Proctor</a>'s beautiful presentation on design principles. It included a wide variety of examples which highlighted his points perfectly.</li>
</ul>

<p>I've no idea if they would but I'd definitely like to see all three do their presentations again in front of my course at university. Not only were the presentations amazing, but the fact they come from people involved in the industry will inspire a lot of the students.</p>

<p>Overall, it was a fun day and I'll definitely be attending any future barcamp events in the area. I would advise anyone else who wants to get involved in the industry to do the same.</p>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-04-11T11:43:36+00:00</dc:date>
    </item>

    <item>
      <title>The Ways in Which Mobile Connectivity Transforms and Extends our Relationship with Media</title>
      <link>http://rawkes.com/blog/2010/03/22/ways-in-which-mobile-connectivity-transforms-our-relationship-with-media</link>
      <guid>http://rawkes.com/blog/2010/03/22/ways-in-which-mobile-connectivity-transforms-our-relationship-with-media</guid>
      <content:encoded><![CDATA[<p>A lot of my time at university is spent researching, contemplating and writing essays. These pieces of writing are usually a couple thousand words long and involve a lot of work. This got me thinking that it would be a shame for them to only be seen by lecturers and myself. Why not put them on the blog, say what mark I got, the feedback I received from my lecturers, and let the public give their own feedback? I hope this will become a series of entries on here, either stemming from or consisting of my essays and research partaken at Bournemouth University.</p>

<p>This essay in particular looks at the ways in which the phenomenal growth of mobile technology, particularly mobile phones, has transformed the way we consume and produce media. I received a First (71%) with generally good feedback. The only suggestion being that I could extend the piece by talking about user generated content and what Marshall McLuhan proclaims as the user being the content.</p>

<hr>

<h2>In what ways does the growth of mobile connectivity transform or extend our relationship with media?</h2>

<p>In 2009 there were over 1.73 billion users of the Internet (Pingdom 2010), nearly 5 times the amount of users back in 2000 (MMG 2009). 2009 also saw 3.4 billion unique mobile phone users (TomiAhonen 2010), over 3 times the amount of users in 2000 (ITU 2008). There are now double the amount of people using mobile phones as there are using the Internet. Improvements in cellular technology allow mobile phones to connect to the Internet in the same way as computers. The introduction of other mobile technologies are offering even more ways to access the Internet without the physical constraint of wires. To what end does the incredible growth of mobile connectivity change the way we use, consume and produce media?</p>

<p>To understand the growth of mobile connectivity we must first highlight the key points in its history.</p>

<p>The predecessors of today’s mobile phones were introduced in the 1980s (Kohonen 2003, p.1). These analog services, known as first generation (1G), allow only voice communication (Gandal et al. 2003, p.326). Improvements in cellular technology culminated in second generation (2G) digital services which, coupled with division of the radio spectrum, allow more people to use the network (Korhonen 2003, pg.2). These digital signals enabled data to be transferred through the network, albeit at extremely slow speeds (Korhonen 2003, p.5), starting with the short message service (SMS) in 1995 (GSM Association 2010). By 2003, incremental upgrades, like GPRS and EDGE (GSM Association) meant data speeds were 26 times faster (SSC 2006), but still still much lower than wired broadband. Korhonen (2003, p.6) highlights that packet switching, the breaking down of data into small chunks, meant Internet use on mobile phones was now charged by the amount of data used. This was an important step in cellular access to the Internet, although the relatively low speeds restricted the type of services that were accessible.</p>

<p>Today’s cellular networks are third generation (3G) and offer dramatic increases in speed, comparable to that of low-end wired broadband (SSC 2006). Over 92% of the UK population are within range of 3G services, a figure that jumps to 100% of the population in Japan (Ofcom 2009).</p>

<p>Mobile phone hardware gets smaller and more powerful as improvements are made to cellular networks. Both the hardware and software improvements change the way in which mobile phones are used to consume and produce media. TomiAhonen (2010) estimate that 29% of phones are 3G capable, 95% having some sort of Web browser, and 75% offering a camera. All of these features, now common-place, are encouraging user generated content (UGC) and the consumption of high quality media. Over 2009 alone, mobile data traffic increased 160% because of this to the equivalent of 23 million DVDs (RRW 2010).</p>

<p>Brown (2002, p.5) identifies that the interest in mobile phones comes from its core features; that it is “small, portable, constantly on, and potentially constantly connected”. These features of mobile technology are allowing us to interact in more meaningful ways. As Baron states, “[…] it’s far simpler […] to communicate with people not physically present than at any time in human history” (2008, p.4). What is interesting about this view is that it highlights the ability of mobile technology to break down the concept of physicality. Baron has highlighted what Negroponte calls the “post-information age”, one that will “remove the limitations of geography” (1995, p.165). </p>

<p>The post-information age corresponds to McLuhan’s theory that through digital technology “[…] we have extended our central nervous system itself […], abolishing both space and time […]” (2001, p.3). The general idea is that through the extension of our senses, telephones for hearing and cameras for sight, digital culture has contracted the world into nothing more than a village. Because we can instantly hear and see things from the other side of the planet, the world in itself has become a smaller place to inhabit.</p>

<p>This smaller world is enhanced by the increasing popularity and domestication of mobile technology. As Ling (2004, p.177) puts it:</p>

<blockquote>
  <p>[…] mobile communication provides us with ubiquitous contact […]. Rather than requiring us to be at a specific geographical location, mobile communication means that we can communicate and have access to information wherever we are.</p>
</blockquote>

<p>What Ling describes is a world where both digital information and the physical medium of accessing the information are free from geographic constraints. Not only can you access information from across the world, you can do so while walking down the street in practically any urban location.</p>

<p>Brum (2009) refers to the ubiquitous access to data as an increase of urban bandwidth:</p>

<blockquote>
  <p>The bandwidth of urban experience has increased. The ancient ways are still there: the way a place looks, the neighbours we wave at and the hands we shake. But now, there is an electronic conversation overlaid on top of all that: tweets […], neighbourhood online message boards, detailed mobile electronic maps, and nascent applications that broadcast your location to your friends</p>
</blockquote>

<p>In modern society the physicality of the world around us has not changed. What has changed is the stream of digital information flying over our heads. Some of this information is tagged with a location, a technique called geo-tagging. The beauty of geo-tagging is that information can be targeted depending on where you are. Through GPS, mobile devices are smart enough to know where they are in the physical world. Knowing where you are means a mobile device can pull information from the local area, wether that is the nearest coffee shop, tweets, photos, news stories, or otherwise. All these location-based services prevent us from feeling lost, even in a new city.</p>

<blockquote>
  <p>[…] To actually arrive somewhere is no longer surprising in the way it once was” (Cooper 2002, p.26)</p>
</blockquote>

<p>Sharing geographic information is good in theory, but the reality is that potentially anyone can get access to that data. This has been the case with location-based service Foursquare. The purpose of the service is to check in at landmarks and specific locations, allowing you to see who else is around you. Inherently, the service highlights the locations you are not currently at. A website called “Please Rob Me”, created to highlight this relaxed attitude to location data, identified users of Foursquare who were announcing that they weren’t at home. None of this information was private, and most people are out of the house from 9 to 5 anyway. However, it raises an important issue about the kind of information that is being given without question. Information that can identify people and and the places they have been. Tufekci ([no date] cited Blum 2009) comments on the fact that anyone could be listening in and watching your every move; “as we leave behind the 20th century, it is almost as if we have come full circle back to the village where everyone potentially knows your business”.</p>

<p>Communication is a situation where the sharing of location data is important. For example, Cooper (2002, p.26) illustrates the common utterance, “I’m on the train”. It is not the phrase that is important, it is the meaning behind it. As Cooper continues:</p>

<blockquote>
  <p>[…] Information on whereabouts often serves to establish the grounds for the conversation in terms of constraints on and sensitivities with regard to possible topic, privacy, duration and so forth</p>
</blockquote>

<p>What this means is that although you can contact anyone, anytime, anyplace, the physical location of the conversation will determine what can and cannot be said, and for how long. An extreme example would be a conversation about the intimate goings on of someone’s love life, a conversation that wouldn’t seem out of place in the car or walking down the street. However, the same conversation would be deemed inappropriate if acted out in a train carriage. The physical size and proximity to other people dictates this, along with basic social and cultural norms.</p>

<p>The global nature of our actions mean we must deal with the consequences, we can no longer be disassociated from them. Whether broadcasting our location or talking on the train, our actions and their respective reactions occur almost simultaneously (McLuhan 2001, p.4). No more is this the case than with UGC and citizen journalism, where media can be both produced by one member of the public, and consumed by another within seconds of each other.</p>

<p>Mobile connectivity gives rise to citizen journalism because of "the spatial and temporal ubiquity of basic tools for observing and commenting on the world we inhabit" (Benkler 2006, p.219). The basic tools needed are built in to the majority of mobile phones, that is SMS, camera functionality and Internet access (TomiAhonen 2010). Gould (2006 cited Mobile Life 2006) states, “give someone a mobile phone and you give them a voice. Give them a voice and you offer the opportunity of empowerment”. It is incredibly difficult to censor and prevent citizen journalism when done via mobile phones. It is simply too easy to produce and distribute content to a large number of people.</p>

<p>In 2001 the president of the Philippines lost power after 4 days of intense protests (Leadbeater 2009, p.186). The interesting part about this was the integral part mobile communication played in organisation the protests. "Tens of thousands of Philippinos converged on Epifanio de los Santas Avenues […] within an hour of the first text message volleys" (Rheingold 2002, p.157-8), within days that number reached over a million. Mobile had well and truly been proven as a medium for organisation large quantities of people.</p>

<p>As Gould (2006 cited Mobile Life) states:</p>

<blockquote>
  <p>There is now virtually no event that can happen on the planet that cannot and will not be recorded by mobile phones and then transmitted to the world.</p>
</blockquote>

<p>One defining example of this was when a plane ditched into the Hudson River in 2009. Janis Krums, a passenger on a ferry crossing the Hudson, sent a pictures of the downed plane on Twitter before media outlets had even caught wind of the original event. His simple words, “There's a plane in the Hudson. I'm on the ferry going to pick up the people.” (Krums 2009), spread across the Internet in an instant. This is still well before any mass-media organisation had published anything. None of this would have been possible without a mobile phone.</p>

<p>Not all citizen journalism is so fresh and believable. Countless photos and videos were captured by passers-by and passengers during the London bombings in 2005. What is interesting about the event is how traditional mass-media utilised the coverage taken from mobile phones. Gordon (2007) outlines the situation:</p>

<blockquote>
  <p>The media and press asked for eyewitnesses to come forward and used images taken on mobile phones to supplement - and in their terms ‘enhance’ - their coverage of the event. […] However, these images and videos sent to media organisations were then subject to the editorial process.</p>
</blockquote>

<p>Whilst content from citizens was used in mass-media broadcasts, undoubtably a good thing, the media companies subjected the content to a traditional editorial process. What this meant is that although the content was from real-life members of the public, it destroyed the extra credibility such content enjoys for being outside the realm of traditional media.</p>

<p>This is not the only negative side to citizen journalism. One of the most debilitating factors is that citizen journalism is only available to those that have the means to do so. A digital divide has arisen between the haves and have-nots of society. Those who have mobile devices are able to easily report events. Whilst those who have not, either because of their countries infrastructure, or for economic reasons, cannot. This places an inherent level of censorship on what content makes it into the global village.</p>

<p>One solution to the digital divide amongst comes from wireless technologies. Benkler (2006, p.402) identifies the problem, particularly in developed countries, as the cable connecting homes directly to the network providing the Internet. This last mile often inhibits people from getting any connection to the Internet, simply because the geography makes laying cables economically unwise. The speed and range increases of WiFi place it as a legitimate replacement for traditional wired connections, a viewpoint Rheingold is quite clear about. “Wireless is undoubtedly the best way to bring online the majority of the world's population” (2002, p.135).</p>

<p>It is obvious that mobile connectivity has experienced extraordinary growth in the past decade, in close proximity to that of the Internet. Through this growth, digital culture has removed the traditional restraints of geographic location. Mobile connectivity has added an extra layer of interaction that allows media to be consumed from anywhere in the world, at any location we desire. Coupled with the rise in urban living, mobile devices are improving the way we interact with the environment and people around us. Mobile phones have lowered the barrier for producing and sharing content across the globe. This mobile content has proven to be successful in organising political movements and large quantities of people. We are undoubtably in the age of mobile, albeit at an early stage. The maturity of this age will be integral in defining our modern relationship with media.</p>

<h2>References</h2>

<ul>
<li>Baron, N.S., 2008. Always on: language in an online and mobile world. New York: Oxford University Press.</li>
<li>Benkler, Y., 2006. The Wealth of Networks: How Social Production Transforms Markets and Freedom. Yale University Press.</li>
<li>Brown, B., 2002. Studying the Use of Mobile Technology. In: Brown, B., Green, N. &amp; Harper, R., eds. Wireless world: social and interactional aspects of the mobile age. London: Springer, pp. 3-15.</li>
<li>Brum, A 2009, A friendly eye: social networking has made cities manageable, Wired UK, November 2009, p. 113.</li>
<li>Cooper, G., 2002. The mutable mobile: social theory in the wireless world. In: Brown, B., Green, N. &amp; Harper, R., eds. Wireless world: social and interactional aspects of the mobile age. London: Springer, pp. 19-31.</li>
<li>Gandal, N., Salant, D. &amp; Waverman, L., 2003. Standards in wireless telephone networks. Telecommunications Policy, 27(5-6), 325-32.</li>
<li>Gordon, J., 2007. The mobile phone and the public sphere: Mobile phone usage in three critical situations. Convergence, 13(3), p. 307.</li>
<li>GSM Association, 2010. Brief History of GSM &amp; the GSMA. London: GSM Association. Available from: <a href="http://www.gsmworld.com/about-us/history.htm">http://www.gsmworld.com/about-us/history.htm</a> [Accessed February 20, 2010].</li>
<li>International Telecommunication Union, 2008. Worldwide mobile cellular subscribers to reach 4 billion mark late 2008. Geneva: International Telecommunication Union. Available from: <a href="http://www.itu.int/newsroom/press_releases/2008/29.html">http://www.itu.int/newsroom/press_releases/2008/29.html</a> [Accessed February 20, 2010].</li>
<li>Korhonen, J., 2003. Introduction to 3G mobile communications. Artech House Publishers.</li>
<li>Krums, J., 2009. There's a plane in the Hudson. Twitter. Available from: <a href="http://twitter.com/jkrums/status/1121915133">http://twitter.com/jkrums/status/1121915133</a> [Accessed February 23, 2010].</li>
<li>Leadbeater, C., 2009. We-think. 2nd ed. London: Profile.</li>
<li>Ling, R.S., 2004. The mobile connection: The cell phone's impact on society. San Francisco: Morgan Kaufmann Pub.</li>
<li>McLuhan, M., 2001. Understanding media: the extensions of man. London: Routledge Classics.</li>
<li>Miniwatts Marketing Group, 2009. Internet World Stats. Colombia: Miniwatts Marketing Group. Available from: <a href="http://www.internetworldstats.com/stats.htm">http://www.internetworldstats.com/stats.htm</a> [Accessed February 20, 2010].</li>
<li>Mobile Life, 2006. The Mobile Life Report 2006: How mobile phones change the way we live. UK: Mobile Life.</li>
<li>Negroponte, N., 1995. Being digital. New York: Alfred A. Knopf.</li>
<li>Ofcom, 2009. Mostly Mobile. London: Ofcom. Available from: <a href="http://www.ofcom.org.uk/consult/condocs/msa/msa.pdf">http://www.ofcom.org.uk/consult/condocs/msa/msa.pdf</a> [Accessed February 15, 2010].</li>
<li>Perez, S., 2010. Mobile Data Traffic Surge: 40 Exabytes by 2014. Read Write Web. Available from: <a href="http://www.readwriteweb.com/archives/mobile_data_traffic_surge_40_exabytes_by_2014.php">http://www.readwriteweb.com/archives/mobile<em>data</em>traffic<em>surge</em>40<em>exabytes</em>by_2014.php</a> [Accessed February 23, 2010].</li>
<li>Pingdom, 2010. Internet 2009 in numbers. Sweeden: Pingdom. Available from: <a href="http://royal.pingdom.com/2010/01/22/internet-2009-in-numbers/">http://royal.pingdom.com/2010/01/22/internet-2009-in-numbers/</a> [Accessed February 20, 2010].</li>
<li>Rheingold, H., 2003. Smart mobs: The next social revolution. MA: Basic Books.</li>
<li>SCMAD Certfication Center, 2006. J2ME Glossary. SCMAD Certfication Center. Available from: <a href="http://www.scmad.com/j2me-glossary1.php">http://www.scmad.com/j2me-glossary1.php</a> [Accessed February 20, 2010].</li>
<li>TomiAhonen, 2010. TomiAhonen Cheat Sheet: Mobile Industry Numbers 2010. US: TomiAhonen.</li>
</ul>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-03-22T23:07:40+00:00</dc:date>
    </item>

    <item>
      <title>User Interfacing the Augmented Reality Game</title>
      <link>http://rawkes.com/blog/2010/03/17/user-interfacing-the-augmented-reality-game</link>
      <guid>http://rawkes.com/blog/2010/03/17/user-interfacing-the-augmented-reality-game</guid>
      <content:encoded><![CDATA[<p>Major progress has been made on the game since you last saw it. There is now a basic user interface that wraps the entire experience; allowing you to to choose levels, pause the game, and reset the current level.</p>

<p>You'll also notice some improvements to the way the game board and objects are added.</p>

<figure>
<object width="620" height="349"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10216530&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00adef&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10216530&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00adef&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="620" height="349"></embed></object>
</figure>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-03-17T09:08:42+00:00</dc:date>
    </item>

    <item>
      <title>ExplicitWeb: A Podcast from the Front Lines of Web Development</title>
      <link>http://rawkes.com/blog/2010/03/10/explicitweb-a-podcast-from-the-front-lines-of-web-development</link>
      <guid>http://rawkes.com/blog/2010/03/10/explicitweb-a-podcast-from-the-front-lines-of-web-development</guid>
      <content:encoded><![CDATA[<p>Over the last few weeks <a href="http://john.onolan.org/">John O'Nolan</a>, <a href="http://erisds.co.uk">Hannah</a> and myself have been beavering away creating a brand new web design and development podcast. We call it <a href="http://explicitweb.co.uk/">ExplicitWeb</a> and its purpose is to deliver interesting discussions and helpful tips about the industry with some banter along the way.</p>

<p>The ExplicitWeb name has been chosen for a couple of reasons but mainly because we don't want to censor any little mistakes or swearing. We simply felt the censorship restraints on the way we speak would make it feel unnatural.</p>

<p>After a few false starts we managed to record the first episode last night entitled, 'Local Development, Version Control, Designing in the Browser and Killing Kittens'. There are a few mistakes but overall it went pretty well. I urge you to <a href="http://explicitweb.co.uk/post/437887293/1">have a listen on the ExplicitWeb blog</a>, <a href="http://twitter.com/ExplicitWeb">follow us on Twitter</a> and <a href="http://www.itunes.com/podcast?id=361101338" title="subscribe to the iTunes feed">subscribe to the ExplicitWeb iTunes feed</a>.</p>

<p>I hope you enjoy it and I'd love to hear what you think.</p>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-03-10T09:51:34+00:00</dc:date>
    </item>

    <item>
      <title>Basic Gameplay Features Added to Augmented Reality Game</title>
      <link>http://rawkes.com/blog/2010/03/07/basic-gameplay-features-added-to-augmented-reality-game</link>
      <guid>http://rawkes.com/blog/2010/03/07/basic-gameplay-features-added-to-augmented-reality-game</guid>
      <content:encoded><![CDATA[<p>There has been a lot of progress since the last update. Most noticeable is the addition of gameplay features; objects you have to avoid, basic character health, and win/lose scenarios.</p>

<figure>
<object width="620" height="349"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9977439&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00adef&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=9977439&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00adef&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="620" height="349"></embed></object>
</figure>

<p>As you can see, 3D models are yet to be added to the game. For now, placeholder objects are being utilised. The objects you can currently see are: walls [blue], fire [red], wasabi [green], and the finish line [orange].</p>

<p>Different objects have a different effect on the character, ranging from a change in movement to outright death. Further objects will be added to the game as well as refinement of the interaction with current objects.</p>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-03-07T13:00:44+00:00</dc:date>
    </item>

    <item>
      <title>Stop Highlighting the Gender Difference</title>
      <link>http://rawkes.com/blog/2010/02/13/stop-highlighting-the-gender-difference</link>
      <guid>http://rawkes.com/blog/2010/02/13/stop-highlighting-the-gender-difference</guid>
      <content:encoded><![CDATA[<p>Boagworld celebrated its 200th show yesterday. A live podcast was put on throughout the day to commemorate this event. Many members of the Web industry took part including the likes of Andy Clarke and Rachel Andrews, both respected professionals.</p>

<p>Unfortunately, activities in a live chat-room for the event have overshadowed the otherwise successful day. These events came in the form of sexist comments against some of the female guests on the show. The comments have sparked quite <a href="http://www.sazzy.co.uk/2010/02/dont-you-dare/">intense retaliation</a> from <a href="http://www.rachelandrew.co.uk/archives/2010/02/13/women-and-the-backchannel/">those involved</a> and the Web community at large.</p>

<p>I would like to state right now that the actions of some people in the chat-room were childish, unwarranted, and something I don’t condone in any way. However, this whole situation is very interesting, both with the commenters and with the overall response to the comments. There is much to learn from these events.</p>

<p>This issue has been discussed at length on Twitter and the general consensus is that these comments manifested simply because the chat-room was anonymous. Because there was no physical tie between comments and real people, it meant that anything could be said without fear of attribution. It was a free-for-all where the strongest feelings could be vented with ease, wether they are warranted or not.</p>

<p>An unfortunate aspect of crowds is that as soon as one feeling is made public, anyone else with those feelings feels better about joining in; becoming one of the mob. As this mob grows the feelings get stronger and stronger until they lose all focus and erupt into personal attacks. This is bad.</p>

<p>On the flip-side, most of these comments were undoubtably made by young and immature people who have a bad case of jealousy. Or at least you’d hope that is the case! The reason this didn’t happen to any of the male guests is that the majority of this industry, and in turn the chat-room, is male. I would bet money on 100% of the bad comments coming from males. But why the attack on females? Well, because when you’re jealous the best way to feel better is bring the other person down, at least in your own mind. The only way they could do that was by attacking the biggest difference; gender. I'm by no means an expert of psychology, but this is all pretty obvious stuff.</p>

<p>I'd like to stress again that I'm not condoning what happened, I simply believe a little understanding of the issue will prevent the community coming to knee-jerk conclusions. It seems to me that the response to the comments has turned into a defensive backlash about how woman deserve to be in the Web industry and how hard they’ve worked for it. Why has such a small number of anonymous comments required this much defending? Especially if the majority of the industry supports equal rights.</p>

<p>I can’t see equality being reached if there is a backlash every time a comment is made seemingly against said equality. If you highlight the difference then the difference will persist. It's a never-ending loop that must be broken somewhere along the line. Of course, this post is part of that loop, but I feel it's place is warranted by highlighting the need to break said loop.</p>

<p>In conclusion, none of this would’ve happened if users of the chat-room were required to register, attributing a real name and email in the process. A sense of responsibility results once a physical link is made between the user and his comments. The user must think carefully about the impact of their words before joining the crowd. I believe a majority, if not all, of the comments yesterday would not have happened if this simple requirement was in place.</p>
]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-02-13T14:36:10+00:00</dc:date>
    </item>

    <item>
      <title>The Virtual Revolution</title>
      <link>http://rawkes.com/blog/2010/02/06/the-virtual-revolution</link>
      <guid>http://rawkes.com/blog/2010/02/06/the-virtual-revolution</guid>
      <content:encoded><![CDATA[<p>As a student of interactive media I have an inherent, sometimes obsessive interest in the history and theory of the web. To my absolute delight, the BBC is currently airing a documentary series covering the last 20 years of the web and, as they put it, exploring how it's reshaping almost every aspect of our lives. It's fantastic stuff I tell you!</p>

<p>The <a href="http://www.bbc.co.uk/programmes/b00qn37q">first episode of The Virtual Revolution</a> dropped last Saturday and gave an informative overview into the Internet's history and the resulting issues with it's fundamental feature, openness.</p>

<p>This evening brought with it <a href="http://www.bbc.co.uk/programmes/b00qsbvv">episode 2</a> which focussed on how the freedom given by the open Internet can prove damaging, and how some entities are trying to restrict that freedom. The result is an online battle between sophisticated defence mechanisms [the censorship], users [the free people], and technology providing a means of bypassing said defences. Censorship is an area of the web that is very young and one that will prove increasingly important to everyone who uses it, regardless of location.</p>

<p>So far the series has been insightful but most importantly, because of it's airtime on BBC 2, it is allowing the general public to learn about the hidden issues that affect them in so many ways. Unfortunately the web and the technology behind it is still seen as something that only geeks are allowed to know about. I hope this series will change that.</p>

<p>There has already been quite heated debate on social networks about the topics covered, and this is a good thing. Previously such topics would be unknown to most and left alone to do as they wish. Maybe this new audience will be moved to do something about the most important issues, maybe not. What matters is that the magic of the web is being laid bare in format that all can understand.</p>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-02-06T23:00:09+00:00</dc:date>
    </item>

    <item>
      <title>Tracking Multiple Augmented Reality Markers with FLARManager and Papervision</title>
      <link>http://rawkes.com/blog/2010/01/26/tracking-multiple-augmented-reality-markers-flarmanager-and-papervision</link>
      <guid>http://rawkes.com/blog/2010/01/26/tracking-multiple-augmented-reality-markers-flarmanager-and-papervision</guid>
      <content:encoded><![CDATA[<p>A lucky few already know that I'm currently working on an augmented reality (AR) project, due to be complete in March this year. The project is that of a game which revolves around physical interaction via AR. However, I'll bore you with the details another day as right now we're here for something else.</p>

<p>If you haven't already seen what we'll be making today then have a quick gander at this video I made and all will become clear.</p>

<figure>
    <object width="620" height="466"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8214397&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00adef&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=8214397&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00adef&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="620" height="466"></embed></object>
</figure>

<h2>Prerequisites</h2>

<p>This isn't a tutorial for beginners to AR or ActionScript so I'd advise you read up elsewhere and get comfortable with the basics before you tackle multiple markers.</p>

<p>Ideally you need to:</p>

<ul>
<li>Have a basic understanding of object oriented programming</li>
<li>Be comfortable working with ActionScript</li>
</ul>

<p>I'm using <a href="http://labs.adobe.com/technologies/FlashBuilder4/">Flash Builder</a> as my IDE of choice for this tutorial but feel free to use whatever you're most comfortable in. I've included a version in <a href="#download">the source files</a> that can be developed in Flash CS4, it's separate because you need to tweak a couple of files to get it working.</p>

<p>As well as basic AR tracking we'll learn how to add some Papervision3D objects into the fray.</p>

<p>We'll be using the following external resources:</p>

<ul>
<li><a href="http://words.transmote.com/wp/flarmanager/">FLARManager</a> &mdash; From which a lot of code for this tutorial comes from</li>
<li><a href="http://blog.papervision3D.org/">Papervision3D</a></li>
</ul>

<h2>Solving the problem</h2>

<p>One of the most difficult issues I encountered during early development with AR is how to track multiple markers at once. Thanks to frameworks like FLARToolkit and FLARManager, tracking a single marker is relatively simple as you can code knowing that you'll only ever need to deal with one marker at a time. Your application inherits higher level of complexity when you want to reliably handle and track a dynamic amount of markers. Fortunately, if I do my job right, it will become dead easy after you've read this tutorial.</p>

<p>The solution lies in finding a way to store references of all the markers in view, or in use. From here we can refer to the stored reference whenever we want to update a marker. If we want to remove a marker from the system all we need to do is remove the reference, amongst a couple other things, but we'll get onto the nitty gritty further on. Enter the <a href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/utils/Dictionary.html">ActionScript Dictionary class</a>.</p>

<p>Before we continue, let's take a moment to understand what the Dictionary class does and why we want to use it over common functionality like arrays and objects.</p>

<p>In brief, an array in ActionScript is only useful if you want numerical keys to reference the stored data. Although an array <em>can</em> use named keys in ActionScript, that is strings as keys, you wouldn't be able to utilise any of the built-in array functions. Objects on the other hand are built to use string keys which allow for more meaningful naming of properties. Dictionary objects are useful because they use objects themselves as keys. Besides this, the most important thing to understand about Dictionary objects are that they use strict equality [<code>===</code>] when referencing a key that is an object. The killer feature of the Dictionary object is that you can use the keys as you would a normal object, referencing properties and the like.</p>

<p>It may sound confusing, and it is, but there is a difference between Objects and Dictionaries. You could achieve the same functionality within this tutorial using Objects but I'll be using Dictionaries because of the strict referencing and the fact we can store objects within the keys. If you're still lost I'd advise reading through <a href="http://www.gskinner.com/blog/archives/2006/07/as3_dictionary.html">this article on the Dictionary class by Grant Skinner</a>.</p>

<h2>Setting up the project</h2>

<p>The first thing we need to do is set up the core Flash Builder project. Now, we could do this manually by creating a new project and importing all the relevant files and packages into the right places, but we won't be doing that. Instead I've already created a basic project and we'll be importing that to save some time, you'll need to <a href="#download">download and unpack the source files</a> in preparation.</p>

<p>In Flash Builder, or your IDE of choice, you need to go to <strong>File</strong>&rarr;<strong>Import</strong>&rarr;<strong>Flash Builder Project&hellip;</strong>, or likewise.</p>

<figure>
    <img src="http://rawkes.com/media/tracking-multiple-augmented-reality-markers-flarmanager-and-papervision/dialogue-window.jpg" width="620" height="465" alt="Flash Builder Project dialogue window">
    <p class="legend">Flash Builder Project dialogue window</p>
</figure>

<p>A dialogue window will spring up with a few options. Make sure <strong>Project folder</strong> is selected and then click browse, selecting the <strong>Multiple Markers Project</strong> folder from the source files you just downloaded. Once you've selected the project folder click finish and let the IDE do its thang. You should now have a new project showing up on the left of the IDE. These instructions may differ slightly for other IDEs, if nothing happened for you then you'll need to find out how to specifically import existing projects into your chosen IDE.</p>

<p>"Wow, this is a lot of effort just to begin", I hear you say. You're right, I reply, but we're nearly done. Last but not least is to open up the main ActionScript file, which is neatly tucked away within our new project folder. Double click on the folder and you'll be presented with a bunch more folders. Double click on <strong>src</strong>, then <strong>(default package)</strong>, then <strong>Multiple_Markers.as</strong>. Bang. We're in business.</p>

<figure>
    <img src="http://rawkes.com/media/tracking-multiple-augmented-reality-markers-flarmanager-and-papervision/project-directory-tree.jpg" width="620" height="470" alt="Flash Builder Project directory tree">
    <p class="legend">Flash Builder Project directory tree</p>
</figure>

<p>The ActionScript file should've opened up on the right, if not then have a poke around for the file as it should be in there somewhere. You'll notice that I've already imported the required packages, but feel free to remove any you don't want if you're deviating from this tutorial. I've also included the following self-explanatory code to format the outputted SWF file when we're finished:</p>

<pre><code>[SWF(width="640", height="480", frameRate="25", backgroundColor="#000000")]
</code></pre>

<p>All our code is going to go inside the <code>Multiple_Markers</code> class declaration:</p>

<pre><code>public class Multiple_Markers extends Sprite {

}
</code></pre>

<p>That's enough setting up, let's crack on with what you came for.</p>

<h2>Augmenting reality</h2>

<p>Our system revolves around the FLARManager package, a wrapper of sorts that gives us access to all the exciting AR doo-dahs. We'll begin by prepping the system so it's ready to make reality awesome. Insert the following inside the <code>Multiple_Markers</code> class:</p>

<pre><code>/* FLARManager pointer */
private var fm:FLARManager;

/* Constructor method */
public function Multiple_Markers() {
    /* Run augmented reality initialisation */
    this.initFLAR();
}
</code></pre>

<p>First we're setting the FLARManager variable <code>fm</code>  that will hold our FLARManager object when we initialise it later. Next is the class constructor function that will run automatically when the system loads. Inside the constructor we're requesting the method <code>initFLAR()</code> which will hold all the code to initialise FLARManager. Let's create that method now by adding the following below the constructor method:</p>

<pre><code>/* Augmented reality initialisation */
private function initFLAR():void {
    /* Initialise FLARManager */
    this.fm = new FLARManager("flarConfig.xml");

    /* Event listener for when a new marker is recognised */
    fm.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onAdded);
    /* Event listener for when a marker is removed */
    fm.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onRemoved);
    /* Event listener for when the FLARManager object has loaded */
    fm.addEventListener(Event.INIT, this.onFlarManagerLoad);

    /* Display webcam */
    this.addChild(Sprite(fm.flarSource));
}
</code></pre>

<p>This really isn't anything complicated, all we've done is initialise a FLARManager object and create a bunch of event listeners that look out for; when an AR marker is detected, when an AR marker is removed, and when the FLARManager object has finished initialising. The last line uses our FLARManager object, referred from now as <code>fm</code>, to activate the user's webcam by adding it to the main stage.</p>

<p>For the meantime let's create some empty methods to keep the event listeners happy. Add the following underneath the <code>initFLAR</code> method:</p>

<pre><code>/* Run if FLARManager object has loaded */
private function onFlarManagerLoad(e:Event):void {
    /* Remove event listener so this method doesn't run again */
    this.fm.removeEventListener(Event.INIT, this.onFlarManagerLoad);
}

/* Run when a new marker is recognised */
private function onAdded(e:FLARMarkerEvent):void {

}
/* Run when a marker is removed */
private function onRemoved(e:FLARMarkerEvent):void {

}
</code></pre>

<p>It's important to note that the first line in <code>onFlarManagerLoad</code> removes the <code>fm</code> initialisation event listener so it can only run once. The two marker listeners are passed a marker event object as an argument, which we'll use later to access detailed information about each marker.</p>

<p>By now we've created the underlying functionality for FLARManager, and if you run the system (⌘+F11 in Flash Builder) then your webcam should display in a Flash Player window. If not, then something went wrong and you'll need to have a look through the code again. If it still isn't working then post a message in the comments below.</p>

<p>The eagle-eyed of you will have noticed that I didn't talk about the <code>flarConfig.xml</code> argument in the <code>fm</code> initialisation. I have good reason as it's something that deserves some focus, of which it will now receive.</p>

<h2>All about flarConfig.xml</h2>

<p>If you look inside the <strong>src</strong> folder and double click on <strong>flarConfig.xml</strong> you'll be presented with the configuration settings for the <code>fm</code> object. The settings are split into 4 main areas; video source settings, FLARManager settings, camera parameters, and AR patterns. Transmote does a good job at <a href="http://words.transmote.com/wp/flarmanager/flarmanager-documentation/">explaining everything in detail in the official documentation</a> so I'll be brief.</p>

<h3>Video source settings</h3>

<p>These are the settings which will define the dimensions that video is captured [<code>sourceWidth</code> &amp; <code>sourceHeight</code>], dimensions that video is displayed [<code>displayWidth</code> &amp; <code>displayHeight</code>], the framerate that video is captured at, and the amount of downsampling (scaling down) that the captured video receives before being processed. None of these settings affect the dimensions of the SWF window, those are changed by editing the line above the <code>Multiple_Markers</code> class declaration.</p>

<h3>FLARManager settings</h3>

<p>Slightly more advanced, these settings define if the video feed should be mirrored [<code>mirrorDisplay</code>], the amount of smoothing to give the AR marker animations [<code>smoothing</code>], the class to use for smoothing [<code>smoother</code>], and the accuracy of marker detection in changing light conditions [<code>thresholdAdapter</code>].</p>

<h3>Camera parameters</h3>

<p>A file has been provided by FLARManager, or more accurately by FLARToolkit, to compensate for webcam distortion and other gloriously exciting discrepancies. Point <code>&lt;cameraParamsFile&gt;</code> to the location of this file, which has already been done if you're using the source files I provided.</p>

<h3>AR patterns</h3>

<p>An array [<code>&lt;patterns&gt;</code>] of pattern files [<code>&lt;pattern&gt;</code>] that we want to detect. 6 pattern files have already been provided for you and can be printed from the <strong>Patterns</strong> folder in the unpacked source file I provided.</p>

<h2>Bring on the markers</h2>

<p>Now we're ready to start dealing with markers. Start by declaring our storage objects for the patterns and marker containers, of which we'll get to shortly. Add the following below <code>private var fm:FLARManager;</code> in the head of our class:</p>

<pre><code>/* Vector storing references to all markers on screen, grouped by pattern id */
private var markersByPatternId:Vector.&lt;Vector.&lt;FLARMarker&gt;&gt;;
/* Dictionary storing references to marker containers, indexed by relevant marker object */
private var containersByMarker:Dictionary;
</code></pre>

<p><code>markersByPatternId</code> is a Vector which is an array in which all the elements have the same data type. In our case we are creating a multi-dimensional Vector that we're saying must contain Vector objects, that in turn must contain FLARMarker objects. By restricting the data type like this we can rest assured that we'll be dealing exclusively with data we want.</p>

<p><code>containersByMarker</code> is a Dictionary object which we'll be using later to manage the Papervision containers for each marker. They will make plenty of sense later so forget about them for now.</p>

<p>We can now finish off the <code>initFLAR</code> method by inserting the following underneath <code>this.fm = new FLARManager("flarConfig.xml");</code>:</p>

<pre><code>/* Temporary declaration of how many patterns are being used */ 
var numPatterns:int = 6;
/* Initialise markerByPatternId vector object */
this.markersByPatternId = new Vector.&lt;Vector.&lt;FLARMarker&gt;&gt;(numPatterns, true);
/* Loop through each pattern */
while (numPatterns--) {
    /* Add empty Vector to each pattern */
    this.markersByPatternId[numPatterns] = new Vector.&lt;FLARMarker&gt;();
}

/* Initialise empty containersByMarker dictionary object */
this.containersByMarker = new Dictionary(true);
</code></pre>

<p><code>numPatterns</code> is an integer that tells us how many patterns we declared in the configuration file. On the next line we define <code>markersByPatternId</code> to create a Vector object with 6 [<code>numPatterns</code>] empty slots and use <code>true</code> to make sure this value can't be changed dynamically in the future. The while statement loops through the Vector object we just created and adds another empty Vector to each of the 6 elements (one for each pattern). We didn't set a limit or boolean value this time because we don't know how many markers we'll be tracking. Finally we define <code>containersByMarker</code> as an empty Dictionary object and enable garbage collection on the included objects by including the <code>true</code> argument. It's not important to know what the garbage collection is doing right now, I just thought it best to highlight that it's enabled.</p>

<p>While we're at it we can finish off the two marker event listeners. First off add the following to our <code>onAdded</code> method:</p>

<pre><code>/* Run method to add a new marker */
this.addMarker(e.marker);   
</code></pre>

<p>And the following to the <code>onRemoved</code> method:</p>

<pre><code>/* Run method to remove a marker */
this.removeMarker(e.marker);
</code></pre>

<p>All that's happening here is a call to the <code>addMarker</code> and <code>removeMarker</code> methods with the added/removed marker object attached. It's by sheer coincidence that we're going to create these two methods right now.</p>

<p>Insert the following below the <code>onRemoved</code> method:</p>

<pre><code>/* Add a new marker to the system */
private function addMarker(marker:FLARMarker):void {
    /* Store reference to list of existing markers with same pattern id */
    var markerList:Vector.&lt;FLARMarker&gt; = this.markersByPatternId[marker.patternId];
    /* Add new marker to the list */
    markerList.push(marker);
}
</code></pre>

<p>This method will provide the core functionality for adding new markers to the system. Right now it's set up to store a reference to each marker the system detects. By passing a marker object to <code>addMarker</code> we're able to access a variety of information about the marker in question. We use this information to find out the marker's pattern id [<code>marker.patternId</code>] or, in layman's terms, the numerical position of the pattern in the configuration file pattern list (a number from 0 to 5, remember that arrays are 0 indexed).</p>

<p>Now that we know the pattern id we can access the relevant <code>markersByPatternId</code> Vector object for that pattern, from the 6 we created earlier, and store a reference in the temporary <code>markerList</code> variable. All the last line does is <code>push</code> [add] a reference to the new marker onto the end of the <code>markerList</code> Vector object. When populated, the <code>markersByPatternId</code> Vector object will contain references to every marker, grouped by their pattern id [0-5]. It's important to get your head around how this works so take a moment to read over everything again if necessary.</p>

<p>Add the <code>removeMarker</code> method directly underneath the <code>addMarker</code> method:</p>

<pre><code>/* Remove a marker from the system */
private function removeMarker(marker:FLARMarker):void {
    /* Store reference to list of existing markers with same pattern id */
    var markerList:Vector.&lt;FLARMarker&gt; = this.markersByPatternId[marker.patternId];
    /* Find index value of marker to be removed */
    var markerIndex:uint = markerList.indexOf(marker);
    /* If marker exists in markerList */
    if (markerIndex != -1) {
        /* Remove marker from markersByPatternId */
        markerList.splice(markerIndex, 1);
    }
}
</code></pre>

<p>You'll recognise the first line is pretty much the same as in <code>addMarker</code>, referencing the <code>markersByPatternId</code> Vector object for the selected marker's pattern id. To remove the referenced marker from our Vector object we first need to find out the position [index] of the marker within the Vector. To do so we utilise the built-in <code>indexOf</code> method and pass it the marker we're looking for. In return we'll be given an integer, either the index of the marker (if it's found), or <code>-1</code> if the marker can't be found. This result is then stored in <code>matkerIndex</code> so we can use it later.</p>

<p>Welcome to later. Now we have the result of our marker search we run a basic <code>if</code> statement to check if we actually found a marker. If so then we <code>splice</code> [remove] the marker from the <code>markerList</code> Vector object. Job done. Feel free to run the system to make sure there are no errors. You could print some markers and add a basic trace message, like below, if you want to see an output when you introduce a marker to the display:</p>

<pre><code>trace("Added marker with pattern id: "+marker.patternId);
</code></pre>

<p>Congratulations, you've successfully implemented a fully functioning AR system that detects multiple markers. However, it's mighty boring as it stands. How about we create something nice to look at? Agreed? Fantastic.</p>

<h2>Entering the third dimension</h2>

<p>Flash was never really built to handle much more than 2D graphics, and rolling our own 3D engine would be way beyond the scope of this tutorial. Luckily for us a group of bright young developers put together Papervision, an incredibly awesome 3D engine that does everything we need and more.</p>

<p>There are a few bits and pieces that need addressing before we can start breaking down the second dimension. First up is setting some variables that we're going to be using for Papervision later on. Insert the following below <code>private var fm:FLARManager;</code> in the head of our class:</p>

<pre><code>/* Papervision Scene3D pointer */
private var scene3D:Scene3D;
/* Papervision Viewport3D pointer */
private var viewport3D:Viewport3D;
/* FLARToolkit FLARCamera3D pointer */ 
private var camera3D:FLARCamera3D;
/* Papervision PointLight3D pointer */
private var pointLight3D:PointLight3D;
/* Papervision render engine pointer */
private var lre:LazyRenderEngine;
</code></pre>

<p>Variables should be pretty standard to you by now so we'll cut to the chase and take a moment to go through what the referenced Papervision classes actually do.</p>

<ul>
<li><code>Scene3D</code> is a container for the 3D environment and is where all our 3D objects will be placed.</li>
<li><code>Viewport3D</code> is literally a window into the 3D environment.</li>
<li><code>FLARCamera3D</code> is a special FLARToolkit class that extends the Papervision <code>Camera3D</code> class, accounting for webcam distortion. It's purpose is to let us move around, with the 3D environment changing depending on our position. Just like when you move around, the objects your looking at will change their size and perspective.</li>
<li><code>PointLight3D</code> is a light which points in one direction, it illuminates the <code>Scene3D</code> so we can create shadows.</li>
<li><code>LazyRenderEngine</code> puts everything together. It displays the <code>Scene3D</code> environment as seen through the <code>Viewport3D</code> window from the <code>FLARCamera3D</code> position.</li>
</ul>

<p>Insert the following method call after the event listener in <code>onFlarManagerLoad</code>:</p>

<pre><code>/* Run Papervision initialisation method */
this.initPaperVision();
</code></pre>

<p>We'll create that method call now. Add the following below our <code>removeMarker</code> method:</p>

<pre><code>/* Papervision initialisation method */
private function initPaperVision():void {
    /* Initialise a new Papervision scene */
    this.scene3D = new Scene3D();
    /* Initialise a new FLARCamera3D object to enable full AR goodness */
    this.camera3D = new FLARCamera3D(this.fm.cameraParams);

    /* Define a new Papervision viewport object */
    this.viewport3D = new Viewport3D(640, 480, true);
    /* Add viewport to the main scene */
    this.addChild(this.viewport3D);

    /* Define a new Papervision point light */
    this.pointLight3D = new PointLight3D(true, false);
    /* Set light position */
    this.pointLight3D.x = 1000;
    this.pointLight3D.y = 1000;
    this.pointLight3D.z = -1000;
    /* Add light to the Papervision scene */
    this.scene3D.addChild(pointLight3D);

    /* Initialise the Papervision render engine */
    this.lre = new LazyRenderEngine(this.scene3D, this.camera3D, this.viewport3D);

    /* Create event listner to run a method on each frame */
    this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);
}
</code></pre>

<p>There is nothing scary happening here. In the first line we are defining our <code>Scene3D</code> object. In the second we define our <code>FLARCamera3D</code> object and pass it a reference to the camera parameters file we talked about in the FLARManager configuration. The same goes for the third line where we define our <code>Viewport3D</code> object and make it the same dimensions as the SWF, also setting the third argument to <code>true</code> so it scales with the main stage. On the next line we add the <code>Viewport3D</code> object to the main stage.</p>

<p>On the fifth line we define our <code>PointLight3D</code> object and set the first argument to <code>true</code> so the light is visible. In the lines that follow we set the position of the light in 3D space, <code>z</code> being the depth. You can set these value as you wish, there is no specific reason to use 1000. After setting the positions we add the light to the <code>scene3D</code> object so it illuminates whatever 3D objects we decide to put in later.</p>

<p>Next we define the Papervision rendering engine and pass it our <code>scene3D</code>, <code>camera3D</code>, and <code>viewport3D</code> objects as arguments. There are a few rendering engines to choose from but I'm used to the <code>LazyRenderingEngine</code> so that's what we're going with here.</p>

<p>Currently our system won't display anything and will only run once, for a successful animation we need to update our 3D scene on every frame. To do that we create a new event listener on the main stage that calls the <code>onEnterFrame</code> method at the beginning of every new frame (30 frames per second).</p>

<p>Now would definitely be a good time to create that <code>onEnterFrame</code> method we just declared. Insert the following below the <code>initPaperVision</code> method:</p>

<pre><code>/* Method to run on each frame */
private function onEnterFrame(e:Event):void {
    /* Render the Papervision scene */
    this.lre.render();
}
</code></pre>

<p>What this method does is call the <code>LazyRenderEngine</code>'s <code>render</code> method on every single frame, which will update the 3D scene and thus create the illusion of movement. However, if you run the system right now you'll see we don't have anything to display yet. The fact that nothing went wrong tells you that the Papervision environment is working, but that's not much fun so let's attach some 3D cubes to our markers.</p>

<h2>Visualising the markers</h2>

<p>This is easily the largest and most complex section of the tutorial so it's worth taking a breather before we continue. Go on, I'm not joking around here. Done? Good. Set your tea down on the desk and let's well and truly shatter the second dimension.</p>

<p>Add the following underneath our <code>onEnterFrame</code> method, at the very end of the class:</p>

<pre><code>/* Get colour values dependent on pattern id */
private function getColorByPatternId(patternId:int, shaded:Boolean = false):Number {
    switch (patternId) {
        case 0:
            if (!shaded)
                return 0xFF1919;
            return 0x730000;
        case 1:
            if (!shaded)
                return 0xFF19E8;
            return 0x730067;
        case 2:
            if (!shaded)
                return 0x9E19FF;
            return 0x420073;
        case 3:
            if (!shaded)
                return 0x192EFF;
            return 0x000A73;
        case 4:
            if (!shaded)
                return 0x1996FF;
            return 0x003E73;
        case 5:
            if (!shaded)
                return 0x19FDFF;
            return 0x007273;
        default:
            if (!shaded)
                return 0xCCCCCC;
            return 0x666666;
    }
}
</code></pre>

<p><code>getColorByPatternId</code> is a helper method that we'll be using to grab the colour values for each of our 6 patterns. By assigning a separate colour to each pattern we can easily distinguish between different markers on the screen. I've included some extra functionality to give a darker shade if we set the <code>shaded</code> boolean to false. Let's forget about <code>getColorByPatternId</code> for now as it will make more sense when we come to use it.</p>

<p>The process going on when creating a 3D cube, and most other objects, in Papervision is actually a pretty simple one:</p>

<ol>
<li>Create a 3D container for the object</li>
<li>Define materials for the object</li>
<li>Create the object and add the materials</li>
<li>Add the object to the 3D container</li>
<li>Add the 3D container to the Papervision scene</li>
<li>Render the scene (usually done elsewhere in the system)</li>
</ol>

<p>As you can see it's not exactly rocket science to get 3D objects into Flash with Papervision. Most of the steps mentioned are literally one line of code, 2 at most. All the code we're using for creating the 3D cubes will be done in <code>addMarker</code>, so that's where we'll go now. Add the following at the end of the method (before the last curly brace):</p>

<pre><code>/* Initialise the marker container object */
var container:DisplayObject3D = new DisplayObject3D();

/* Prepare material to be used by the Papervision cube based on pattern id */
var flatShaderMat:FlatShadeMaterial = new FlatShadeMaterial(this.pointLight3D, this.getColorByPatternId(marker.patternId), this.getColorByPatternId(marker.patternId, true));
/* Add material to all sides of the cube */
var cubeMaterials:MaterialsList = new MaterialsList({all: flatShaderMat});

/* Initialise the cube with material and set dimensions of all sides to 40 */
var cube:Cube = new Cube(cubeMaterials, 40, 40, 40);
</code></pre>

<p>This code should make some sense if you read it through like the process I defined above. In the first line we're creating a new <code>DisplayObject3D</code>, our 3D container for the object. The next two lines define the materials we want to use on each cube. I'll focus on this a little as it's important to grasp how materials work in Papervision.</p>

<p>Adding materials to an object in Papervision is usually a one or two step process, depending on how messy you want the code to be; first defining the material you want to use then, second, adding that material to the object. Some objects require multiple materials, like a cube, but the premise is the same; materials should be seen as separate to the objects they're being added to. The great thing about Papervision is that you have <a href="http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/org/papervision3d/materials/package-detail.html">a whole variety of material types</a> at your disposal. Whether you want block colours or a movie, there are material types to handle it, and if you want to get advanced you have <a href="http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/org/papervision3d/materials/shadematerials/package-detail.html">a selection of shaded material types</a> to use as well. I won't go into detail about how to define each type of material, but the method we use for the cube is very similar, if not a little more complex.</p>

<p>In our code, on the second uncommented line, we define the type of material we're after; a <code>FlatShadeMaterial</code>. This material type reacts to light in the 3D scene and shades certain areas. To define the <code>FlatShadeMaterial</code> we pass the <code>pointLight3D</code> from our Papervision scene, along with the colours we want to use for lit, and unlit sides. Instead of using arbitrary colours we grab the <code>patternId</code> of our marker and use that to get the relevant colour from the <code>getColorByPatternId</code> method we created earlier, passing a boolean value of <code>true</code> to the second request so we get the relevant shaded colour instead. I told you it'd make more sense when we came to use it.</p>

<p>As we're create a cube we need to define materials for all of the 6 faces. To do this we define a <code>MaterialsList</code> object which we use to assign materials to each side. The parameters of the <code>MaterialsList</code> object allow us to assign a different material for each side. For our purposes a single material for all sides is just fine, which is why we're using the <code>all</code> parameter.</p>

<p>Now we have the materials sorted out we can move onto step 3 and actually create the object, our cube. To do so we define a <code>Cube</code> object, passing in the <code>MaterialsList</code> object we just created, as well as the dimensions [width, depth, height] of the cube (you can actually make it a cuboid shape if you wish). That's all for creating a cube, it really is as easy as that. The cube isn't actually visible yet as we haven't added it to the Papervision scene, so the next few lines of code will prepare us to do that. Add the following below the cube definition:</p>

<pre><code>/* Shift cube upwards so it sits on top of paper instead of being cut half-way */
cube.z = 0.5 * 40;

/* Add finished cube object to marker container */
container.addChild(cube);
/* Add marker container to the Papervision scene */
this.scene3D.addChild(container);

/* Add marker container to containersByMarker Dictionary object */
this.containersByMarker[marker] = container;
</code></pre>

<p>There is nothing crazy going on here. First we change the Z position of the cube to raise it by half it's height. We do this because the registration point of a cube in Papervision, the origin from which movement and rotation is made, is slap bang inside the core, right in the middle of the cube. If we left the Z position as it was then the cube would be sitting as if it was sliced in half, so we raise it up by half to make it sit on the bottom surface.</p>

<p>On the next two lines we add the cube as a child of the <code>DisplayObject3D</code>, our 3D container, and then add that container as a child of the Papervision scene. This is vital as without adding the cube to the scene it will never be rendered.</p>

<p>It's all well and good adding the cube and container to the 3D scene, but without a method of tracking each object it would be a nightmare to manipulate or remove them in the future. This is why we created the <code>containersByMarker</code> Dictionary object previously. The last line of code above adds our newly created container to that object, referenced by the marker we're adding the cube to.</p>

<p>That's it for creating the cubes, now we move on to removing them. Add the following at the end of the <code>removeMarker</code> method:</p>

<pre><code>/* Store reference to marker container from containersByMarker Dictionary object */
var container:DisplayObject3D = this.containersByMarker[marker];
/* If a container exists */
if (container) {
    /* Remove container from the Papervision scene */
    this.scene3D.removeChild(container);
}
/* Remove container reference from containersByMarker Dictionary object */
delete this.containersByMarker[marker];
</code></pre>

<p>This is basically a reversal of the additions we made when adding a cube. In the first line we create a reference to the 3D container stored in the <code>containersByMarker</code> Dictionary object for the current marker (see how useful it is now?). From here we run a simple validation check to make sure a container actually exists and, if so, remove it from the Papervision scene. Finally we delete any reference to the container in the Dictionary object. All gone!</p>

<p>We're so nearly there, all that's left is to create the method that will run every frame updating the whole system. Below the <code>onEnterFrame</code> method, add a new method called <code>updateMarkers</code> with the following code inside:</p>

<pre><code>/* Update markers method */
private function updateMarkers():void {
    /* Store reference to amount of patterns being tracked */
    var i:int = this.markersByPatternId.length;
    /* Store reference to list of existing markers */
    var markerList:Vector.&lt;FLARMarker&gt;;
    /* Empty marker variable */
    var marker:FLARMarker;
    /* Empty container variable */
    var container:DisplayObject3D;
    /* Empty integer */
    var j:int;

    /* Loop through all tracked patterns */
    while (i--) {

    }
}
</code></pre>

<p>Integral to the update method is a <code>while</code> statement that loops through all the AR patterns we want to track. Before we delve into the loop we need to set up a few variables:</p>

<ul>
<li><code>i</code> refers to the length [number of] AR patterns we want to track</li>
<li><code>markerList</code> defines an empty <code>Vector</code> that will hold <code>FLARMarker</code> objects</li>
<li><code>marker</code> defines a <code>FLARMarker</code> object that will refer to the current marker</li>
<li><code>container</code> defines a <code>DisplayObject3D</code> that will refer to the current 3D container</li>
<li><code>j</code> defines an integer that we'll use further within the loop</li>
</ul>

<p>Let's tackle the loop now. Add the following inside the <code>while</code> statement:</p>

<pre><code>/* Store reference to all markers with this pattern id */
markerList = this.markersByPatternId&#91;i];
/* Amount of markers with this pattern */
j = markerList.length;
/* Loop through markers with this pattern */
while (j--) {
    /* Store reference to current marker */
    marker = markerList[j];

    /* Find reference to marker container in containersByMarker Dictionary object */
    container = this.containersByMarker[marker];
    /* Transform container to new position in 3d space */
    container.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(marker.transformMatrix);
}
</code></pre>

<p>There is only one line here which is new to use, but we'll leave that until last. First off we grab an array of markers being stored in <code>this.markersByPatternId</code> for the current pattern id [<code>i</code>] and add it to the <code>markerList</code> variable we defined previously. From here we find out how many markers being tracked, the <code>length</code>, and store that value in the variable <code>j</code>. To loop through each marker we set up a new <code>while</code> statement using <code>j</code>. In each iteration of the marker loop we grab a reference to the current marker from <code>markerList</code> and store it in the <code>marker</code> variable. In turn we then use <code>marker</code> to retrieve the relevant 3D container from the <code>containersByMarker</code> Dictionary.</p>

<p>Finally, and I know you've been waiting for this moment, we update the position of the container relative to the AR marker being held up. To do this we use a rather nifty method provided by FLARManager called <code>convertFLARMatrixToPVMatrix</code>. What this method does it take the FLARMarker transformation matrix, the size, rotation and position, of the marker, and convert it into a Papervision transformation matrix. All that's left is to assign that converted matrix to the <code>transform</code> property of the 3D container and it will match the position and orientation of the AR marker. Pretty cool if I do say so myself.</p>

<p>Now, there is no use having an method to update the markers if we don't use it anywhere, so add the following call above <code>this.lre.render()</code> in the <code>onEnterFrame</code> method:</p>

<pre><code>/* Run method to update markers */
this.updateMarkers();
</code></pre>

<p>Now would be a good time to save, grab one of the AR markers, and run the system to check it works. If you see a cube pop up over your marker then congratulations, you've just created a fully functioning augmented reality system with Papervision. Over. Out. Finished. Finito. Completed.</p>

<h2>Rounding up what's been covered</h2>

<p>We certainly learnt a lot in this tutorial, with particular focus on FLARManager and Papervision. We learnt:</p>

<ul>
<li>About the Dictionary and Vector classes in ActionScript</li>
<li>How to implement basic AR support in ActionScript</li>
<li>How to create basic 3D objects in Papervision</li>
<li>How to impress your friends with pure awesomeness</li>
</ul>

<p>Ok, so the last one is a bit extravagant but I'm yet to find someone who doesn't stare at my computer screen when I'm working on AR in the library. Annoying? Perhaps. Cool points? Definitely.</p>

<h2>Taking this further</h2>

<p>I've given you a firm understanding of the basics and a platform to launch yourself into the exciting depths of AR. What happens next is up to you, but here are a few ideas:</p>

<ul>
<li>Adding a tween to the cubes to animate them when they're created</li>
<li>Animating the cubes so they constantly rotate on the spot</li>
<li>Replacing the cubes with something more exciting</li>
<li>Implementing collision detection between the cubes [advanced]</li>
</ul>

<p>If you do decide to take this further, add a link in the comments as I'd love to see.</p>

<a name="download"></a>

<h2>Source files</h2>

<p>All the source files referenced in this tutorial can be <a href="http://rawkes.com/media/tracking-multiple-augmented-reality-markers-flarmanager-and-papervision/Multiple Markers Source Code.zip">downloaded under a Creative Commons Attribution-Non-Commercial-Share Alike license</a> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" /></a>.</p>]]></content:encoded>
      <dc:subject></dc:subject>
      <dc:date>2010-01-26T18:03:46+00:00</dc:date>
    </item>

    
    </channel>
</rss>