{"id":482,"date":"2010-02-27T11:38:24","date_gmt":"2010-02-27T18:38:24","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2736"},"modified":"2010-02-27T11:38:24","modified_gmt":"2010-02-27T18:38:24","slug":"capturing-colors","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=482","title":{"rendered":"Capturing Colors in Motion"},"content":{"rendered":"<p>So no one attempted to post their version for capturing saturated moving colors from a video feed.<br \/>\nI&#8217;ve had one working for some time now and based on the reactions I&#8217;m getting I think the approach I took is a relatively interesting one. Below You can watch a demo and view  a descriptive diagram, as well as view the source code and and online version of the color selector.<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"http:\/\/www.actionsnippet.com\/co\/capture_colors_demo.html\" target=\"blank\"><br \/>\nClick for visual description and prerecorded video:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/grabbing_colors.jpg\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/co\\\/capture_colors_demo.swf&quot;,&quot;title&quot;:&quot;capture colors demo&quot;,&quot;width&quot;:750,&quot;height&quot;:1000,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: capture colors demo<\/span><\/button><\/span><br \/>\n<a data-asruffle-linked=\"true\" href=\"http:\/\/www.actionsnippet.com\/co\/capture_colors_cam.html\" target=\"blank\"><br \/>\nClick Here to test out a live version with your web cam&#8230;<br \/>\n<\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/co\\\/capture_colors_cam.swf&quot;,&quot;title&quot;:&quot;capture colors cam&quot;,&quot;width&quot;:800,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: capture colors cam<\/span><\/button><\/span><\/p>\n<p>Because we are working with a small group of developers on this project we&#8217;ve ported everything to processing (since that&#8217;s what most everyone is using)&#8230; but here is the original actionscript code, its a tad messy but it gets the job done:<\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar bufferSize:int = 20;\r\nvar blurAmount:Number = 20;\r\nvar motionColor:uint = 0xFF222222;\r\nvar pixelNum:int = 800 * 600;\r\n\r\nvar cam:Camera =  Camera.getCamera();\r\n\r\ncam.addEventListener(ActivityEvent.ACTIVITY, onActivityStart);\r\n\r\nfunction onActivityStart(evt:ActivityEvent):void {\r\n\ttrace(&quot;start&quot;);\r\n\taddEventListener(Event.ENTER_FRAME, onLoop);\r\n\tcam.removeEventListener(ActivityEvent.ACTIVITY, onActivityStart);\r\n}\r\n cam.setMode(800,600,30);\r\n \r\nvar video:Video = new Video(800, 600);\r\nvideo.attachCamera(cam);\r\n\r\nvar canvas:BitmapData = new BitmapData(800,600,false, 0x000000);\r\n\/\/addChild(new Bitmap(canvas));\r\nvar feed:BitmapData = new BitmapData(800,600,false, 0x000000);\r\naddChild(new Bitmap(feed));\r\n\r\nvar prev:BitmapData = new BitmapData(800,600,false, 0x000000);\r\n\r\nvar thresh:BitmapData = new BitmapData(800, 600, true, 0xFF000000);\r\n\/\/addChild(new Bitmap(thresh));\r\nvar cm = new ColorMatrixFilter(&#x5B;0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0,0,0,1,0]);\r\n\r\nvar threshSamples:Vector.&lt;uint&gt; = new Vector.&lt;uint&gt;();\r\nvar samples:Vector.&lt;uint&gt; = new Vector.&lt;uint&gt;();\r\nvar pixelSampleRate:int = 10;\r\n\r\nvar shape:Shape = Shape(addChild(new Shape()))\r\n\r\n \r\n\r\nfunction onLoop(evt:Event):void {\r\n\t \r\n\t\tcanvas.draw(video);\r\n\t\tfeed.draw(video);\r\n\t\t\r\n\t\tcanvas.draw(prev, null, null, BlendMode.DIFFERENCE);\r\n\t\tcanvas.applyFilter(canvas, canvas.rect, new Point(0,0), new BlurFilter(blurAmount, blurAmount, 1));\r\n\t\t\/\/canvas.applyFilter(canvas, canvas.rect, new Point(0,0), cm);\r\n\t\tprev.draw(video);\r\n\t\t\r\n\t\tthresh.fillRect(thresh.rect, 0x000000);\r\n\t\tthresh.threshold(canvas, canvas.rect, new Point(0,0), &quot;&gt;=&quot;, motionColor, 0xFFFF0000, 0xFF00FF00);\r\n\t\t\r\n\t\tthreshSamples = thresh.getVector(thresh.rect);\r\n\t\t\r\n\t\tvar cols:Array = &#x5B;]\r\n\t\tvar index:int = 0;\r\n\t\tfor (var i:int = 0; i&lt;pixelNum; i+=pixelSampleRate){\r\n\t\t\tif (threshSamples&#x5B;i] == 0xFFFF0000){\r\n\t\t\t\tvar col = feed.getPixel(i % 800, int(i \/ 800));\r\n\t\t\t\tvar r = col &gt;&gt; 16 &amp; 0xFF;\r\n\t\t\t\tvar g = col &gt;&gt; 8 &amp; 0xFF;\r\n\t\t\t\tvar b = col &amp; 0xFF;\r\n\t\t\t\tvar sl = toHSB(r, g, b);\r\n\t\t\t\tif (sl&#x5B;0] &gt; 60 &amp;&amp; sl&#x5B;1] &gt; 30 &amp;&amp; sl&#x5B;1] &lt; 60){\r\n\t\t\t\t  cols&#x5B;index++] = col;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\tif (cols.length &gt; 0){\r\n\t\t\tshape.graphics.clear();\r\n\t\t\tshape.graphics.beginFill(cols&#x5B;int(cols.length * Math.random())]);\r\n\t\t\tshape.graphics.drawRect(0,0,100,100);\r\n\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t   \r\n}\r\n\r\n\/\/ this is from somewhere online, if I can find the link I&#039;ll post it\r\nfunction toHSB(R, G, B):Array{\r\n\tvar H, S, L\r\n\tvar var_R = ( R \/ 255 )                     \/\/RGB from 0 to 255\r\n\tvar var_G = ( G \/ 255 )\r\n\tvar var_B = ( B \/ 255 )\r\n\t\r\n\tvar var_Min = Math.min( var_R, var_G, var_B )    \/\/Min. value of RGB\r\n\tvar var_Max = Math.max( var_R, var_G, var_B )    \/\/Max. value of RGB\r\n\tvar del_Max = var_Max - var_Min             \/\/Delta RGB value\r\n\t\r\n\tL = ( var_Max + var_Min ) \/ 2\r\n\t\r\n\tif ( del_Max == 0 )                     \/\/This is a gray, no chroma...\r\n\t{\r\n\t   H = 0                                \/\/HSL results from 0 to 1\r\n\t   S = 0\r\n\t}\r\n\telse                                    \/\/Chromatic data...\r\n\t{\r\n\t   if ( L &lt; 0.5 ) S = del_Max \/ ( var_Max + var_Min )\r\n\t   else           S = del_Max \/ ( 2 - var_Max - var_Min )\r\n\t\r\n\t  var del_R = ( ( ( var_Max - var_R ) \/ 6 ) + ( del_Max \/ 2 ) ) \/ del_Max\r\n\t  var del_G = ( ( ( var_Max - var_G ) \/ 6 ) + ( del_Max \/ 2 ) ) \/ del_Max\r\n\t  var del_B = ( ( ( var_Max - var_B ) \/ 6 ) + ( del_Max \/ 2 ) ) \/ del_Max\r\n\t\r\n\t   if      ( var_R == var_Max ) H = del_B - del_G\r\n\t   else if ( var_G == var_Max ) H = ( 1 \/ 3 ) + del_R - del_B\r\n\t   else if ( var_B == var_Max ) H = ( 2 \/ 3 ) + del_G - del_R\r\n\t\r\n\t   if ( H &lt; 0 ) ; H += 1\r\n\t   if ( H &gt; 1 ) ; H -= 1\r\n\t}\r\n\treturn &#x5B; int(S * 100), int(100 * L)]\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>So no one attempted to post their version for capturing saturated moving colors from a video feed. I&#8217;ve had one working for some time now and based on the reactions I&#8217;m getting I think the approach I took is a relatively interesting one. Below You can watch a demo and view a descriptive diagram, as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[152],"tags":[3,14,153,4],"class_list":["post-482","post","type-post","status-publish","format-standard","hentry","category-projects","tag-actionscript","tag-as3","tag-color-occurrence","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=482"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/482\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}