<?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>Programming Fundamentals &#187; Workshop</title>
	<atom:link href="http://legacy.iaacblog.com/mai2012-2013-programming/category/int-programming/workshop/feed/" rel="self" type="application/rss+xml" />
	<link>http://legacy.iaacblog.com/mai2012-2013-programming</link>
	<description>Programming Fundamentals</description>
	<lastBuildDate>Tue, 18 Dec 2012 18:15:26 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Computer Vision workshop / multi blob tracker</title>
		<link>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/computer-vision-workshop-multi-blob-tracker/</link>
		<comments>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/computer-vision-workshop-multi-blob-tracker/#comments</comments>
		<pubDate>Mon, 26 Nov 2012 10:08:20 +0000</pubDate>
		<dc:creator>martin.lukac@iaac.net</dc:creator>
				<category><![CDATA[Int Programming]]></category>
		<category><![CDATA[Martin Lukac]]></category>
		<category><![CDATA[Workshop]]></category>

		<guid isPermaLink="false">http://legacy.iaacblog.com/mai2012-2013-programming/?p=815</guid>
		<description><![CDATA[For my Computer Vision exercise I decided to work with Multi Blob Tracker Library (Flob) http://s373.net/code/flob/flob.html designed by Andre Sier and using the Flood Fill Algorithm. The result is a fluffy cluster of elements resembling the poplar or dandelion seeds, moving, drifting, floating and clustering according to a tracked movements of a person sitting in front of [...]]]></description>
				<content:encoded><![CDATA[<p style="text-align: left;"><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/Fluff_A.jpg"></a></p>
<p><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/Fluff_A.jpg"> </a></p>
<p>For my Computer Vision exercise I decided to work with Multi Blob Tracker Library (Flob)<br />
<a href="http://s373.net/code/flob/flob.html">http://s373.net/code/flob/flob.html</a> designed by Andre Sier and using the Flood Fill<br />
Algorithm. The result is a fluffy cluster of elements resembling the poplar or dandelion seeds,<br />
moving, drifting, floating and clustering according to a tracked movements of a person sitting<br />
in front of a web camera.</p>
<p><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/Fluff_A.jpg"><img class="alignnone size-medium wp-image-825" title="poplar_fluff" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/Fluff_A-300x225.jpg" alt="" width="300" height="225" /></a> <a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/basic_element.jpg"><img class="alignnone size-medium wp-image-834" title="basic_element" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/basic_element-300x225.jpg" alt="" width="300" height="225" /></a></p>
<p><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/01.jpg"><img class="alignnone size-medium wp-image-817" title="flob_01" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/01-300x225.jpg" alt="" width="300" height="225" /></a> <a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/02.jpg"><img class="alignnone size-medium wp-image-818" title="flob_02" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/02-300x225.jpg" alt="" width="300" height="225" /></a></p>
<p><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/03.jpg"><img class="alignnone size-medium wp-image-819" title="flob_03" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/03-300x225.jpg" alt="" width="300" height="225" /></a> <a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/04.jpg"><img class="alignnone size-medium wp-image-820" title="flob_04" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/04-300x225.jpg" alt="" width="300" height="225" /></a></p>
<p><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/06.jpg"><img class="alignnone size-medium wp-image-821" title="flob_05" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/06-300x225.jpg" alt="" width="300" height="225" /></a> <a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/07.jpg"><img class="alignnone size-medium wp-image-822" title="flob_06" src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/07-300x225.jpg" alt="" width="300" height="225" /></a></p>
<p><iframe src="http://player.vimeo.com/video/54280030" width="605" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
]]></content:encoded>
			<wfw:commentRss>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/computer-vision-workshop-multi-blob-tracker/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Final version of GPS visualization project for the data workshop</title>
		<link>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/685/</link>
		<comments>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/685/#comments</comments>
		<pubDate>Tue, 20 Nov 2012 12:10:33 +0000</pubDate>
		<dc:creator>balcaen.bert@iaac.net</dc:creator>
				<category><![CDATA[Bert Balcaen]]></category>
		<category><![CDATA[Int Programming]]></category>
		<category><![CDATA[Students]]></category>
		<category><![CDATA[Workshop]]></category>
		<category><![CDATA[bert_anti_map_viz]]></category>

		<guid isPermaLink="false">http://legacy.iaacblog.com/mai2012-2013-programming/?p=685</guid>
		<description><![CDATA[Video of the final version: A walk in Barcelona. Visualization of GPS data. from Bert Balcaen on Vimeo. Here are some notes on how I got there. I experimented with adding the street names next to the trail. This puts more emphasis on the sequence of the streets. However, the label positioning (overlaps) seemed like [...]]]></description>
				<content:encoded><![CDATA[<p>Video of the final version:</p>
<p><iframe src="http://player.vimeo.com/video/53906463?badge=0&amp;color=55c4e4" width="730" height="365" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p><a href="http://vimeo.com/53906463">A walk in Barcelona. Visualization of GPS data.</a> from <a href="http://vimeo.com/user7223162">Bert Balcaen</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>Here are some notes on how I got there.</p>
<p><span id="more-685"></span></p>
<p>I experimented with adding the street names next to the trail. This puts more emphasis on the sequence of the streets. However, the label positioning (overlaps) seemed like a problem I couldn&#8217;t solve quickly. I found <a href="https://gist.github.com/1377729">a nice solution from Moritz Stefaner that uses forces to make sure labels don&#8217;t overlap each other</a>. Looks like a very good starting point for a future project.</p>
<p><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/map_viz_05-001195.png"><img src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/map_viz_05-001195.png" alt="" title="map_viz_05-001195" width="800" height="400" class="alignnone size-full wp-image-686" /></a><br />
In this video I used another data set. The one in the previous videos is me running. Here I&#8217;m using a recording of an evening walk through the city. There are some interesting moments: me trying to find a shop (without using GPS) and getting a little bit lost, the rythm of my walk, stopping for traffic lights, etc. Also watch how the GPS gets confused and the data starts to get noisy when I spend some time in a supermarket. I decided not to clean up the data and just leave it like it was.</p>
<p>I also changed the panning. Instead of keeping the current location always in the center of the screen, I added some very simple tweening so the map doesn&#8217;t center immediately on the last position. I think it conveys the feeling of space a little bit better like that.</p>
<p>Then I took another look at how the data was being displayed. I thought it would be good to give the viewer some more information about what kind of walk this was, so I added time and distance. I also included a legend for the colors because I always had to explain what they meant when I was showing the video to someone.</p>
<p>I&#8217;m pretty satisfied about this project, giving the time constraints we had (just a few days).  Here are some suggestions I got from people who saw it:</p>
<ul>
<li>Use the compass to show what I was looking at during the walk, and show those places using a POI database.</li>
<li>Try out other ways of visualizing the trail.</li>
<ul>
]]></content:encoded>
			<wfw:commentRss>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/685/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Progress on GPS visualization project for the data workshop</title>
		<link>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/progress-on-gps-visualization-project-for-the-data-workshop/</link>
		<comments>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/progress-on-gps-visualization-project-for-the-data-workshop/#comments</comments>
		<pubDate>Sat, 17 Nov 2012 16:14:40 +0000</pubDate>
		<dc:creator>balcaen.bert@iaac.net</dc:creator>
				<category><![CDATA[Bert Balcaen]]></category>
		<category><![CDATA[Int Programming]]></category>
		<category><![CDATA[Students]]></category>
		<category><![CDATA[Workshop]]></category>
		<category><![CDATA[bert_anti_map_viz]]></category>

		<guid isPermaLink="false">http://legacy.iaacblog.com/mai2012-2013-programming/?p=397</guid>
		<description><![CDATA[See: data workshop I wanted to get a feeling for the data so I started off by creating a quick and dirty Processing sketch that visualizes the location data recorded with AntiMap. I used Unfolding Maps, a very complete and well-made library for using maps inside Processing. Here is a screenshot. That felt very static, [...]]]></description>
				<content:encoded><![CDATA[<p>See: <a href="http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/data-workshop/">data workshop</a></p>
<p>I wanted to get a feeling for the data so I started off by creating a <a href="https://gist.github.com/4064702">quick and dirty Processing sketch that visualizes the location data recorded with AntiMap</a>. I used <a href="http://unfoldingmaps.org/">Unfolding Maps</a>, a very complete and well-made library for using maps inside Processing. Here is a screenshot.</p>
<p><a href="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/quick_and_dirty_viz_of_anti_map_data.png"><img src="http://legacy.iaacblog.com/mai2012-2013-programming/files/2012/11/quick_and_dirty_viz_of_anti_map_data-300x241.png" alt="" title="quick_and_dirty_viz_of_anti_map_data" width="300" height="241" class="alignnone size-medium wp-image-398" /></a></p>
<p>That felt very static, and the core of my concept is how walking brings the city to life. I wanted to see how it would look like if I animated the trail, showing only a part of it. I also cleaned up the code a bit so it would be a bit easier to work with. This is the result:</p>
<p><iframe src="http://player.vimeo.com/video/53734552?badge=0&amp;color=55c4e4" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p><a href="http://vimeo.com/53734552">Visualization of GPS data, iteration 1</a> from <a href="http://vimeo.com/user7223162">Bert Balcaen</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>It draws a circle for each location. The circles grow and gradually become more transparent. It&#8217;s simple but interesting: it brings the data to life.</p>
<p>Cristobal suggested to use the map colors for the trail. I really like that idea, so I thought that would be a good next step. Here&#8217;s a video:</p>
<p><iframe src="http://player.vimeo.com/video/53742583?badge=0&amp;color=55c4e4" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p><a href="http://vimeo.com/53742583">Visualization of GPS data, iteration 2</a> from <a href="http://vimeo.com/user7223162">Bert Balcaen</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>However, at the moment I&#8217;m stuck on how to pick the right colors. The Unfolding library uses the <a href="http://glgraphics.sourceforge.net/">GLGraphics</a> for drawing maps, making the whole thing fast by using OpenGL. It also makes some basic things more complicated. For example: it seems that the <a href="http://www.processing.org/reference/get_.html">get()</a> function to find a color&#8217;s pixel doesn&#8217;t work as it should. I think some sort of offset is applied.</p>
]]></content:encoded>
			<wfw:commentRss>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/progress-on-gps-visualization-project-for-the-data-workshop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Project plan GPS visualization project for the data workshop</title>
		<link>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/project-plan-gps-visualization-project-for-the-data-workshop/</link>
		<comments>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/project-plan-gps-visualization-project-for-the-data-workshop/#comments</comments>
		<pubDate>Wed, 14 Nov 2012 16:21:00 +0000</pubDate>
		<dc:creator>balcaen.bert@iaac.net</dc:creator>
				<category><![CDATA[Bert Balcaen]]></category>
		<category><![CDATA[Int Programming]]></category>
		<category><![CDATA[Students]]></category>
		<category><![CDATA[Workshop]]></category>
		<category><![CDATA[bert_anti_map_viz]]></category>

		<guid isPermaLink="false">http://legacy.iaacblog.com/mai2012-2013-programming/?p=401</guid>
		<description><![CDATA[Core of the idea Walking brings the city alive. The piece will visualize data from walks and runs. We all create our own version of the city. The visualization will not include a typical map &#8211; it will show how we create Barcelona with our walks. People watching the piece might be able to recognize [...]]]></description>
				<content:encoded><![CDATA[<h2>Core of the idea</h2>
<ul>
<li>Walking brings the city alive. The piece will visualize data from walks and runs.</li>
<li>We all create our own version of the city. The visualization will not include a typical map &#8211; it will show how we create Barcelona with our walks. People watching the piece might be able to recognize neighbourhoods from the patterns generated by the walks.</li>
<li>I will focus on how walking is an act that exists only in the moment. The route will not be shown in its entirety.</li>
<li>The visualization of the location trail will use the standard map colors. This can help people to guess where to walker is, and will also reveal something about the qualities of the space used during the walk: main roads, sidewalks, buildings, parcs, …</li>
<li>Each GPS record is visualized as a line. Length is inversely related to speed. Short lines = fast. Long = slow. Direction of the line correspond to the compass.</li>
<li>Add basic info display with speed etc.</li>
</ul>
<h2>Phase 2: multiple routes</h2>
<ul>
<li>Check with running file, see if it’s different enough.</li>
</ul>
<h2>Phase 3: POI data</h2>
<ul>
<li>POI data is displayed along the route. The amount of POI’s displayed depends on the speed in a segment of a route. Slow sections have more POI’s.</li>
<li>POI’s popup with name when passing by, and disappear when moving further.</li>
<li>Data sources for POI’s: Foursquare.</li>
<li>Add street names to info display.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/project-plan-gps-visualization-project-for-the-data-workshop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Data Workshop</title>
		<link>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/data-workshop/</link>
		<comments>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/data-workshop/#comments</comments>
		<pubDate>Tue, 13 Nov 2012 09:29:56 +0000</pubDate>
		<dc:creator>cristobal@aerstudio.com</dc:creator>
				<category><![CDATA[Int Programming]]></category>
		<category><![CDATA[Workshop]]></category>
		<category><![CDATA[Instructions]]></category>

		<guid isPermaLink="false">http://legacy.iaacblog.com/mai2012-2013-programming/?p=378</guid>
		<description><![CDATA[Hi all, please read the following info related to the workshop: Our data source We&#8217;re going to be working with AntiMap as the tool to grab data. Please download it to your iPhone/Android and visit Antimap&#8217;s website to get more info about how to use it and the data it provides. Here is the list [...]]]></description>
				<content:encoded><![CDATA[<p>Hi all, please read the following info related to the workshop:</p>
<p><strong>Our data source</strong><br />
We&#8217;re going to be working with <a href="http://theantimap.com/">AntiMap</a> as the tool to grab data. Please download it to your iPhone/Android and visit <a href="http://theantimap.com/">Antimap&#8217;s website</a> to get more info about how to use it and the data it provides.</p>
<p>Here is the list of data that you can gather with the app:<br />
- <strong>Longitude and Latitude</strong> (angles, minutes and seconds in a range of -180 to 180 for the longitud, and 90 to -90 for the latitude)<br />
- <strong>Compass direction</strong> (inverted angle from 0 to 360)<br />
- <strong>Speed</strong> (Km/h)<br />
- <strong>Distance</strong> (m)<br />
- <strong>Time</strong> (in milliseconds since the app starts to record)<br />
- <strong>Point of interest (POI)</strong>. I never tried how this works though&#8230;</p>
<p>&#8212;</p>
<p><strong>Workshop plan</strong><br />
- Tue: <strong>Concept</strong>. Send me your ideas via email (min. 2, max. 3). Each idea should be explained in 250 words max. and can have an image as reference (from a project found online or your own sketch)<br />
- Wed: <strong>Design</strong>. You will develop your visual sketches into a nice graphic design during the class. We&#8217;ll work together in defining the <strong>code structure</strong> for your project as well. The last 30 min of class we will review everyone&#8217;s project to get a status of the workshop.<br />
- Thu &#038; Fri: <strong>Code</strong>. We can try to meet on Friday (or Saturday if you prefer) to do the final adjustments to your code.<br />
<strong>Projects can be delivered until Sunday</strong> (but no further because we will start another weekly workshop)</p>
<p>&#8212;</p>
<p><strong>Design constrains</strong>. You must follow these basic rules in your design:<br />
- You can only use <strong>basic shapes</strong> for your graphics (points, lines, circles, rectangles and triangles)<br />
- You can only use <strong>grayscale plus 1 highlight color</strong><br />
- You can only use <strong>1 Typeface</strong> (up to 3 different sizes)</p>
<p>&#8212;</p>
<p>And finally, some recommendations:<br />
- Take some time to research. You&#8217;ll probably find inspiration for you visuals or their behaviour (motion). <strong>Post what you find interesting for your project in the blog</strong> (under &#8220;References&#8221; category).<br />
- Be realistic with the time you can dedicate to your project, <strong>it&#8217;s important that you deliver in time</strong>.<br />
- Take clever decisions to simplify your project while maintaining the overall concept. <strong>Do the maximun with the minimun elements</strong>.<br />
- <strong>Look for code that you can re-use</strong>. <a href="http://www.openprocessing.org/">OpenProcessing</a> is a good source of code.<br />
- Enjoy it!</p>
]]></content:encoded>
			<wfw:commentRss>http://legacy.iaacblog.com/mai2012-2013-programming/2012/11/data-workshop/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
