<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Multigesture.net</title>
	<atom:link href="http://www.multigesture.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.multigesture.net</link>
	<description>A multitouch and HCI research blog</description>
	<lastBuildDate>Fri, 05 Apr 2013 13:18:25 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>NodeBeat featured on the BlackBerry Dev blog</title>
		<link>http://www.multigesture.net/2012/08/02/nodebeat-featured-on-the-blackberry-dev-blog/</link>
		<comments>http://www.multigesture.net/2012/08/02/nodebeat-featured-on-the-blackberry-dev-blog/#comments</comments>
		<pubDate>Thu, 02 Aug 2012 18:27:51 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[BlackBerry]]></category>
		<category><![CDATA[Featured]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=2334</guid>
		<description><![CDATA[Interested to read how we (me and Seth) ported NodeBeat to the BlackBerry PlayBook platform? The BlackBerry Developer Blog wrote an article about us, our app and the journey that was involved with it: http://devblog.blackberry.com/2012/07/dev-success-nodebeat/]]></description>
				<content:encoded><![CDATA[<p>Interested to read how we (me and <a href="http://sethsandler.com/">Seth</a>) ported <a href="http://nodebeat.com/">NodeBeat</a> to the BlackBerry PlayBook platform?</p>
<p>The <a href="http://devblog.blackberry.com/">BlackBerry Developer Blog</a> wrote an article about us, our app and the journey that was involved with it: <a href="http://devblog.blackberry.com/2012/07/dev-success-nodebeat/">http://devblog.blackberry.com/2012/07/dev-success-nodebeat/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2012/08/02/nodebeat-featured-on-the-blackberry-dev-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PlayBook add-on (ofxQNX)</title>
		<link>http://www.multigesture.net/2012/04/27/playbook-add-on-ofxqnx/</link>
		<comments>http://www.multigesture.net/2012/04/27/playbook-add-on-ofxqnx/#comments</comments>
		<pubDate>Thu, 26 Apr 2012 23:34:48 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[BlackBerry]]></category>
		<category><![CDATA[Blogroll]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Howto]]></category>
		<category><![CDATA[Multitouch]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=2269</guid>
		<description><![CDATA[After receiving my BlackBerry PlayBook through the developer offer in March, I started to think of the possibility of porting NodeBeat to the PlayBook platform. As this is my first tablet (yea I know, as a multitouch enthusiast its quite weird not having an iPad or Android Tablet), I have to say that I am really enjoying the [...]]]></description>
				<content:encoded><![CDATA[<p>After receiving my BlackBerry PlayBook through the <a href="http://devblog.blackberry.com/2012/02/latest-blackberry-playbook-tablet-offer-for-android-developers/">developer offer</a> in March, I started to think of the possibility of porting <a href="http://www.nodebeat.com">NodeBeat</a> to the PlayBook platform.</p>
<p>As this is my first tablet (yea I know, as a multitouch enthusiast its quite weird not having an iPad or Android Tablet), I have to say that I am really enjoying the 7 inch form factor. It feels much nicer in the hand compared to most of the larger tablets (10+ inch) which can tire out your wrists quite a bit. Spec wise this device is <a href="http://en.wikipedia.org/wiki/BlackBerry_PlayBook">great</a> (dual-core cpu, 1 GB ram, dedicated graphics chip), therefor it would be nice to test if the PlayBook would be a perfect platform to run NodeBeat on.</p>
<p>Since I am already quite familiar with the NodeBeat code base, this would be a nice new challenge. After taking a brief look at the <a href="https://bdsc.webapps.blackberry.com/native/">Native SDK</a>, I figured that this would not be as difficult compared to the Android port. Unlike on <a href="http://developer.android.com/sdk/ndk/overview.html">Android</a>, there is no need for JNI bindings. Actually, I would say that developing for the PlayBook is very similar to writing applications for Linux (you can use Makefiles if you want), the compiler (qcc) is quite similar to gcc.<br />
RIM includes a modified IDE (based on Eclipse) for app development and it works quite well. All the required tools are tightly integrated and the wizards help you to get through the setup. RIM also did a good job on <a href="https://bdsc.webapps.blackberry.com/native/documentation">documenting</a> the Native SDK, including the documents on <a href="https://bdsc.webapps.blackberry.com/native/documentation/porting_overview_1970891_11.html">porting</a>.</p>
<h2>Porting</h2>
<p>NodeBeat is build on top of the popular <a href="http://www.openframeworks.cc/">openFrameworks</a> (OF) platform, so the first thing I had to do was find out which dependencies I had to build to make it work and write an PlayBook add-on (<a href="http://www.multigesture.net/projects/ofxqnx/">ofxQNX</a>) to extend the current framework.</p>
<p>At first sight, this seemed to be quite a difficult task due the amount of dependencies OF relies on and the large code base I had to patch, but with help from the <a href="http://forum.openframeworks.cc/index.php/topic,9189.0.html">openFrameworks community</a> and <a href="http://supportforums.blackberry.com/t5/Native-Development/Porting-openFrameworks-need-help-with-the-audio-QSA-part/td-p/1641151">BlackBerry community</a>, it fortunately did not take long before I had some <a href="https://twitter.com/#!/LaurenceMuller/status/179575497032871937">stuff up and running</a>.</p>
<p><img class="aligncenter" title="OFbeta" src="https://p.twimg.com/An369o-CMAA1dHD.jpg" alt="" width="432" height="288" /></p>
<p>I won&#8217;t bore you guys to death with the details on how to get the dependencies compiled using the NDK as most of them worked straight out of the box (in the <a href="https://github.com/falcon4ever/openFrameworks/tree/developPlayBook/addons/ofxQNX">readme</a> are some details on what to patch).  The ones that were troublesome and caused me a lot of frustration were the ones that use custom build scripts (yes you <a href="http://pocoproject.org/forum/viewtopic.php?f=12&amp;t=5318">POCO</a>). I am sure those devs have a valid reason for using it, but it makes things a bit overcomplicated. In the case of POCO, the QNX build (PlayBook target) could only be build on a <a href="http://pocoproject.org/docs/00200-GettingStarted.html#9">Linux machine</a>. I ended up installing Ubuntu in VirtualBox to compile FreeImage and Poco.</p>
<p>It was worth the effort though as I managed to get OF run properly on my tablet:</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/JLE3v-QRa74?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>Where to get it?</h2>
<p>Details about the project can now be found here:<br />
<a href="http://www.multigesture.net/projects/ofxqnx/">http://www.multigesture.net/projects/ofxqnx/</a></p>
<p><del>The <a href="http://www.multigesture.net/projects/ofxqnx/">ofxQNX</a> add-on is available on GitHub, in the <strong>developPlayBook</strong> branch:</del><br />
<del><a href="https://github.com/falcon4ever/openFrameworks/tree/developPlayBook">https://github.com/falcon4ever/openFrameworks/tree/developPlayBook</a></del></p>
<p>It is licensed under the <a href="http://en.wikipedia.org/wiki/BSD_licenses#3-clause_license_.28.22New_BSD_License.22_or_.22Modified_BSD_License.22.29">New BSD license</a> and hopefully will become part of the mainstream branch. For now I will maintain it in my own OF fork as quite a lot of the OF core had to be patched.</p>
<p>Included are ten example projects that explain how to use various features of ofxQNX. All project files contain settings for development on the Simulator (x86) as on the PlayBook/BB10 hardware (ARM).</p>
<h2>Is it ready for prime time?</h2>
<p><strong>It sure is!</strong></p>
<p>With <a href="http://nodebeat.com/">NodeBeat</a> as our guinea pig, <a href="http://sethsandler.com/">Seth</a> and I have been working pretty hard the past weeks to get NodeBeat up and running just in time for <a href="http://www.blackberryjamconference.com/">BB 10 Jam</a>. Since NodeBeat uses a lot of different OF features, it was a perfect way to test out ofxQNX and the stability of the add-on.</p>
<p>Below is some footage I shot of an early NodeBeat Beta running on the PlayBook. I love that compared to the Android build, this device is giving us much lower input and audio latencies which really enhance the experience.</p>
<p>We have submitted NodeBeat to <a href="https://twitter.com/#!/NodeBeat/status/195589029377486848">the BlackBerry AppWorld</a> so hopefully it will be available soon for your listening pleasure!</p>
<p>NodeBeat beta:</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/xhZ46PpccGQ?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Pictures:</p>
<p style="text-align: center;"><a href="http://www.multigesture.net/wp-content/uploads/2012/04/IMG_1737.jpg"><img class="aligncenter  wp-image-2275" title="IMG_1737" src="http://www.multigesture.net/wp-content/uploads/2012/04/IMG_1737.jpg" alt="" width="399" height="267" /></a></p>
<p style="text-align: center;"><a href="http://www.multigesture.net/wp-content/uploads/2012/04/IMG_1735.jpg"><img class="aligncenter  wp-image-2274" title="IMG_1735" src="http://www.multigesture.net/wp-content/uploads/2012/04/IMG_1735.jpg" alt="" width="399" height="267" /></a></p>
<h2>Feedback / Todo</h2>
<p>Since ofxQNX is now available to everyone on GitHub, I&#8217;d love to hear what you think about using openFrameworks for your PlayBook projects. While a lot of basic OF functionality is already available in ofxQNX, the things that are still lacking are:</p>
<ul>
<li>ofSoundPlayer, used for controlling the audio levels from the app and play wav/mp3 audio files. For now I recommend using SDL for this purpose.</li>
<li>Camera support. Unfortunately the current PlayBook SDK doesnt allow access to the cameras. As soon as those are supported (prob with the next release) I&#8217;ll be porting the cameraExample and openCVExample.</li>
<li>GPS Support with gpsExample</li>
</ul>
<p>Probably the most important one to focus on is ofSoundPlayer. As there is already an OpenAL implementation (ofOpenALSoundPlayer) in the repository, I am currently investigating if we will be able to (re)use it for ofxQNX.</p>
<p>Anyway, let me know how ofxQNX runs and don&#8217;t hesitate to report bugs or submit patches (on GitHub). <strong>Enjoy!</strong></p>
<p><strong>[update 05/05/2012]</strong><br />
ofxQNX now also supports the BlackBerry 10 Beta platform!</p>
<p><strong>[update 14/09/2012]</strong><br />
Updated link to the <a href="http://www.multigesture.net/projects/ofxqnx/">ofxQNX project</a>, now compatible with OF0071</p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2012/04/27/playbook-add-on-ofxqnx/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Rewriting and porting fIRC</title>
		<link>http://www.multigesture.net/2012/02/22/rewriting-and-porting-firc/</link>
		<comments>http://www.multigesture.net/2012/02/22/rewriting-and-porting-firc/#comments</comments>
		<pubDate>Wed, 22 Feb 2012 21:55:36 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Application]]></category>
		<category><![CDATA[BlackBerry]]></category>
		<category><![CDATA[Blogroll]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Multitouch]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=2204</guid>
		<description><![CDATA[Late 2008 I created my first Android application (fIRC) after obtaining the T-Mobile G1. The project was an early attempt to master the Java programming language and also a way for me to learn more about the Android mobile platform. Since the Android Market was still young in 2008, my chat application fIRC became a success. [...]]]></description>
				<content:encoded><![CDATA[<p>Late 2008 I created my <a href="http://www.multigesture.net/2008/12/22/firc-android-chat-client-released/">first Android application</a> (fIRC) after obtaining the T-Mobile G1. The project was an early attempt to master the Java programming language and also a way for me to learn more about the <a href="http://developer.android.com/index.html">Android mobile platform</a>.</p>
<p>Since the Android Market was still young in 2008, my chat application fIRC became a success. While internet group chat isn&#8217;t something new, chatting on your smartphone in real time to other people was. People loved using fIRC because it was easy to join the chatroom for some small talk (By default fIRC connects the chatroom #android-chat on <a href="http://webchat.freenode.net">Freenode</a>).</p>
<p style="text-align: center;"><a href="http://www.multigesture.net/wp-content/uploads/2012/02/fircdownloads.jpg"><img class="wp-image-2205 aligncenter" title="fircdownloads" src="http://www.multigesture.net/wp-content/uploads/2012/02/fircdownloads.jpg" alt="" width="486" height="110" /></a></p>
<p>The reviews back in 2009 were pretty favorable, but went downhill after new Android devices were released onto the market. One of the (beginners) mistakes I made when creating fIRC, was that I designed the app specifically for one device, the device I owned: The T-Mobile G1. This means that it was created for devices that had a hardware keyboard, a 480&#215;320 resolution display that was used in landscape mode.</p>
<p>On new devices (let&#8217;s say Android 2.x or newer)  fIRC didn&#8217;t behave that well. UI elements weren&#8217;t aligned properly and the bundled resources were only meant to be used on low or medium DPI displays, so on those new devices fIRC looked quite horrible.</p>
<p>As the old chat code turned into a code spaghetti while trying to fix the problems, I decided to rewrite the app from scratch. I did most of the core last summer and some of the UI during fall. The newly rewritten UI of fIRC now scales properly on any phone or tablet device.</p>
<p><iframe width="500" height="375" src="http://www.youtube.com/embed/SsIKqkeoAM8?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h3>New Features</h3>
<p>The main new features:</p>
<p><strong>(1) Profile wizard</strong></p>
<p>IRC is not that common these days, one of the complaints of the previous version was that nobody knew how to connect to a different server and how to enter multiple chat rooms (or actually so called &#8220;channels&#8221;). In order to address this problem, I&#8217;ve made a profile wizard, that helps you out by providing some quick settings and a list of commonly used IRC servers (such as DALnet, EFnet and Freenode).</p>
<p><strong>(2) Multi-server</strong></p>
<p>More advanced users requested muti-server supprot because they often like to join multiple irc servers.  This new version allows you to do that. Simply create one profile per server, hit the menu button and choose &#8220;Connect all profiles&#8221; to connect.</p>
<p><strong>(3) Fast channel switching</strong></p>
<p>No need to dive into the menu anymore to switch channels, just use a swipe motion (left/right) to switch between chat rooms.</p>
<p><strong>(4) Fully customizable chat</strong></p>
<p>fIRC now allows you to customize the incoming messages and color them in the way you want. You decide which font, font size, background color and text color you want to user per message type.</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/sqbwetdkZ-Q?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><strong>(5) File transfer support</strong></p>
<p>A unique feature on Android IRC apps: fIRC supports DCC file transfers (3G and WiFi). Currently only DCC receive is implemented.</p>
<p><strong>(6) Store chat logs</strong></p>
<p>fIRC allows you to store your chat logs on your SD card for future reading.</p>
<h3>Porting to the BlackBerry Playbook</h3>
<p>Earlier this month Alex Saunders from RIM <a href="http://bit.ly/x48eS">tweeted</a>:<br />
<em>&#8220;Shh&#8230;. Android Devs &#8211; submit your Android app to BB AppWorld by Feb 13 and get a free Playbook &#8211;&gt; tools here: <a title="http://bit.ly/w758Ci" href="http://t.co/Ys32aMJT" rel="nofollow" target="_blank" data-expanded-url="http://bit.ly/w758Ci" data-display-url="bit.ly/w758Ci">http://bit.ly/w758Ci</a>&#8220;</em> .</p>
<p>I wasn&#8217;t aware that the BlackBerry Playbook had some kind of emulation layer to run Android apps, so after watching the <a href="https://bdsc.webapps.blackberry.com/android/tool">video</a> below, I decided to give it a shot. I mean, how hard could it possibly be?</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/62tkj53G7kU?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Basically you will have to sign up as a vendor on this site: <a href="https://appworld.blackberry.com/isvportal/">https://appworld.blackberry.com/isvportal/</a> . RIM will sent you an e-mail (took about a day here) with the request to provide some documents proving you are a company. Fortunately I still had a copy from the Chamber of Commerce that I could use.<br />
While waiting for RIM to approve your account, you should <a href="http://developer.blackberry.com/android/signingkey">request a code signing key</a>. You will need this key to sign your app later on. After you&#8217;re done with that, open up Eclipse and <a href="https://bdsc.webapps.blackberry.com/android/documentation/install_plugin_prerequisites_1895476_11.html">install BlackBerry Plug-in for Android Development Tools</a>.</p>
<p>Since fIRC doesn&#8217;t use any of the advanced features of the Android SDK or Android NDK (not supported), the only things I had to do were:</p>
<ul>
<li>Convert the Android project by <a href="https://bdsc.webapps.blackberry.com/android/documentation/add_blackberry_nature_1984898_11.html">adding a &#8220;blackberry nature&#8221;</a></li>
<li>Remove the Android references in the app (CTRL-F &#8220;Android&#8221;)</li>
<li>Resized the application icon to 86&#215;86 pixels</li>
<li>Test the app in the simulator</li>
</ul>
<p>From the list above, I&#8217;d say that testing the app on the simulator was the most time consuming. Blackberry provides a &#8220;BlackBerry Tablet Simulator&#8221;, but it is actually a virtual drive image with the Playbook software pre-loaded that you can run in VMWare Player.</p>
<p>If you thought the Android emulator was already slow compared to the iOS simulator, think again. Booting up the Playbook takes quite a bit (it feels like booting a desktop OS), and the interaction with the mouse feels a bit sluggish. After the Tablet OS is fully booted, its time to put it in development mode. This allows you to connect to the simulator from Eclipse. Recompiling the Android project and installing it into the simulator feels almost the same as using the Android emulator. Just hit the play button.</p>
<p>Unfortunately the Playbook simulator isn&#8217;t all that great for testing your converted BlackBerry apps. In my case the screen flickering was really bad and fonts were blurred (Native BB apps were alright though). Reading the <a href="http://supportforums.blackberry.com/t5/BlackBerry-App-World-Development/bd-p/appworld_dev">BlackBerry Dev forums</a>, it seem to be an issue with the simulator, so hopefully it looks good on the real device.</p>
<p>The only real trouble I had was signing the app itself to prepare it for the BlackBerry App World. I was following the steps from the Youtube video above. However, BB changed the names of the dropdown menus in Eclipse. Fortunately the documents describe how to do this properly: <a href="https://bdsc.webapps.blackberry.com/android/documentation/sign_your_app_1985461_11.html">Sign your app</a>.</p>
<p style="text-align: center;"><a href="http://www.multigesture.net/wp-content/uploads/2012/02/fircsign.jpg"><img class="wp-image-2223 aligncenter" title="fircsign" src="http://www.multigesture.net/wp-content/uploads/2012/02/fircsign.jpg" alt="" width="519" height="130" /></a></p>
<h3>Final thoughts</h3>
<p>For me porting fIRC to the BlackBerry platform seemed to be a quite painless experience. However, I would advice you to test apps thoroughly on the Android Emulator and when you&#8217;re ready for release, test it out on a real Playbook instead of the simulator. That would probably give you a much smoother workflow.</p>
<p>For me that will hopefully soon be possible. Last week I received an e-mail from RIM that my application was accepted to the BlackBerry App World and that I would receive a free Playbook soon <img src='http://www.multigesture.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<p>The latest version of fIRC for your chatting pleasure is now available from the <a href="https://market.android.com/details?id=com.epicwindmill.fIRC">Android market</a> (Android devices 2.1 and higher) and the <a href="http://appworld.blackberry.com/webstore/content/84131/?lang=en">BlackBerry App World</a> (BlackBerry Playbook)!</p>
<p><a href="http://www.multigesture.net/wp-content/uploads/2012/02/device-2012-02-06-235632.png"><br />
</a></p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2012/02/22/rewriting-and-porting-firc/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Epic Windmill</title>
		<link>http://www.multigesture.net/2012/02/06/epic-windmill/</link>
		<comments>http://www.multigesture.net/2012/02/06/epic-windmill/#comments</comments>
		<pubDate>Mon, 06 Feb 2012 15:55:41 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[Blogroll]]></category>
		<category><![CDATA[Featured]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=2195</guid>
		<description><![CDATA[It&#8217;s official now, I&#8217;m proud owner of my new startup company Epic Windmill. As this blog served as my online portfolio of research work I contributed to, Epic Windmill will be serving as a place for my creative and casual software projects. For the time being, it will focus on the development of applications for handheld [...]]]></description>
				<content:encoded><![CDATA[<p>It&#8217;s official now, I&#8217;m proud owner of my new startup company <a href="http://epicwindmill.com/">Epic Windmill</a>.</p>
<p>As this blog served as my online portfolio of research work I contributed to, Epic Windmill will be serving as a place for my creative and casual software projects. For the time being, it will focus on the development of applications for handheld devices such as smartphones and tablets (Android and iOS).</p>
<p>Currently two apps are already available from the Android Market, <a href="https://market.android.com/details?id=com.AffinityBlue.NodeBeat">NodeBeat</a> (a creative audio sequencer) and <a href="http://epicwindmill.com/firc/">fIRC</a> (a free chat app). We&#8217;re preparing a release for NodeBeat so be sure to follow <a href="https://twitter.com/#!/nodebeat">@NodeBeat</a> for more details. A new fIRC will be released later this month.</p>
<p>- Laurence</p>
<p>p.s. Don&#8217;t forget to follow us on Twitter <a title="Follow us on Twitter" href="https://twitter.com/#!/EpicWindmill" target="_blank">@EpicWindmill</a> and like us on <a title="Epic Windmill on Facebook" href="https://www.facebook.com/epicwindmill" target="_blank">Facebook</a>!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2012/02/06/epic-windmill/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>NodeBeat, openFrameworks and Android</title>
		<link>http://www.multigesture.net/2011/11/19/nodebeat-openframeworks-and-android/</link>
		<comments>http://www.multigesture.net/2011/11/19/nodebeat-openframeworks-and-android/#comments</comments>
		<pubDate>Sat, 19 Nov 2011 20:52:49 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Application]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Howto]]></category>
		<category><![CDATA[Multitouch]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[multitouch]]></category>
		<category><![CDATA[technology]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=2095</guid>
		<description><![CDATA[Last month we (Seth Sandler and yours truly) released the Android port of the popular iPhone/iPad music application NodeBeat. NodeBeat was created by Seth Sandler and Justin Windle earlier this year and released in April for the iOS platform. It is an experimental node-based audio sequencer and generative music application. By combining music and playful exploration, NodeBeat [...]]]></description>
				<content:encoded><![CDATA[<p>Last month we (<a href="http://www.sethsandler.com/">Seth Sandler</a> and yours truly) released the Android port of the popular iPhone/iPad music application <a href="http://nodebeat.com/">NodeBeat</a>.</p>
<p>NodeBeat was created by <strong>Seth Sandler</strong> and <strong>Justin Windle</strong> earlier this year and released in April for the iOS platform. It is an experimental node-based audio sequencer and generative music application. By combining music and playful exploration, NodeBeat allows anyone to create an exciting variety of rhythmic sequences and ambient melodies in a fun and intuitive fashion.</p>
<p><iframe src="http://player.vimeo.com/video/30325679" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<h2>How Does it Work?</h2>
<p>Octaves and Notes make up the two types of nodes. Octaves pulse and send messages to Notes within proximity. Each Octave is assigned a random octave and each Note, a random note; therefore, a Note will play in several octaves depending on the Octave it’s connected to. Pause nodes to create your own beats or let them roam free to have them generate their own.</p>
<p><iframe src="http://player.vimeo.com/video/27323966" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<h2>Cross platform development</h2>
<p>Because NodeBeat was developed using the C++ based open source framework <a href="http://www.openframeworks.cc/">openFrameworks</a>, I did not expected a lot of trouble getting the core to work on Android. However, since the Android port of openFarmworks is still pretty new (we&#8217;re using the <a href="https://github.com/openframeworks/openFrameworks/tree/develop">development branch</a>) and officially only supported on the <a href="http://www.openframeworks.cc/setup/android-eclipse">Mac and Linux platforms</a>, I decided to put some effort into making it work on Windows as well. I&#8217;m a Windows user and developer, so if I can avoid dualbooting, I will <img src='http://www.multigesture.net/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> .</p>
<h2>Native Development Kit</h2>
<p>As soon as you want to use C or C++ in your Android projects, you will have to install the <a href="http://developer.android.com/sdk/ndk/index.html">Native Development Kit</a> (NDK). It basically allows you to compile your code into a library which you can access using <a href="http://en.wikipedia.org/wiki/Java_Native_Interface">JNI calls</a>. While in general it is recommend to code using the <a href="http://developer.android.com/sdk/index.html">SDK in Java</a> for your Android projects (the Dalvik VM with JIT show really good performance), lazy coders (like me <img src='http://www.multigesture.net/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> ) are always trying to find ways to reuse existing code. Instead of having a native codebase for iOS (in Objective-C) and Android (in Java), it is nicer to have a shared core in C++ with a thin layer (Obj-C or Java) to interface with it. Sure the NDK might sound intimidating at first sight and Google doesnt recommend it unless you know what you&#8217;re doing, but honestly I don&#8217;t think its rocket science either. After downloading the NDK, you will need to setup a unix like environment such as <a href="http://www.mingw.org/">MinGW</a> or <a href="http://www.cygwin.com/">Cygwin</a>.</p>
<p>For my previous projects I already had MinGW installed (you could use Cygwin, but in general I don&#8217;t like their approach). I did a fresh <a href="https://github.com/openframeworks/openFrameworks/tree/develop">checkout from Github</a> and started to mess around with the Makefiles to see if it would compile.</p>
<p>It turned out that all I had to do is replacing a few IF statements (the ones that are checking the build platform) and make them point to the NDK location on my Windows computer. I&#8217;ve <a href="http://www.multigesture.net/articles/how-to-setup-openframeworks-for-android-on-windows/">created a tutorial</a> that explains the steps if you want to try it out yourself. However, if you want to use openFrameworks for your own Android applications, I would highly recommend just using my <a href="https://github.com/falcon4ever/openFrameworks">openFrameworks fork</a> instead (until they accept my pull request). It includes all the patches from the tutorial and it should be compatibly with the latest NDK. The <a href="http://www.multigesture.net/articles/how-to-setup-openframeworks-for-android-on-windows/">tutorial</a> actually also explains how to run one of the examples so be sure to check that out.</p>
<h2>Porting the GUI</h2>
<p>For the UI I wanted to stay as close to the iOS version as possible. As I don&#8217;t own an iOS device, Seth gave me some screenshots of NodeBeat running on iOS which I used as a reference.</p>
<p>Since the iOS and Android framework are quite distinct, there are cases where I had to do an alternative implementation. For example, on Android most devices have the following buttons:</p>
<ul>
<li>Back</li>
<li>Menu</li>
<li>Home</li>
<li>Search</li>
</ul>
<div>The iOS devices only have one button which brings you back to the home screen. In the original implementation of NodeBeat on iOS, there is a shortcut on the canvas that popup a menubar allowing you to access different option menus. On Android however we can use the <strong>options menu</strong> which allows us to control the flow of the application. </p>
<h3>Example: Menu bar</h3>
<p>So instead of writing the menu code in C++, I only had to create a <a href="http://developer.android.com/guide/topics/ui/menus.html#options-menu">XML file for the option menu</a>. It looks like this:</div>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menu</span> <span style="color: #000066;">xmlns:android</span>=<span style="color: #ff0000;">&quot;http://schemas.android.com/apk/res/android&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;item</span> <span style="color: #000066;">android:id</span>=<span style="color: #ff0000;">&quot;@+id/node&quot;</span></span>
<span style="color: #009900;">          <span style="color: #000066;">android:icon</span>=<span style="color: #ff0000;">&quot;@drawable/node_icon&quot;</span></span>
<span style="color: #009900;">          <span style="color: #000066;">android:title</span>=<span style="color: #ff0000;">&quot;Node&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;item</span> <span style="color: #000066;">android:id</span>=<span style="color: #ff0000;">&quot;@+id/audio&quot;</span></span>
<span style="color: #009900;">          <span style="color: #000066;">android:icon</span>=<span style="color: #ff0000;">&quot;@drawable/audio_icon&quot;</span></span>
<span style="color: #009900;">          <span style="color: #000066;">android:title</span>=<span style="color: #ff0000;">&quot;Audio&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
          ...
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/menu<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<div>Basically you define a unique id (this allows you to reference it in the Java source code), tell it which icon to use and give it a title. You need to do this for every entry, but apart from that, the Android framework will handle how to display it (depending on orientation and the number of menu items)</p>
<p>After the user touches the menu button on Android, it will popup the option menu:</p></div>
<p><img title="menu-ios" src="http://www.multigesture.net/wp-content/uploads/2011/11/menu-ios-152x300.png" alt="" width="152" height="300" /> <a href="http://www.multigesture.net/wp-content/uploads/2011/11/Arrow1.png"><img title="Arrow" src="http://www.multigesture.net/wp-content/uploads/2011/11/Arrow1.png" alt="" width="100" height="300" /></a> <img title="menu-android" src="http://www.multigesture.net/wp-content/uploads/2011/11/menu-android-180x300.png" alt="" width="180" height="300" /></p>
<h3>Example: Audio menu</h3>
<div>Other menu elements such as the popup menu for the Audio, Rhythm and Settings menu required a different approach. I could&#8217;ve switched Views on Android, but in my opinion that would be a bad UI design decision. The problem with this is that the user would be taken away from the NodeBeat activty. Instead I much more prefer to use the <a href="http://developer.android.com/guide/topics/ui/menus.html#context-menu">context menu</a> that the Android framework provides. This menu popups up and is placed over your current Activity. </p>
<p>While it is on the foreground, the activity in the background is still visible and continues running. Another benefit of this approach is that the user will get immediate feedback when adjusting the audio settings. As like the menu, this <a href="http://developer.android.com/guide/topics/ui/layout-objects.html">UI layout</a> is created entirely in XML.</div>
<p><img class="alignnone size-medium wp-image-2110" title="audiomenu-ios" src="http://www.multigesture.net/wp-content/uploads/2011/11/audiomenu-ios-153x300.png" alt="" width="153" height="300" /> <a href="http://www.multigesture.net/wp-content/uploads/2011/11/Arrow1.png"><img title="Arrow" src="http://www.multigesture.net/wp-content/uploads/2011/11/Arrow1.png" alt="" width="100" height="300" /></a> <img class="alignnone size-medium wp-image-2108" title="audiomenu-android" src="http://www.multigesture.net/wp-content/uploads/2011/11/audiomenu-android-180x300.png" alt="" width="180" height="300" /></p>
<h3>Example: Recording dialog</h3>
<div>In some cases the context menu might be a bit of overkill if you want to let the user decide on a question. For example, in the example below we want to inform the user how to record his NodeBeat creation. All we need is a simple dialog that either lets the user confirm the action or decline it. In such cases Android provides dialogs which can be build with an <a href="http://developer.android.com/guide/topics/ui/dialogs.html">AlertDialog.Builder</a>
</div>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="java" style="font-family:monospace;">AlertDialog.<span style="color: #006633;">Builder</span> builder <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> AlertDialog.<span style="color: #006633;">Builder</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
builder.<span style="color: #006633;">setMessage</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;You can stop recording by pressing the record button in the menu again&quot;</span><span style="color: #009900;">&#41;</span>
       .<span style="color: #006633;">setCancelable</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span>
       .<span style="color: #006633;">setPositiveButton</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Yes&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> DialogInterface.<span style="color: #006633;">OnClickListener</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
           <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onClick<span style="color: #009900;">&#40;</span>DialogInterface dialog, <span style="color: #000066; font-weight: bold;">int</span> id<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Start recording</span>
           <span style="color: #009900;">&#125;</span>
       <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
       .<span style="color: #006633;">setNegativeButton</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;No&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> DialogInterface.<span style="color: #006633;">OnClickListener</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
           <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onClick<span style="color: #009900;">&#40;</span>DialogInterface dialog, <span style="color: #000066; font-weight: bold;">int</span> id<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                dialog.<span style="color: #006633;">cancel</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// Cancel dialog</span>
           <span style="color: #009900;">&#125;</span>
       <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
AlertDialog alert <span style="color: #339933;">=</span> builder.<span style="color: #006633;">create</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
alert.<span style="color: #006633;">setTitle</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Start recording&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><a href="http://www.multigesture.net/wp-content/uploads/2011/11/recording-ios.png"><img class="alignnone size-medium wp-image-2122" title="recording-ios" src="http://www.multigesture.net/wp-content/uploads/2011/11/recording-ios-152x300.png" alt="" width="152" height="300" /></a> <a href="http://www.multigesture.net/wp-content/uploads/2011/11/Arrow1.png"><img class="alignnone size-full wp-image-2119" title="Arrow" src="http://www.multigesture.net/wp-content/uploads/2011/11/Arrow1.png" alt="" width="100" height="300" /></a> <img class="alignnone size-medium wp-image-2123" style="border-style: initial; border-color: initial;" title="recording-android" src="http://www.multigesture.net/wp-content/uploads/2011/11/recording-android-180x300.png" alt="" width="180" height="300" /></p>
<h2>Using JNI Callbacks</h2>
<p>After we&#8217;ve ported the UI, we still need to pass on our settings to the core application. Fortunately we can use JNI callbacks to get and set NodeBeat&#8217;s properties. It is good to know that you should minimize the number of JNI callbacks for performance reasons (so don&#8217;t go mental and call tons of JNI methods each time you render a frame). </p>
<p>Let say we would like to pass a value from one of the sliders from the Audio context menu to our NodeBeat core. In such case we first create a new static method in our Java source file:</p>
<h3>OFActivity.java</h3>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">native</span> <span style="color: #000066; font-weight: bold;">void</span> sliderChanged<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">float</span> v<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>It is important to use the <code>static</code> and <code>native</code> keyword when you define your method. This is all we need to do in our java code and this method can be used anywhere in our java class.</p>
<p>Now the tricky part is how to implement the function on the C++ side of your application. It&#8217;s not exactly complex, but you will have to pay attention to a few details. Three things are important here:</p>
<ol>
<li>The namespace (in Java)</li>
<li>The class name</li>
<li>The method name</li>
</ol>
<p>If we assume we&#8217;re implementing this callback in one of the openFrameworks examples, this means:</p>
<ol>
<li>The namespace (in Java): cc.openframeworks.androidEmptyExample</li>
<li>The class name: OFActivity</li>
<li>The method name: sliderChanged</li>
</ol>
<h3>main.cpp</h3>
<p>Here is the code you implement in C++</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="cpp" style="font-family:monospace;"><span style="color: #339900;">#include &lt;jni.h&gt;</span>
<span style="color: #0000ff;">extern</span> <span style="color: #FF0000;">&quot;C&quot;</span><span style="color: #008000;">&#123;</span>
<span style="color: #0000ff;">void</span> Java_cc_openframeworks_androidEmptyExample_OFActivity_sliderChanged <span style="color: #008000;">&#40;</span>JNIEnv<span style="color: #000040;">*</span>  env, jclass  thiz, jfloat value<span style="color: #008000;">&#41;</span><span style="color: #008000;">&#123;</span>
<span style="color: #666666;">// Do smth here</span>
<span style="color: #008000;">&#125;</span></pre></td></tr></table></div>

<p>As ugly as this method looks like, take a brief look at how it is constructed. It starts with the return type (which is void just like how we specified it in Java). Next it starts with <code>Java_</code> and is succeeded by <code>the namespace</code>, <code>classname </code>, <code>method name</code>. All dots from the namespace are replaced by underscores and between each element we place an underscore as well. </p>
<p>In the arguments list, the &#8220;JNIEnv*  env, jclass  thiz&#8221; part is mandatory (so if you have a something like this: <code>public static native void methodname()</code>, it would <code>be void methodname(JNIEnv*  env, jclass  thiz)</code>). For our method we want to pass a float as argument. For some reasons you can&#8217;t just pass a float, you will need to use <a href="http://en.wikipedia.org/wiki/Java_Native_Interface#Mapping_types">JNI mapping types</a>. The float becomes a jfloat.<br />
Note: for booleans you need to compare the value to <strong>JNI_TRUE</strong> or <strong>JNI_FALSE</strong> and not to <strong>true</strong> or <strong>false</strong>.</p>
<h2>Honeycomb Tablets</h2>
<p>Unlike the iOS devices from Apple, Android devices run at so many <a href="http://developer.android.com/guide/practices/screens_support.html">different configurations</a> and API levels, it can be a bit tricky to support all of them. For NodeBeat we decided to create two versions: A phone version and tablet version. We basically distinguish between phones who are running Eclair or Gingerbread (2.2+) and tablets running Honeycomb (3.0). On the Android Market it seems like we only provide one version, but depending on what device you&#8217;re using to download the app, it will give you a <a href="http://developer.android.com/guide/practices/screens-distribution.html#MultiApks">certain version</a>.</p>
<p>In order to maximize the use of the display, I&#8217;m using this line in the AndroidManifest.xml file:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;">android:theme=&quot;@android:style/Theme.NoTitleBar.Fullscreen&quot;</pre></td></tr></table></div>

<p>On phones it sets the application to fullscreen. While this works for anything running Android 2.2+, it is a problem on Honeycomb devices. Honeycomb tablets don&#8217;t have any physical buttons and when the application is running in fullscreen mode, there is no shortcut to the menu button. This shortcut is normally placed in the top right corner.</p>
<p><a class="thickbox" title="Honeycomb's menu in the top right corner" href="http://www.multigesture.net/wp-content/uploads/2011/11/P20111010235419.png"><img class="alignnone size-medium wp-image-2102" title="P20111010235419" src="http://www.multigesture.net/wp-content/uploads/2011/11/P20111010235419-300x187.png" alt="" width="300" height="187" /></a></p>
<p>This means that for the tablet version, we run the application in regular display mode.<br />
Other than that, NodeBeat provides a rich user experience on tablet devices such as the XOOM or Asus transfomer.</p>
<p>Earbleeding masterpiece created by <a href="http://sharathpatali.wordpress.com/">Sharath Patali</a> (professional coder, horrific musician)<br />
<a class="thickbox" title="Earbleeding masterpiece created by Sharath Patali (professional coder, horrific musician)" href="http://www.multigesture.net/wp-content/uploads/2011/11/P20111011000238.png"><img class="alignnone size-medium wp-image-2101" title="P20111011000238" src="http://www.multigesture.net/wp-content/uploads/2011/11/P20111011000238-300x187.png" alt="" width="300" height="187" /></a></p>
<h2>Android Market</h2>
<p>Publishing the app to the Android market is no hassle at all (we were just a bit <a href="http://createdigitalmusic.com/2011/10/nodebeat-visual-sequencer-for-ios-android-built-with-free-tools-back-on-android-market/">unfortunate</a> and had our app pulled down by accident). There is no annual fee (just a one time 25$) and apps are approved instantly. The dev guide provides a <a href="http://developer.android.com/guide/publishing/publishing_overview.html">comprehensive overview</a> on how to build your project in release mode and how to sign it.</p>
<h2>Go get it!</h2>
<p><strong>NodeBeat is available on the Android market</strong>:<br />
<a href="https://market.android.com/details?id=com.AffinityBlue.NodeBeat">https://market.android.com/details?id=com.AffinityBlue.NodeBeat</a></p>
<p><strong>Try it out! It&#8217;s just a dollar</strong> <img src='http://www.multigesture.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Website: <a href="http://nodebeat.com/">http://nodebeat.com/</a><br />
Twitter: <a href="http://twitter.com/NodeBeat">http://twitter.com/NodeBeat</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2011/11/19/nodebeat-openframeworks-and-android/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>An introduction to emulation</title>
		<link>http://www.multigesture.net/2011/03/29/an-introduction-to-emulation/</link>
		<comments>http://www.multigesture.net/2011/03/29/an-introduction-to-emulation/#comments</comments>
		<pubDate>Mon, 28 Mar 2011 22:35:32 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[Blogroll]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Howto]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[diy]]></category>
		<category><![CDATA[emulation]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=1847</guid>
		<description><![CDATA[In the early 90s I primarly used my Commodore 64 (C64) for gaming. As Santa never gave us a Nintendo, I probably used my C64 until the late 90s. At that point I was introduced to the concept of emulators. Emulators are computer programs that allow you to run software that wasn&#8217;t designed for your [...]]]></description>
				<content:encoded><![CDATA[<p>In the early 90s I primarly used my <a href="http://www.youtube.com/watch?v=eY2gK1MPgh8">Commodore 64 (C64) for gaming</a>. As <a href="http://www.youtube.com/watch?v=a8q-elxC6gU">Santa never gave us a Nintendo</a>, I probably used my C64 until the late 90s. At that point I was introduced to the concept of emulators. Emulators are computer programs that allow you to run software that wasn&#8217;t designed for your computer platform. For example, with emulators you could run games from the NES or Sega Master System on PCs. Nowadays computers have enough resources to run games from modern consoles such as the <a href="http://www.dolphin-emulator.com/">Nintendo Gamecube/Wii</a> and <a href="http://pcsx2.net/">Playstation 2</a>.</p>
<p>Of course, there is always the debate whether it is legal to build an emulator. Console manufacturers will <a href="http://www.nintendo.com/corp/legal.jsp#emulator">always forbid</a> any type of emulation of their systems. Although its a rather grey area as most documents on the chip design are publicly available (e.g. MIPS / ARM instruction sets).</p>
<p><a class="thickbox" title="Space Invaders" href="http://www.multigesture.net/wp-content/uploads/2011/03/spaceinvaders.jpg"><img class="size-medium wp-image-1702 aligncenter" title="Space Invaders" src="http://www.multigesture.net/wp-content/uploads/2011/03/spaceinvaders-300x150.jpg" alt="" width="300" height="150" /></a></p>
<p>Since I got excited about emulation in general, I started to do some research on how to build one myself. As I didn&#8217;t want to spend days or even weeks to get some results, I looked for a simple system. A friend introduced me to a small system called the <a href="http://en.wikipedia.org/wiki/CHIP-8">Chip 8</a>.<br />
The Chip 8 itself didn&#8217;t existed as a hardware system, but was implemented in software. Due to the small instruction set (<a href="http://en.wikipedia.org/wiki/CHIP-8#Opcode_table">~30 opcodes</a>), it was a very good candidate to work on as a first emulation project. The instruction set defines the functionality of the CPU. It for example contains instructions that allow the CPU to load or store data, but also perform mathematical tasks such as multiplications.</p>
<p>Having worked on a couple of emulation projects (and emulator plugins), I started to write a guide that will hopefully help out aspiring emulator authors and inspire emulation enthusiast. The guide explains how emulators work and provides a detailed overview on how to write a Chip 8 interpreter from scratch.</p>
<p>Writing a Chip 8 emulator shouldn&#8217;t be too time consuming. On average people tend to finish such project in one or two days. It&#8217;s a fun project to test out your programming skills and of course quite educational (and it isn&#8217;t just for CS majors <img src='http://www.multigesture.net/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> )</p>
<p>If you&#8217;re ready to take up the challenge, click the link below! Have fun!</p>
<ul>
<li><a href="http://www.multigesture.net/articles/how-to-write-an-emulator-chip-8-interpreter/">How to write an emulator (CHIP-8 interpreter)</a></li>
</ul>
<p><a class="thickbox" title="Brix: a Breakout clone" href="http://www.multigesture.net/wp-content/uploads/2011/03/brix.jpg"><img class="size-medium wp-image-1699 aligncenter" title="Brix" src="http://www.multigesture.net/wp-content/uploads/2011/03/brix-300x150.jpg" alt="" width="300" height="150" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2011/03/29/an-introduction-to-emulation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Earth Friends, a social network visualization</title>
		<link>http://www.multigesture.net/2010/12/31/earth-friends-a-social-network-visualization/</link>
		<comments>http://www.multigesture.net/2010/12/31/earth-friends-a-social-network-visualization/#comments</comments>
		<pubDate>Fri, 31 Dec 2010 01:59:33 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Infovis]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[google earth]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[infovis]]></category>
		<category><![CDATA[technology]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=1385</guid>
		<description><![CDATA[Last week I blogged about a new project I was working on. For the past few days I went through the code again and decided to clean it up a bit for the release. It is pretty much completed now, therefor I have made it available on Facebook. Summary: &#8220;Earth Friends is a free Facebook [...]]]></description>
				<content:encoded><![CDATA[<p>Last week I blogged about <a href="http://www.multigesture.net/2010/12/21/where-are-you/">a new project</a> I was working on. For the past few days I went through the code again and decided to clean it up a bit for the release. It is pretty much completed now, therefor I have made it available on Facebook.</p>
<p>Summary:<br />
<em>&#8220;Earth Friends is a free Facebook application to visualize your social network on Google Earth. Locate your friends by using the Google Earth Webplugin or download your personal datafile for use with the Desktop version of Google Earth.&#8221;</em></p>
<h2>Rewriting&#8230;</h2>
<p>While my code from last week was running fine, there was a lot of room for improvement. Basically three major parts changed:</p>
<ol>
<li>The database structure</li>
<li>Using a template engine</li>
<li>File compression</li>
</ol>
<h3>MySQL</h3>
<p>The first thing I worked on was the database itself. The local database is primarily used for converting a location (defined by a city, state and country name) to a latitude and longitude.<br />
Each time we need a location, we query the database, simple as that.</p>
<p>So let&#8217;s look at the following example:<br />
First assume you have about 100 friends on Facebook. Probably most of them share their current location, but some of them might not want to share their location with Facebook apps or simply did not filled out the location at all.<br />
If 75 friends filled this field with their current location, the old code would query the database 76 times (75 times for your friends + 1 time for your location).</p>
<p>While this looks like a lot of queries, the time for a query to complete also depends on the design of the database. As I was using <a href="http://www.maxmind.com/app/worldcities">MaxMind cities database</a>, I initially imported all the data into one MySQL table. Just because it was convient to work with. However, the dataset has about 2.699.356 entries (cities).<br />
Doing a search 75 times within this table was not going to be fast&#8230;</p>
<p><img class="aligncenter size-full wp-image-1399" src="http://www.multigesture.net/wp-content/uploads/2010/12/database.jpg" alt="" width="520" height="164" /></p>
<p>Besides the users&#8217; patience, I am also limited by PHP&#8217;s execution time limit. I think that scripts are often allowed to run for 30 or 60 seconds, although I can&#8217;t stand a website that is taking longer than 10 seconds to show up.</p>
<p>So what to do next? Can we find a way to split the database into multiple small tables? Just limiting the number of entries to a fixed number (e.g. 100.000) wasn&#8217;t going to work as I would need some kind of lookup system in order to figure out where I could find my city.</p>
<p><strong>Improvement one</strong><br />
The easiest solution I found for it (not saying its perfect) was by splitting the database by country. In my case I have 231 countries in the database, thus 231 tables are created. </p>
<p>Taking a look at the top 3 countries in our database reveals the following:</p>
<ul>
<li>Russia &#8211; 176.934 cities</li>
<li>USA &#8211; 141.989 cities</li>
<li>China &#8211; 117.508 cities</li>
</ul>
<p>The average number per country is around the 20.000 cities. While the top 3 shows a significant higher quantity than the average, look ups are performed <em>much</em> faster than before.</p>
<p><strong>Improvement two</strong><br />
We could&#8217;ve stopped here with improving the database part as the results were reasonable. However, it is a small effort to tweak it a bit more. </p>
<p>In our example, we query 76 locations from the database. But wait&#8230; <strong>what</strong> did we query? The <strong>location</strong> of <strong>friends</strong>! And what do a lot of friends have in common? Right, they share the <strong>same location</strong>. So by first creating a list of cities we need to look up, we can reduce the number of queries required to collect our data.</p>
<h3>Smarty Template Engine</h3>
<p>While PHP provides a nice environment for rapid prototyping, it can also become a mess easily. Using print or echo statements is fine for testing purposes but it is better to <a href="http://www.smarty.net/why_use">keep code separated from HTML</a>.</p>
<p>This is why you need to use template engines. When using a template engine, you first collect data from your database and then parse your variables and arrays to the template engine. In your templates you specify where this data need to be placed. (Summary: PHP is used for data collection and prepared into arrays, Template engines use these arrays and are used for the actual design of the website).<br />
Fortunately, there are free open source template engines such as <strong><a href="http://www.smarty.net/">Smarty</a></strong>.</p>
<p>Take a look at the following code:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="smarty" style="font-family:monospace;"><span style="color: #008080; font-style: italic;">{* Add placemark for friends *}</span>
<span style="color: #D36900;">&#123;</span><span style="color: #0600FF;">foreach</span> <span style="color: #00aaff;">$friendlist</span> as <span style="color: #00aaff;">$friend</span><span style="color: #D36900;">&#125;</span>
  <span style="color: #009000;">&lt;Placemark&gt;</span>
    <span style="color: #009000;">&lt;name&gt;</span><span style="color: #D36900;">&#123;</span><span style="color: #00aaff;">$friend</span>.<span style="color: #6A0A0A;">name</span><span style="color: #D36900;">&#125;</span><span style="color: #009000;">&lt;/name&gt;</span>
    <span style="color: #009000;">&lt;styleUrl&gt;</span>#<span style="color: #D36900;">&#123;</span><span style="color: #00aaff;">$friend</span>.<span style="color: #006600;">uid</span><span style="color: #D36900;">&#125;</span><span style="color: #009000;">&lt;/styleUrl&gt;</span>
    <span style="color: #009000;">&lt;Point&gt;</span>	
      <span style="color: #009000;">&lt;coordinates&gt;</span><span style="color: #D36900;">&#123;</span><span style="color: #00aaff;">$friend</span>.<span style="color: #006600;">lon</span><span style="color: #D36900;">&#125;</span>,<span style="color: #D36900;">&#123;</span><span style="color: #00aaff;">$friend</span>.<span style="color: #006600;">lat</span><span style="color: #D36900;">&#125;</span>,0<span style="color: #009000;">&lt;/coordinates&gt;</span>
    <span style="color: #009000;">&lt;/Point&gt;</span>
  <span style="color: #009000;">&lt;Placemark&gt;</span>
<span style="color: #D36900;">&#123;</span><span style="color: #D36900;">/</span><span style="color: #0600FF;">foreach</span><span style="color: #D36900;">&#125;</span></pre></td></tr></table></div>

<p>This is an actual code snippet from the template responsible for generating the KML. This particular section is used to display your friends icon on Google Earth. </p>
<p>Within the template I can specify a block (in the example its a Placemark) that will be looped. After <a href="http://www.smarty.net/crash_course">setting up Smarty</a> and collecting data from the database, I pass the result (<strong>$friendlist</strong>) to Smarty. In the template engine, it will now perform loop through this foreach loop and place the variables in the correct location.</p>
<p>A few more benefits of using a template engine is that you can store the results in a cache. By caching the results we can skip &#8216;expensive&#8217; MySQL queries if we know the page hasn&#8217;t changed. By specifying the cache lifetime (for example 30 minutes), we can make sure that Smarty will regenerate the page if the cached page is older than 30 minutes.</p>
<h3>ZIP</h3>
<p>In the previous version of Earth Friends, I embedded the KML file into the header of the website (in Javascript). While this method works fine for small data sets, it has a large impact on page loading and render times when data sets are growing.</p>
<p>KML files are plain text files formatted in XML. Besides KML files, Google Earth also accept compressed KML files which have the extension KMZ. KMZ files are basically KML files compressed with <a href="http://en.wikipedia.org/wiki/ZIP_(file_format)">ZIP</a>.<br />
Tests show noticeable differences in loading times when using KMZ. For example, my test data set in KML was about 693 KB. After compressing this file using zip (max. compression), the size was reduced to 92 KB. That&#8217;s around 13% of the original file size! As a result, loading times were reduced significantly.</p>
<h2>Where can I find the application?</h2>
<p>Ready to try out this application on facebook? Just click the following link to open up Earth Friends: <a href="http://apps.facebook.com/earthfriends/" target="_blank">Earth Friends application on Facebook</a>.</p>
<p>After authorizing Earth Friends to access your profile data, it will reload the page and launch the Google Earth browser plugin. If the plugin is not installed, please follow the instructions that are displayed instead. The plugin should work in Windows and Mac OS X.</p>
<p><strong>Important</strong>: Make sure you set your own location (with the correct privacy settings) or the curves will not appear!</p>
<p>More information can be found on <a href="https://www.facebook.com/EarthFriendsCommunity" target="_blank">Earth Friends Community page on Facebook</a>.</p>
<h2>How to use this?</h2>
<p>To help you get started with Earth Friends, I have created two screencasts which demonstrate you how to add Earth Friends to your Facebook account and use the application.</p>
<p>Tutorial 1: How to use Earth Friends (View in 720p HD)</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/oz61wN5vqt0?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Tutorial 2: How to download the KMZ file for Google Earth Desktop (View in 720p HD)</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/Q5gvVePJOqg?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/12/31/earth-friends-a-social-network-visualization/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Where are you?</title>
		<link>http://www.multigesture.net/2010/12/21/where-are-you/</link>
		<comments>http://www.multigesture.net/2010/12/21/where-are-you/#comments</comments>
		<pubDate>Tue, 21 Dec 2010 16:06:59 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Infovis]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[google earth]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[infovis]]></category>
		<category><![CDATA[technology]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=1304</guid>
		<description><![CDATA[Last weekend I&#8217;ve been working on a new project. Since I already had some experience  generating KML files for use with Google Earth (wikileaks projects!) I started to think of something else that I could visualize&#8230; perhaps see where my friends are? Because I&#8217;m using Facebook to connect with my friends, I decided to dig into the [...]]]></description>
				<content:encoded><![CDATA[<p>Last weekend I&#8217;ve been working on a new project. Since I already had some experience  generating <a href="http://code.google.com/apis/kml/documentation/">KML files</a> for use with <a href="http://www.google.com/earth/index.html">Google Earth</a> (wikileaks projects!) I started to think of something else that I could visualize&#8230; perhaps see where my friends are?</p>
<p>Because I&#8217;m using Facebook to connect with my friends, I decided to dig into the documentation of the facebook APIs. Apparently there are multiple ways to get hold of your and your friends information. The most commonly used APIs are: <a href="http://developers.facebook.com/docs/api">Graph API</a> / <a href="http://developers.facebook.com/docs/reference/fql/">FQL</a> . The first one lets you retrieve information about a friend or page by loading a specific URL, the second one lets you actually send a SQL query to retrieve the  information.</p>
<p>Since I want to make this a hassle free experience, I decided to make a Facebook application which would use the <a href="http://code.google.com/apis/earth/">Google Earth Web plugin</a>. This way, users only need to download the plugin, but everything works just in the browser.</p>
<p><img src="http://www.multigesture.net/wp-content/uploads/2010/12/fbbanner.jpg" alt="Finding friends on Google Earth" title="Finding friends on Google Earth" width="520" height="196" class="aligncenter size-full wp-image-1361" /></p>
<h2>How does it work?</h2>
<p>Basically a Facebook app is just a website running on some server. In my case, I&#8217;m hosting my application on the same domain as my blog. Since the application is embedded into the Facebook website, normal users won&#8217;t notice. The app itself can be written in all kinds of languages but <a href="https://github.com/facebook/php-sdk/">for the sake of simplicity I used PHP</a>.</p>
<p>First we need to connect to Facebook using an <a href="https://github.com/facebook/php-sdk/">API/SDK</a>. This allows us to authenticate and securely connect to the Facebook servers. After enstablishing a connection, we use FQL to query: Our friendslist and the location of our friends. Unfortunately the friendslist only contains the name of the location and not the geospatial coordinates.</p>
<p>Therefor I had to create a lookup database that would translate a City/State/Country name into a geospatial coordinate (latitude and longitude). This was done by downloading a free database from <a href="http://www.maxmind.com/app/worldcities">Maxmind.com</a>.</p>
<p>Now we should have all data available to create our KML file on the fly. For now I embed the KML result into the javascript header which seems to work fine for ~200 friends. I still need to do some benchmarks to see how well this scales. A demonstration video of the result can be found below:</p>
<h2>Video</h2>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/LpAFybFQVVE?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>Can I try?</h2>
<p>Since this project is still WIP, it is not available yet in the Facebook Application Directory. I&#8217;m planning to release this application for free soon.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/12/21/where-are-you/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Wikileaks mirror spread</title>
		<link>http://www.multigesture.net/2010/12/17/wikileaks-mirror-spread/</link>
		<comments>http://www.multigesture.net/2010/12/17/wikileaks-mirror-spread/#comments</comments>
		<pubDate>Fri, 17 Dec 2010 02:13:37 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Infovis]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[google earth]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[infovis]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[technology]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=1264</guid>
		<description><![CDATA[In my previous post I presented a visualization of the Wikileaks mirrors spread of December 8th. While it is interesting to see the spread of a certain day, it is even more interesting to see how the spread is evolving over time. By keeping track of updates of the mirror page on Wikileaks, I was [...]]]></description>
				<content:encoded><![CDATA[<h3><span style="font-weight: normal; font-size: 13px;">In my <a href="http://www.multigesture.net/2010/12/09/visualizing-wikileaks-mirrors/">previous post</a> I presented a visualization of the</span><span style="font-weight: normal; font-size: 13px;"> Wikileaks mirrors spread of December 8th.</span></h3>
<p><span style="font-weight: normal; font-size: 13px;">While it is interesting to see the spread of a certain day, it is even more interesting to see how </span>the spread is evolving over time. By keeping track of updates of the mirror page on <a href="http://46.59.1.2/">Wikileaks</a>, I was able to collect enough data for an animated version of the spread. My current dataset contains a 7 day period covering December 5th to December 12th.</p>
<p><img src="http://www.multigesture.net/wp-content/uploads/2010/12/wikileaks-v2-1a.jpg" alt="Wikileaks mirror spread" title="Wikileaks mirror spread" width="520" height="196" class="aligncenter size-full wp-image-1336" /></p>
<p>As some of the commenters pointed out, the edges (curves) in the previous dataset didn&#8217;t always followed the shortest path. This was due to the (simple &amp; stupid) algorithm I was using to draw the path between two points (basically just the mathematical shortest distance). In the latest dataset (download link is at the bottom) this is corrected. In particular this website: <a href="http://www.movable-type.co.uk/scripts/latlong.html">http://www.movable-type.co.uk</a> was very useful for figuring out the <a href="http://en.wikipedia.org/wiki/Great-circle_distance">the correct path</a>.</p>
<p><strong>* update 21-12-2010 11pm CET *</strong><br />
- Got featured on <a href="http://www.readwriteweb.com/archives/watch_how_wikileaks_mirrors_spread_around_the_worl.php">ReadWriteWeb</a>, Thanks!</p>
<p><strong>* update 23-12-2010 10pm CET * </strong><br />
- Embedded Google Earth web plugin in <a href="#demo">demo section</a></p>
<h2>Mirror spread</h2>
<p>The result of plotting the spread in a line chart:</p>
<p><img title="Growth of the number of mirrors" src="http://www.multigesture.net/wp-content/uploads/2010/12/wikileakschart1.png" alt="Growth of the number of mirrors" width="440" height="220" class="aligncenter"/></p>
<h2>Top 10 locations</h2>
<p>An overview of the spread based on country:</p>
<p><img title="Mirrors spread around the world" src="http://www.multigesture.net/wp-content/uploads/2010/12/wikileakschart2.png" alt="Mirrors spread around the world" width="480" height="320" class="aligncenter"/></p>
<ol>
<li>Germany: <strong>498</strong></li>
<li>United States: <strong>394</strong></li>
<li>France: <strong>194</strong></li>
<li>Netherlands: <strong>152</strong></li>
<li>United Kingdom: <strong>72</strong></li>
<li>Sweden: <strong>67</strong></li>
<li>Canada: <strong>49</strong></li>
<li>Spain: <strong>47</strong></li>
<li>Switzerland: <strong>36</strong></li>
<li>Russian Federation: <strong>32</strong></li>
</ol>
<h2>Screencast / Video</h2>
<p>Short screencast (Watch it in <strong>HD 720p</strong>, in fullscreen mode)</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/jx54EkNeGR4?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2 id="demo">﻿Online Demo</h2>
<p>To view this demo you will need to install the <a href="http://www.google.com/earth/explore/products/plugin.html">Google Earth Browser Plug-in</a></p>
<div id="map3d" style="height: 450px; width: 520px;"></div>
<p><strong>Note: You need to move <a href="http://earth.google.com/userguide/v5/ug_gps.html">the range marker</a> all the way to the left to make the timeline work:</strong></p>
<ul>
<li>Move the time slider all the way to the right<br />
<img src="http://www.multigesture.net/wp-content/uploads/2010/12/slider1.jpg" alt="" title="slider" width="341" height="65" class="aligncenter size-full wp-image-1352" /></li>
<li>Move the range marker (the small attachment on the left of the time slider) all the way to the left<br />
<img src="http://www.multigesture.net/wp-content/uploads/2010/12/slider2.jpg" alt="" title="slider" width="341" height="65" class="aligncenter size-full wp-image-1352" /></li>
<li>Now you can move the time slider as you want<br />
<img src="http://www.multigesture.net/wp-content/uploads/2010/12/slider3.jpg" alt="" title="slider" width="341" height="65" class="aligncenter size-full wp-image-1352" /></li>
</ul>
<h2>KML source</h2>
<p>If the online demo doesn&#8217;t work for you, you can also try it in Google Earth!</p>
<ul>
<li>Make sure you’ve installed <a href="http://www.google.com/intl/en/earth/index.html">Google Earth</a>.</li>
<li>Next download and unzip the file following file:</li>
<li><a class="downloadlink" href="http://www.multigesture.net/wp-content/plugins/download-monitor/download.php?id=34" title=" downloaded 426 times" >Wikileaks Google Earth KML files (Animated) (426)</a></li>
<li>Open up the KMZ file.</li>
<li>Enjoy!</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/12/17/wikileaks-mirror-spread/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Visualizing Wikileaks mirrors</title>
		<link>http://www.multigesture.net/2010/12/09/visualizing-wikileaks-mirrors/</link>
		<comments>http://www.multigesture.net/2010/12/09/visualizing-wikileaks-mirrors/#comments</comments>
		<pubDate>Thu, 09 Dec 2010 03:17:44 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Infovis]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[google earth]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[infovis]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[technology]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=1214</guid>
		<description><![CDATA[For the past few weeks, Wikileaks has drawn a lot of attention from the media. Mostly because of the Cablegate. Whether Julian Assange should be considered as a Hero (by publishing information) or Terrorist is an open question. Because of threats from governments, companies in the USA started to ban payment, hosting and dns services to [...]]]></description>
				<content:encoded><![CDATA[<p>For the past few weeks, <a href="http://en.wikipedia.org/wiki/WikiLeaks">Wikileaks</a> has drawn a lot of attention from the media. Mostly because of the <a href="http://en.wikipedia.org/wiki/United_States_diplomatic_cables_leak">Cablegate</a>.</p>
<p>Whether <a href="http://en.wikipedia.org/wiki/Julian_Assange">Julian Assange</a> should be considered as a Hero (by publishing information) or Terrorist is an open question. Because of threats from governments, companies in the USA started to ban <a href="http://techcrunch.com/2010/12/08/paypal-wikileaks/">payment</a>, <a href="http://www.cbsnews.com/stories/2010/12/01/tech/main7107461.shtml">hosting and dns</a> services to Wikileaks. Soon Wikileaks moved from servers based in the USA to Sweden/Switzerland.</p>
<p>For now Wikileaks seem to be safe, however, they also started a call for <a href="http://en.wikipedia.org/wiki/Mirror_(computing)">mirrors</a>.</p>
<p>Interested to see which people in the world are supporting Wikileaks, I had the idea to visualize the Wikileaks mirrors on <a href="http://www.google.com/intl/en/earth/index.html">Google Earth</a>.</p>
<p><img src="http://www.multigesture.net/wp-content/uploads/2010/12/wikileaks-mirrors1a.jpg" alt="Visualizing Wikileaks mirrors" title="Visualizing Wikileaks mirrors" width="520" height="196" class="aligncenter size-full wp-image-1349" /></p>
<p><strong>* update 09-12-2010 8pm CET * </strong><br />
- Added Google Earth web plugin links</p>
<p><strong>* update 10-12-2010 10am CET *</strong><br />
- Got featured on <a href="http://www.readwriteweb.com/archives/where_in_the_world_is_wikileaks_mirrored_google_ea.php">ReadWriteWeb</a> / <a href="http://www.nytimes.com/external/readwriteweb/2010/12/10/10readwriteweb-where-in-the-world-is-wikileaks-mirrored-go-46485.html?ref=technology">NY Times</a>, thanks guys!<br />
- Stay tuned for more updates!</p>
<p><strong>* update 23-12-2010 10pm CET * </strong><br />
- Embedded Google Earth web plugin in <a href="#demo">demo section</a></p>
<h2>Data mining</h2>
<p>In order to get the data, I went to the official Wikileaks website which had all mirrors listed on this page: <a href="http://46.59.1.2/mirrors.html">mirrors</a>. I wrote a small PHP script that would open up the mirror page and scanned the document for URLs. If a mirror was found, it would be stored in a file. At this moment there are about 1334 mirrors on the website.</p>
<h2>Data manipulation</h2>
<p>At this point I only have the URLs of the mirrors, but how do I know where these servers are located?</p>
<p>In order to know where the server is located, I used <a href="http://www.maxmind.com/app/geolitecity">GeoLite City</a> which is a service from <a href="http://www.maxmind.com">MaxMind</a>. GeoLite City allows you to resolve most IPs to a geospatial location. Of course it doesn&#8217;t gives the exact location, but usually it is able to show in which City the server is located, which is good enough for my purpose.</p>
<p>After obtaining the GeoLite City database (there is a free version!) I used PHP to write a script that would first resolve the URL to an IP address (PHP function: gethostbyname() ) and then use this IP address to look up the longtitude and latitude.</p>
<p>The last step was converting the data into the <a href="http://en.wikipedia.org/wiki/Keyhole_Markup_Language">KML</a> format (and adding some artificial altitude information) for use with Google Earth.</p>
<h2>Data visualization</h2>
<p>Below are some of the early results.</p>
<p>Currently the main server (<a href="http://46.59.1.2/">http://46.59.1.2</a>) seem to be located in Sweden, when we view the data in Google Earth we can see that a lot of mirrors are actually located in Europe.<br />
<a href="http://www.multigesture.net/wp-content/uploads/2010/12/wikileaks-mirrors1.jpg"><img class="aligncenter size-medium wp-image-1220" title="Visualizing Wikileaks mirrors" src="http://www.multigesture.net/wp-content/uploads/2010/12/wikileaks-mirrors1-300x278.jpg" alt="Visualizing Wikileaks mirrors" width="300" height="278" /></a></p>
<p><strong>Europe<br />
</strong>Red pin: Wikileaks server<br />
Yellow pins: Wikileaks mirrors<br />
Greenlines: Connections from the Wikileaks server to a Wikileaks mirror</p>
<p><a href="http://www.multigesture.net/wp-content/uploads/2010/12/wiki1.jpg"><img class="aligncenter size-medium wp-image-1216" title="Mirrors in Europe" src="http://www.multigesture.net/wp-content/uploads/2010/12/wiki1-300x210.jpg" alt="Mirrors in Europe" width="300" height="210" /></a></p>
<p><strong>USA</strong><br />
Wikileaks mirrors in the USA<br />
<a href="http://www.multigesture.net/wp-content/uploads/2010/12/wiki2.jpg"><img class="aligncenter size-medium wp-image-1218" title="Mirrors in the USA" src="http://www.multigesture.net/wp-content/uploads/2010/12/wiki2-300x208.jpg" alt="Mirrors in the USA" width="300" height="208" /></a></p>
<p><strong>Sweden</strong><br />
Since some of the servers are at the same location (probably sharing the same data center), we can click on a pin and it will expand to show all mirrors located at this data center.</p>
<p><a href="http://www.multigesture.net/wp-content/uploads/2010/12/wiki3.jpg"><img class="aligncenter size-medium wp-image-1219" title="Mirrors in Sweden" src="http://www.multigesture.net/wp-content/uploads/2010/12/wiki3-300x210.jpg" alt="Mirrors in Sweden" width="300" height="210" /></a></p>
<h2>Screencast / Video</h2>
<p>Short screencast (Watch it in <strong>HD 720p,</strong> in fullscreen mode)</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/26xsWTNYPxg?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2 id="demo">Online Demo</h2>
<p>To view this demo you will need to install the <a href="http://www.google.com/earth/explore/products/plugin.html">Google Earth Browser Plug-in</a></p>
<div id="map3d" style="height: 450px; width: 520px;"></div>
<p><br/></p>
<h2>KML source</h2>
<p>Want to try it out locally on your computer?</p>
<p>No problem! Here is how:</p>
<ul>
<li>Make sure you&#8217;ve installed <a href="http://www.google.com/intl/en/earth/index.html">Google Earth</a>.</li>
<li>Next download and unzip the file following file<br />
<a class="downloadlink" href="http://www.multigesture.net/wp-content/plugins/download-monitor/download.php?id=33" title=" downloaded 3593 times" >Wikileaks Google Earth KML files (3593)</a></li>
<li>Open the KML files one by one.</li>
<li>Enjoy!</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/12/09/visualizing-wikileaks-mirrors/feed/</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
		<item>
		<title>Research projects</title>
		<link>http://www.multigesture.net/2010/11/25/research-projects/</link>
		<comments>http://www.multigesture.net/2010/11/25/research-projects/#comments</comments>
		<pubDate>Thu, 25 Nov 2010 21:45:35 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[Infovis]]></category>
		<category><![CDATA[Multitouch]]></category>
		<category><![CDATA[application]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[infovis]]></category>
		<category><![CDATA[multitouch]]></category>
		<category><![CDATA[projects]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[technology]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=1169</guid>
		<description><![CDATA[Since my graduation back in 2008, I have been working on different research projects at universities. Some of them got published, others never left the &#8216;prototype&#8217; stage. Recently I started to organize the footage I made and collected over the years and decided to put some of it online. To maintain the overview, a new [...]]]></description>
				<content:encoded><![CDATA[<p>Since my graduation back in 2008, I have been working on different research projects at universities. Some of them got published, others never left the &#8216;prototype&#8217; stage.</p>
<p>Recently I started to organize the footage I made and collected over the years and decided to put some of it online. To maintain the overview, a new section has been added to the site: <a href="http://www.multigesture.net/research-projects/"><strong>Research Projects</strong></a>. It includes <em>most</em> of the projects I have been working on at the University of Amsterdam (UvA) and Harvard University.</p>
<p>Each project includes a short description, pictures and a video. Enjoy!</p>
<p>(Click the project title for more information)</p>
<h2><a href="http://www.multigesture.net/research-projects/interactive-networks/">Interactive Networks</a></h2>
<p>This project introduces the Interactive Network concept and describes the design and implementation of the first prototype.</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/o6YPK60DevA?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2><a href="http://www.multigesture.net/research-projects/twilight-graph-visualization/">Twilight</a></h2>
<p>Twilight is an interactive graph exploration tool for multi-touch systems. Twilight provides a flexible environment that can be used to visualize and analyse graphs and networks found in the computational science.</p>
<p><iframe width="500" height="375" src="http://www.youtube.com/embed/3BP-aAcmXas?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2><a href="http://www.multigesture.net/research-projects/treepanorama-tree-visualization/">Treepanorama</a></h2>
<p>This projects involves the visualization of large phylogenetic tree structures such as the ones found in the Tree of Life. By combining high performance computer graphics with multi-touch input interaction methods, his project will create an interactive exploration environment that allows us to view the data interactively and in different representations. This research will lead into a better understanding of the evolutionary tree.</p>
<p><a class="thickbox" title="Treepanorama / MS Surface (WPF/C#)" href="http://multigesture.net/wp-content/uploads/harvard/treepanorama/IMG_2814.JPG"><img src="http://multigesture.net/wp-content/uploads/harvard/treepanorama/IMG_2814t.JPG" alt="" /></a> <a class="thickbox" title="Treepanorama / MS Surface (WPF/C#)" href="http://multigesture.net/wp-content/uploads/harvard/treepanorama/IMG_2815.JPG"><img src="http://multigesture.net/wp-content/uploads/harvard/treepanorama/IMG_2815t.JPG" alt="" /></a></p>
<h2><a href="http://www.multigesture.net/research-projects/involv/">Involv</a></h2>
<p>INVOLV is a research project that combines cutting-edge interactive technology with emerging information visualization techniques to create innovative explorations for large hierarchical data sets</p>
<p><a class="thickbox" title="Modified datawall application (in this picture: Bertrand Schneider, Laurence Muller and Alan Dunne)" href="http://www.multigesture.net/wp-content/uploads/harvard/involv/involv_4_f.jpg"><img src="http://www.multigesture.net/wp-content/uploads/harvard/involv/involv_4_t.jpg" alt="" /></a> <a class="thickbox" title="Involv (Michael Horn)" href="http://www.multigesture.net/wp-content/uploads/harvard/involv/involv_3_f.jpg"><img src="http://www.multigesture.net/wp-content/uploads/harvard/involv/involv_3_t.jpg" alt="" /></a></p>
<p><iframe width="500" height="375" src="http://www.youtube.com/embed/XAvtNJxSFpU?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2><a href="http://www.multigesture.net/research-projects/phylogenie/">Phylogenie</a></h2>
<p>This application is designed to be a collaborative activity to teach undergraduate students about phylogeny and to prevent misconceptions about evolution. The system guides the students through a set of steps required to construct a phylogenetic tree based on morphological and DNA sequence data.</p>
<p>Since this project is still active, more media content will be released in future!</p>
<p><img src="http://www.multigesture.net/wp-content/uploads/harvard/phylogenie/phylogenie.jpg" alt="" /></p>
<h1>* update: 27 November 2010 *</h1>
<p>Old footage from personal projects: Touch tracer and Real time fluid dynamics running on the UvA-MTT</p>
<h2><a href="http://www.multigesture.net/projects/touch-tracer/">Touch Tracer v0.3</a></h2>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/GaJuwDzs3mY?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2><a href="http://www.multigesture.net/projects/real-time-fluid-dynamics/">Real time fluid dynamics</a></h2>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/ZyeFvkJ8cFE?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/11/25/research-projects/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Kinect</title>
		<link>http://www.multigesture.net/2010/11/15/kinect/</link>
		<comments>http://www.multigesture.net/2010/11/15/kinect/#comments</comments>
		<pubDate>Mon, 15 Nov 2010 20:47:46 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Application]]></category>
		<category><![CDATA[diy]]></category>
		<category><![CDATA[hacking]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[kinect]]></category>
		<category><![CDATA[multitouch]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=1032</guid>
		<description><![CDATA[Earlier this month Adafruit started a contest for the first person to hack the Kinect, Microsoft&#8217;s latest gadget for the XBOX 360. The contest was won by Spanish hacker Héctor Martín Cantero who published his proof of concept only 3 hours after the European launch (last week). So what exactly is the Kinect? Is it [...]]]></description>
				<content:encoded><![CDATA[<p>Earlier this month <a href="http://www.adafruit.com/blog/2010/11/04/the-open-kinect-project-the-ok-prize-get-1000-bounty-for-kinect-for-xbox-360-open-source-drivers/">Adafruit started a contest</a> for the first person to hack the Kinect, Microsoft&#8217;s latest gadget for the XBOX 360. The contest was won by Spanish hacker <a href="http://marcansoft.com/blog/">Héctor Martín Cantero</a> who published his <a href="http://www.youtube.com/watch?v=rKhW-cvpkks">proof of concept</a> only 3 hours after the European launch (last week).</p>
<p>So what exactly is the Kinect? Is it similar to the PS2 eyetoy?</p>
<p>Actually it is much more advanced than the PS2 eyetoy. Unlike the eyetoy, the Kinect contains 2 cameras. One RGB camera which is used for &#8216;normal&#8217; images and a depth camera is used to figure out the position of objects in its view. A nice explaination (and an overview of the components) can be found at <a href="http://www.ifixit.com/Teardown/Microsoft-Kinect-Teardown/4066/1">ifixit</a>.</p>
<p>Because Adafruit required the contest winner to open source his source code, this means that others can now enjoy hacking their Kinect as well! Currently the code is available at github and renamed to libfreenect (irc: #openkinect @ freenode): <a href="https://github.com/OpenKinect/libfreenect/">https://github.com/OpenKinect/libfreenect/</a></p>
<p>Getting the code to compile might be a bit tricky and it involves CMake to create the project files. Running it on Linux is very trivial (just make sure you&#8217;ve installed all dependencies), on Windows and Max OS X there are some extra steps involved to compile the library and demo application.</p>
<p>For the windows version you will need <a href="http://www.multigesture.net/wp-content/uploads/3rdparty-libs.zip">libusb, glut and pthreads</a>. Also, don&#8217;t forget to select the win32 branch when you do a checkout from git. After creating the visual studio project files you will need to manually fix the path to the include and lib directories (The current CMake file is broken).</p>
<p>If you can&#8217;t be bothered, I have compiled a windows binary (vs2k8): <a href="http://www.multigesture.net/wp-content/uploads/Kinect-VC9-Release.zip">Kinect-VC9-Release.zip</a></p>
<p>Before running the binary, make sure you&#8217;ve installed the drivers from github (First the XBOX motor, then camera and audio). To control the motor in the Kinect, you can use this code:<a href="http://www.multigesture.net/wp-content/uploads/NUI_Motor.cpp"> NUI_Motor.cpp</a></p>
<h3>My experiments</h3>
<p>Last Friday I actually bought myself a Kinect. In the video below you can see me running the Kinect on my machine. For now it is just retrieving both camera streams and putting it on display.<br />
Basically the library (libfreenect) is providing you with two images through a callback. One depth image and one RGB image. The depth image actually maps a depth to a certain color. In this video for example, the color red/white means something is really close to the camera and green/blue is further away.</p>
<p><iframe width="500" height="375" src="http://www.youtube.com/embed/OK2f_ByzwjM?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Hopefully I will have some nice apps later this month <img src='http://www.multigesture.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<h3>Kinect hacks by others</h3>
<p>3D mapping by <a href="http://idav.ucdavis.edu/~okreylos/index.html">Oliver Kreylos</a></p>
<p><iframe width="500" height="375" src="http://www.youtube.com/embed/7QrnwoO1-8A?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>ofxKinect 3D draw by <a href="http://www.msavisuals.com/">Memo</a></p>
<p><iframe src="http://player.vimeo.com/video/16818988" width="500" height="313" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<p>Multitouch hack by <a href="http://campar.in.tum.de/Main/FlorianEchtler">Florian Echtler</a></p>
<p><iframe width="500" height="375" src="http://www.youtube.com/embed/ho6Yhz21BJI?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Kinect Point Cloud by <a href="http://labs.laan.com/">cc laan</a></p>
<p><iframe src="http://player.vimeo.com/video/16788233" width="422" height="750" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<h3>Contest</h3>
<p><strong>P.s.: Before I forget, Matt Cutts (Google) started another contest. Check it out at: <a href="http://www.mattcutts.com/blog/open-kinect-contest/">http://www.mattcutts.com/blog/open-kinect-contest/</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/11/15/kinect/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Sparkon.net and ITS 2010</title>
		<link>http://www.multigesture.net/2010/04/29/techsparked-com-and-its-2010/</link>
		<comments>http://www.multigesture.net/2010/04/29/techsparked-com-and-its-2010/#comments</comments>
		<pubDate>Thu, 29 Apr 2010 04:43:33 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Multitouch]]></category>
		<category><![CDATA[conference]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[multitouch]]></category>
		<category><![CDATA[sparkon]]></category>
		<category><![CDATA[tabletop]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=794</guid>
		<description><![CDATA[Sparkon Seth Sandler a good friend of mine, released his new website sparkon.net which is a website that he describes as &#8220;a social platform for people that are sparked (inspired) by creative and emergent technology&#8221;. Personally I like the way how he organized the site. Basically he created a portal that allows you to rapidly [...]]]></description>
				<content:encoded><![CDATA[<h3>Sparkon</h3>
<p><a href="http://techsparked.com/aff/23/17"><img class="aligncenter size-full wp-image-797" title="affiliate-481-61_med" src="http://www.multigesture.net/wp-content/uploads/2010/04/affiliate13.jpg" alt="" width="434" height="55" /></a><a href="http://sethsandler.com/">Seth Sandler</a> a good friend of mine, released his new website sparkon.net which is a website that he describes as &#8220;a social platform for people that are sparked (inspired) by creative and emergent technology&#8221;.</p>
<p>Personally I like the way how he organized the site. Basically he created a portal that allows you to rapidly find (multitouch) applications, open source programming frameworks, and community projects that are out there, all in one single place!</p>
<p><a href="http://sparkon.net">Check it out</a> and don&#8217;t forget to add your own <a href="http://sparkon.net/users/falcon4ever">projects</a> as well!</p>
<h3>Interactive Tabletops and Surfaces 2010</h3>
<p><a href="http://www.its2010.org/"><img class="aligncenter size-full wp-image-807" title="its2010banner" src="http://www.multigesture.net/wp-content/uploads/2010/04/its2010banner.jpg" alt="" width="437" height="41" /></a></p>
<p>If you&#8217;re doing research on interactive tabletops and surfaces, you might want to check out this years ITS 2010 conference. This year it will be hosted in Saarbrücken, Germany!</p>
<p>Check out the details below (more information after the break).</p>
<blockquote><p><em>CALL FOR PARTICIPATION</em></p>
<p><em>5th Annual ACM Conference on Interactive Tabletops and Surfaces 2010</em></p>
<p><em>ITS 2010<br />
November 7-10, 2010<br />
Saarbrücken, Germany</em></p>
<p><em><a href="http://www.its2010.org/">http://www.its2010.org</a><br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</em></p>
<p><em>The Interactive Tabletops and Surfaces 2010 Conference (ITS) is a<br />
premiere venue for presenting research in the design and use of new<br />
and emerging tabletop and interactive surface technologies. As a new<br />
community, we embrace the growth of the discipline in a wide variety<br />
of areas, including innovations in ITS hardware, software, design, and<br />
projects expanding our understanding of design considerations of ITS<br />
technologies and of their applications.</em></p>
<p><em>Building on their success in previous years, ITS again features Papers<br />
and Notes presentations, as well as tutorials, posters, and<br />
demonstrations tracks. For the first time, ITS 2010 will also include<br />
a doctoral symposium.</em></p>
<p><em>ITS 2010 will bring together top researchers and practitioners who are<br />
interested in both the technical and human aspects of ITS technology.<br />
On behalf of the conference organizing committee, we invite you to<br />
begin planning your submissions and participation for this year&#8217;s<br />
conference!</em></p>
<p><em>CALL FOR PARTICIPATION: PAPERS AND NOTES</em></p>
<p><em>The use of interactive surfaces is an exciting and emerging research<br />
area. Display technologies, such as projectors, LCD and OLED flat<br />
panels, and even flexible display substrates, coupled with input<br />
sensors capable of enabling direct interaction, make it reasonable to<br />
envision a not-so-distant future in which many of the common surfaces<br />
in our environment will function as digital interactive displays. ITS<br />
brings together researchers and practitioners from a variety of<br />
backgrounds and interests, such as camera and projector based systems,<br />
new display technologies, multi-touch sensing, user interface<br />
technologies, augmented reality, computer vision, multimodal<br />
interaction, novel input and sensing technologies, computer supported<br />
cooperative work (CSCW), and information visualization.</em></p>
<p><em>The intimate size of this single-track symposium provides an ideal<br />
venue for leading researchers and practitioners to exchange research<br />
results and experiences. We encourage submissions on (but not limited<br />
to) the following topic areas as they relate to interactive tabletops<br />
and surfaces:</em></p>
<p><em>* Applications<br />
* Gesture-based interfaces<br />
* Multi-modal interfaces<br />
* Tangible interfaces<br />
* Novel interaction techniques<br />
* Data handling/exchange on large interactive surfaces<br />
* Data presentation on large interactive surfaces<br />
* User-interface technology<br />
* Computer supported collaborative systems<br />
* Middleware and network support<br />
* Augmented reality<br />
* Social protocols<br />
* Information visualizations<br />
* Interactive surface hardware, including sensing and input<br />
technologies with novel capabilities<br />
* Human-centered design &amp; methodologies</em></p></blockquote>
<p><em><span id="more-794"></span></em></p>
<blockquote><p><em>CONFERENCE COMMITTEE</em></p>
<p><em>Conference Co-Chairs<br />
Johannes Schöning<br />
Antonio Krüger</em></p>
<p><em>Conference Program Committee Co-Chairs<br />
Daniel Wigdor<br />
Michael Haller</em></p>
<p><em>MENTORESHIPS</em></p>
<p><em>To help those with less experience in academic publication, ITS 2010<br />
offers the help of our two Mentors Chairs. The mentoring program is<br />
intended primarily for authors from non-academics, including industry.</em></p>
<p><em>Two types of help are available from the mentor: assistance in framing<br />
and composing your research paper (early feedback), and help and<br />
feedback reviewing an already completed paper (later feedback). In<br />
either case, the mentor will help frame your work in context of other<br />
related work, and make meaningful suggestions to improve the quality<br />
of your contribution. Both types of mentorship have the same<br />
submission deadline.</em></p>
<p><em>Although we cannot guarantee that your submission will be accepted by<br />
ITS, mentoring would be helpful for you to turn your ideas into a<br />
proper research paper. If you wish to avail yourself of this program,<br />
you can do so by sending e-mail to both of the Mentor Chairs Lucia<br />
Terrenghi (lucia.terrenghi@vodafone.com) and Changkyu Choi<br />
(changkyu_choi@samsung.com). The submission type will vary depending<br />
on the type of feedback you are seeking.</em></p>
<p><em>Early-Stages Feedback (Deadline: 2010.05.25):</em></p>
<p><em>Send a 1-page document describing your intended contribution. This<br />
1-page must include author names and affiliation (e.g. company name),<br />
and enough information for the chairs to understand both what it is<br />
that you have done.</em></p>
<p><em>Completed Paper Feedback (Deadline: 2010.05.25):</em></p>
<p><em>Send your completed paper to both mentors chairs by May 25.</em></p>
<p><em>For both early and paper feedback, you will receive a response by June 14.</em></p>
<p><em>SUBMISSIONS<br />
Papers/Notes: We invite paper submissions of two kinds: Papers (10<br />
pages) and Notes (4 pages). Papers must present original, highly<br />
innovative, prospective and forward-looking research, possibly in one<br />
or more of the themes given above. Notes must also report novel and<br />
complete research, but where the scope and scale of the contribution<br />
is more focused and succinct than papers. Submissions must be<br />
submitted as a single PDF file in the ACM format through the<br />
submission system. A template for submissions can be found on the ITS<br />
website (http://www.its.2010.org).</em></p>
<p><em>All accepted submissions will be presented at ITS 2010 and appear in<br />
the ITS proceedings and be archived in the ACM digital library.</em></p>
<p><em>IMPORTANT DATES</em></p>
<p><em>Paper / Note Mentorship Requests (optional): May 25, 2010<br />
Paper / Note Mentorship Feedback Received (optional): June 14, 2010<br />
Paper / Note Submissions: June 23, 2010<br />
Paper / Note Author Notifications: August 27, 2010<br />
Paper / Note Camera-Ready Deadline: October 1, 2010</em></p>
<p><em>The calls for the posters, demos, tutorials, and the doctoral<br />
symposium will be published soon, please check our website for further<br />
information.</em></p>
<p><em>ITS 2010 Conference:  November 7-10, 2010</em></p>
<p><em><a href="http://www.its2010.org">http://www.its2010.org</a></em></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/04/29/techsparked-com-and-its-2010/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>NEMO Science Center</title>
		<link>http://www.multigesture.net/2010/04/21/nemo-science-center/</link>
		<comments>http://www.multigesture.net/2010/04/21/nemo-science-center/#comments</comments>
		<pubDate>Wed, 21 Apr 2010 04:53:42 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Multitouch]]></category>
		<category><![CDATA[multitouch]]></category>
		<category><![CDATA[museum]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=786</guid>
		<description><![CDATA[The NEMO Science Center in Amsterdam is the largest science center in the Netherlands and is also the place where my previous thesis work is displayed to the general public. My work now forms a permanent exhibition located at &#8220;Bits &#38; Co&#8220;. I haven&#8217;t visited the NEMO for a while (since I&#8217;m still in the [...]]]></description>
				<content:encoded><![CDATA[<p>The <a href="http://www.e-nemo.nl/en/?id=1">NEMO Science Center</a> in Amsterdam is the largest science center in the Netherlands and is also the place where my previous thesis work is displayed to the general public. My work now forms a permanent exhibition located at &#8220;<a href="http://www.e-nemo.nl/en/?id=1&amp;s=635&amp;d=34">Bits &amp; Co</a>&#8220;.</p>
<p>I haven&#8217;t visited the NEMO for a while (since I&#8217;m still in the USA) but my dad visited the science center last month and took these nice pictures:</p>

<div class="ngg-galleryoverview" id="ngg-gallery-15-786">

	<!-- Slideshow link -->
	<div class="slideshowlink">
		<a class="slideshowlink" href="http://www.multigesture.net/2010/04/21/nemo-science-center/?show=slide">
			[Show as slideshow]		</a>
	</div>

	
	<!-- Thumbnails -->
		
	<div id="ngg-image-339" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8001.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8001.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-340" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8002.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8002.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-341" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8003.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8003.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-342" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8004.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8004.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-343" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8005.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8005.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-344" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8008.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8008.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-345" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8009.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8009.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-346" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8012.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8012.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-347" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8013.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8013.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-348" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8014.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8014.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-349" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/nemo/PICT8015.JPG" title=" " class="thickbox" rel="set_15" >
								<img title="KONICA MINOLTA DIGITAL CAMERA" alt="KONICA MINOLTA DIGITAL CAMERA" src="http://www.multigesture.net/wp-content/gallery/nemo/thumbs/thumbs_PICT8015.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 	 	
	<!-- Pagination -->
 	<div class='ngg-clear'></div>
 	
</div>


<p><strong>Thanks dad!<br />
</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/04/21/nemo-science-center/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>TEI 2010</title>
		<link>http://www.multigesture.net/2010/02/15/tei2010/</link>
		<comments>http://www.multigesture.net/2010/02/15/tei2010/#comments</comments>
		<pubDate>Mon, 15 Feb 2010 03:17:09 +0000</pubDate>
		<dc:creator>Laurence Muller</dc:creator>
				<category><![CDATA[Multitouch]]></category>
		<category><![CDATA[conference]]></category>
		<category><![CDATA[hci]]></category>
		<category><![CDATA[multitouch]]></category>

		<guid isPermaLink="false">http://www.multigesture.net/?p=729</guid>
		<description><![CDATA[A few weeks ago I attended TEI&#8217;10 hosted at the MIT Medialab. &#8220;TEI, the conference on tangible, embedded, and embodied interaction, is about HCI, design, interactive art, user experience, tools and technologies, with a strong focus on how computing can bridge atoms and bits into cohesive interactive systems.&#8221; To keep it simple, I decided to [...]]]></description>
				<content:encoded><![CDATA[<p><a href="http://www.tei-conf.org/10/"><img class="aligncenter size-full wp-image-124" title="tei2010logo" src="http://www.multigesture.net/wp-content/uploads/2010/02/tei2010logo.jpg" alt="" width="436" height="78" /></a></p>
<p>A few weeks ago I attended <a href="http://www.tei-conf.org/10/">TEI&#8217;10</a> hosted at the <a href="http://www.media.mit.edu/">MIT Medialab</a>. <em></em></p>
<p><em>&#8220;TEI, the conference on tangible, embedded, and embodied interaction, is  about HCI, design, interactive art, user experience, tools and  technologies, with a strong focus on how computing can bridge atoms and  bits into cohesive interactive systems.&#8221;</em></p>
<p>To keep it simple, I decided to just posted a lot of media instead of a summary of the TEI &#8217;10 conference&#8230; enjoy <img src='http://www.multigesture.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  !</p>
<h3>Inspiring projects</h3>
<p>Unlike most conferences I have been, this conference was not only a place where scientific work was presented but also where artists could show their work (art meets science).</p>
<p>The following two projects are clearly an example for this:</p>
<ul>
<li><a href="http://www.vrurban.org/smslingshot.html">SMSlingshot</a> (link contains cool video!) by Patrick   Tobias Fischer, Christian   Zöllner and Thilo Hoffmann.</li>
<li><a href="http://hlt.media.mit.edu/popables/">Electronic Popables: exploring  paper-based computing through an  interactive pop-up book</a> by Jie  Qi and Leah Buechley.</li>
</ul>
<p><iframe width="500" height="375" src="http://www.youtube.com/embed/AI-6wMlaVTc?fs=1&#038;feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h3>Some of my pictures shot at the conference</h3>

<div class="ngg-galleryoverview" id="ngg-gallery-14-729">

	<!-- Slideshow link -->
	<div class="slideshowlink">
		<a class="slideshowlink" href="http://www.multigesture.net/2010/02/15/tei2010/?show=slide">
			[Show as slideshow]		</a>
	</div>

	
	<!-- Thumbnails -->
		
	<div id="ngg-image-249" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0737.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0737" alt="IMG_0737" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0737.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-250" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0738.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0738" alt="IMG_0738" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0738.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-251" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0739.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0739" alt="IMG_0739" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0739.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-252" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0740.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0740" alt="IMG_0740" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0740.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-253" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0741.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0741" alt="IMG_0741" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0741.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-254" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0742.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0742" alt="IMG_0742" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0742.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-255" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0743.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0743" alt="IMG_0743" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0743.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-256" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0744.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0744" alt="IMG_0744" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0744.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-257" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0745.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0745" alt="IMG_0745" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0745.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-258" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0746.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0746" alt="IMG_0746" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0746.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-259" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0747.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0747" alt="IMG_0747" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0747.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-260" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0749.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0749" alt="IMG_0749" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0749.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-261" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0750.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0750" alt="IMG_0750" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0750.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-262" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0751.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0751" alt="IMG_0751" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0751.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-263" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0752.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0752" alt="IMG_0752" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0752.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-264" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0754.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0754" alt="IMG_0754" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0754.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-265" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0755.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0755" alt="IMG_0755" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0755.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-266" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0756.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0756" alt="IMG_0756" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0756.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-267" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0759.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0759" alt="IMG_0759" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0759.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-268" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.multigesture.net/wp-content/gallery/tei2010/IMG_0761.JPG" title=" " class="thickbox" rel="set_14" >
								<img title="IMG_0761" alt="IMG_0761" src="http://www.multigesture.net/wp-content/gallery/tei2010/thumbs/thumbs_IMG_0761.JPG" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 	 	
	<!-- Pagination -->
 	<div class='ngg-navigation'><span class="current">1</span><a class="page-numbers" href="http://www.multigesture.net/2010/02/15/tei2010/?nggpage=2">2</a><a class="page-numbers" href="http://www.multigesture.net/2010/02/15/tei2010/?nggpage=3">3</a><a class="page-numbers" href="http://www.multigesture.net/2010/02/15/tei2010/?nggpage=4">4</a><a class="page-numbers" href="http://www.multigesture.net/2010/02/15/tei2010/?nggpage=5">5</a><a class="next" id="ngg-next-2" href="http://www.multigesture.net/2010/02/15/tei2010/?nggpage=2">&#9658;</a></div> 	
</div>


<h3>More pictures of the conference</h3>
<p>Pictures created by<a href="http://www.flickr.com/photos/jeanbaptisteparis/sets/72157623288723676/"> Jean Baptiste Paris on Flickr</a>.<br />
<a href="http://www.flickr.com/photos/jeanbaptisteparis/sets/72157623288723676/"><img class="alignnone" title="TEI2010" src="http://farm5.static.flickr.com/4022/4306938538_dfb3b92038_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm3.static.flickr.com/2698/4306197809_6d6f764243_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm5.static.flickr.com/4060/4306200355_6d1912db7f_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm3.static.flickr.com/2708/4309786681_5096fd32ab_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm3.static.flickr.com/2726/4309792695_5d8fc9cef0_s.jpg" alt="" width="75" height="75" /></a></p>
<h3>Studio sessions</h3>
<p>Pictures created by <a href="http://www.perspectum.com/">Seth Hunter</a> of <a href="http://www.flickr.com/photos/sethismyfriend/sets/72157623170598967/">the studio session on surface computing</a><br />
(I should be in there somewhere&#8230;).</p>
<p><img class="alignnone" title="TEI2010" src="http://farm5.static.flickr.com/4049/4308713175_aae299964e_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm5.static.flickr.com/4057/4308713605_90d3768859_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm5.static.flickr.com/4023/4309451176_8dd6d2e931_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm5.static.flickr.com/4007/4308715233_4f4a573bcb_s.jpg" alt="" width="75" height="75" /> <img class="alignnone" title="TEI2010" src="http://farm3.static.flickr.com/2581/4308715477_cce40fe1d8_s.jpg" alt="" width="75" height="75" /></p>
<h3>Video studio sessions</h3>
<p>Nice video compilation of the different studio sessions that took place at the MIT Medialab.</p>
<p><iframe src="http://player.vimeo.com/video/9029856" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<h3>Blog</h3>
<p><a href="http://tui.formundzweck.de/">A blog about the TEI 2010 conference</a></p>
<h3>Keynotes</h3>
<ul>
<li><a href="http://www.aaschool.ac.uk/publications/ea/intro.html">John Frazer</a></li>
<li><a href="http://www.vikmuniz.net/">Vik Muniz</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.multigesture.net/2010/02/15/tei2010/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
