<?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>noCreativity.com &#187; detection</title>
	<atom:link href="http://nocreativity.com/blog/tag/detection/feed" rel="self" type="application/rss+xml" />
	<link>http://nocreativity.com</link>
	<description>The life and discoveries of a new media artist</description>
	<lastBuildDate>Sat, 07 Jan 2012 17:03:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Webcam motion detection coolness</title>
		<link>http://nocreativity.com/blog/webcam-motion-detection-coolness</link>
		<comments>http://nocreativity.com/blog/webcam-motion-detection-coolness#comments</comments>
		<pubDate>Sun, 18 Jan 2009 17:43:21 +0000</pubDate>
		<dc:creator>Ronny</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Download]]></category>
		<category><![CDATA[Open-source]]></category>
		<category><![CDATA[ActionScript 3]]></category>
		<category><![CDATA[detection]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[motion]]></category>
		<category><![CDATA[source]]></category>
		<category><![CDATA[webcam]]></category>
		<category><![CDATA[webcam motion]]></category>
		<category><![CDATA[webcam motion detection]]></category>

		<guid isPermaLink="false">http://nocreativity.com/blog/?p=355</guid>
		<description><![CDATA[A few weeks ago I had to create an innovative way to scroll in a page. I have seen tons of scrollbars in Flash and I found it hard to create something completely new. At one point I wondered if I could wire the scrollbar to a webcam using Actionscript&#8230; So I started experimenting around&#8230; [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://nocreativity.com/blog-engine/wp-content/uploads/2009/01/picture-1071.jpg"><img class="aligncenter size-large wp-image-357" title="Webcam motion detection: step by step development" src="http://nocreativity.com/blog-engine/wp-content/uploads/2009/01/picture-1071-1024x533.jpg" alt="Webcam motion detection: step by step development" width="491" height="256" /></a></p>
<p>A few weeks ago I had to create an innovative way to scroll in a page. I have seen tons of scrollbars in Flash and I found it hard to create something completely new. At one point I wondered if I could wire the scrollbar to a webcam using Actionscript&#8230; So I started experimenting around&#8230;</p>
<p>When I first started I quickly ran into a problem: How the hell do I know if anything is moving? So I actually got stuck right in the beginning.<br />
I went on a Google trip which led me to <a href="http://newmovieclip.wordpress.com/" target="_blank" target="_blank">Koen</a>&#8216;s post about <a href="http://newmovieclip.wordpress.com/2006/06/11/detect-and-locate-webcam-motion-in-flash-8/" target="_blank" target="_blank">motion detection</a>. Koen was checking all the pixels (using nested loops) to calculate color values. I figured this generated way too much overhead. There had to be a better/simpeler way.</p>
<p>In his post Koen mentioned an article, written by <a href="http://www.flashguru.co.uk/" target="_blank" target="_blank">Guy Watson</a>, concerning <a href="http://www.adobe.com/devnet/flash/articles/webcam_motion.html" target="_blank" target="_blank">an other way</a> to get motion detection going. To make things simple: Guy just takes 2 pictures &#8211; one of the previous frame, one of the current &#8211; puts them on top of eachother, and applies the difference blend mode to the upper one: Tadaaa! There we go! The &#8216;unchanged&#8217; pixels are blacked out. The remaining pixels are the difference in the picture&#8230; which reflects movement. <span id="more-355"></span></p>
<p>So I went back to Flash and put something similar together. All I had to do now was clean up the image, turn the difference remainings white, and detect what in the picture remains white.</p>
<p>That last part turned out to be quite tricky too. When I first got to that milestone I quickly checked the BitmapData class for intresting methods, but I didn&#8217;t find anything intresting. Later on, I talked to <a href="http://Peterelst.com" target="_blank" target="_blank">Peter Elst</a> and Koen at Flex Camp, and they told me to look again because there actually was a function: getColorBoundsRect()</p>
<p>There we go: that&#8217;s a solution right there! And it worked out just fine!<br />
You can test it for yourself in this <a href="http://labs.nocreativity.com/webcammotiondetection/"rel="shadowbox"  target="_blank">little test application</a> &#8211; requires a webcam (duh!)</p>
<h3>Download</h3>
<p>Flex Project source: <a href="http://labs.nocreativity.com/webcammotiondetection/source.zip">source.zip</a><br />
Webcam motion detector class (Actionscript 3): <a href="http://labs.nocreativity.com/webcammotiondetection/MotionDetector.zip">MotionDetector.zip</a></p>
<p>I was planning on adding a &#8216;sensitivity&#8217; property for motion detection but that turned out to be a bit harder. So I decided to postpone that for now (procrastination is a bitch <img src='http://nocreativity.com/blog-engine/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  )<br />
Feel free to suggest better ways of doing this. I&#8217;m still pretty sure I&#8217;m creating a bit too much overhead to make this work <img src='http://nocreativity.com/blog-engine/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://nocreativity.com/blog/webcam-motion-detection-coolness/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

