{"id":740,"date":"2007-08-23T08:52:44","date_gmt":"2007-08-23T13:52:44","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=740"},"modified":"2015-07-31T18:25:52","modified_gmt":"2015-07-31T23:25:52","slug":"actionscript-3-spray-paint-with-bitmapdata","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2007\/08\/23\/actionscript-3-spray-paint-with-bitmapdata\/","title":{"rendered":"Actionscript 3 Spray Paint with BitmapData"},"content":{"rendered":"<p><strong>By Lon (Alonzo) Hosford<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" style=\"margin-right: 5px;\" src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/THJ8Ov1jONI\/AAAAAAAAFro\/0G2ejFkcA5s\/s288\/Chapter04_Rendering_Techniques_AS3_8-19-2010%208-51-32%20AM.png\" alt=\"\" width=\"288\" height=\"230\" \/>This my own version of  of Keith Peter&#8217;s <a href=\"http:\/\/www.amazon.com\/gp\/product\/1590597915?ie=UTF8&amp;tag=hosfordusa&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1590597915\">Foundation Actionscript 3.0 Animation: Making Things Move<\/a> chapter 4 use of the BitmapData class to create a spray paint example.<\/p>\n<p><strong>Download files<\/strong><br \/>\n[August 10 2010 &#8211; I updated this to an Actionscript project in Flex Builder 4. ]<\/p>\n<p>You can build this with the free Flex SDK by using the code in the src folder. Same for Flash CS3 and later versions. You need to create a Flash Document in the src folder and set the document class to <code>Chapter04_SprayPaint<\/code>. For your convenience the Flash CS4 example download is included.<br \/>\n<figure style=\"width: 134px\" class=\"wp-caption alignright\"><a href=\"http:\/\/www.amazon.com\/gp\/product\/1590597915?ie=UTF8&amp;tag=hosfordusa&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1590597915\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"  \" title=\"Keith Peters AS3 Animation\" src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/TF1xrKyqv4I\/AAAAAAAAFqI\/IFBuU9b7ijs\/s800\/51PvDwNRxYL._SL160_.jpg\" alt=\"Keith Peters AS3 Animation\" width=\"134\" height=\"160\" \/><\/a><figcaption class=\"wp-caption-text\">Learn More<\/figcaption><\/figure><\/p>\n<ul style=\"padding-top: 10px;\">\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter04_SprayPaint_AS3.zip\">Flex Builder 4 Actionscript Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter04_SprayPaint_Flex.fxp\">Flex Builder 4 Flex Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/animation\/keith_peters_as3_animation\/Chapter04_SprayPaint_Flash_CS4.zip\">Flash CS4<\/a><\/li>\n<\/ul>\n<p>This article shows the code for the Flex project. This Flex version is a spark implementation.<\/p>\n<p><strong>Application Class &#8211; Chapter04_SprayPaint<\/strong><br \/>\nThe <code>canvas<\/code> instance of the <code>BitmapData<\/code> class is instantiated line 32. The <code>BitmapData<\/code> class <code>setPixel32(...)<\/code> method on line 83 is used to set the color and alpha transparency values of a single 32 bit pixel.<\/p>\n<p>The overall user interaction is mouse down start the enter frame events that call the <code>draw()<\/code> method and also to select a random color. <\/p>\n<pre class=\"brush: as3; highlight: [32]; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n&lt;!--\r\n\tApplication class to demonstrate use of the BitmapData class along with animation trigonometry. \r\n\t&lt;p&gt;Author: Lon Hosford https:\/\/www.lonhosford.com 908 996 3773&lt;\/p&gt;\r\n    &lt;p&gt;Reference: Keith Peter's Actionscript 3.0 Animation Chapter 4&lt;\/p&gt;\r\n\t\r\n--&gt;\r\n&lt;s:Application xmlns:fx=&quot;http:\/\/ns.adobe.com\/mxml\/2009&quot; \r\n\t\t\t   xmlns:s=&quot;library:\/\/ns.adobe.com\/flex\/spark&quot; \r\n\t\t\t   xmlns:mx=&quot;library:\/\/ns.adobe.com\/flex\/mx&quot; width=&quot;400&quot; height=&quot;400&quot;\r\n\t\t\t   creationComplete=&quot;creationCompleteHandler(event)&quot; \r\n\t\t\t   viewSourceURL=&quot;srcview\/index.html&quot;&gt;\r\n\t&lt;fx:Script&gt;\r\n\t\t&lt;!&#x5B;CDATA&#x5B;\r\n\t\t\timport mx.events.FlexEvent;\r\n\t\t\t\r\n\t\t\t\/\/ Properties for background\r\n\t\t\tprivate static const backgroundColor:Number = 0xffffff;\r\n\t\t\tprivate static const backgroundBorderColor:Number = 0x666666;\r\n\t\t\tprivate static const backgroundBorderWeight:Number = 2;\r\n\t\t\tprivate var canvas:BitmapData;\t\t\t\/\/ Pixel level access\r\n\t\t\tprivate var color:uint;\t\t\t\t\t\/\/ Randomly generated spray brush colors\r\n\t\t\tprivate var size:Number = 20;\t\t\t\/\/ Size of the spray brush\r\n\t\t\tprivate var density:Number = 50;\t\t\/\/ Number of pixels sprayed per frame\r\n\t\t\t\/**\r\n\t\t\t * Handler for Application creationComplete event\r\n\t\t\t * *\/\r\n\t\t\tprotected function creationCompleteHandler(event:FlexEvent):void\r\n\t\t\t{\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Create BitmapData object allowing use to work with pixels\r\n\t\t\t\tcanvas = new BitmapData( background_bc.width,background_bc.height, true, 0x00000000);\r\n\t\t\t\tvar bmp:Bitmap =  new Bitmap(canvas);\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Add itmapData object to a SpriteVisualElement\r\n\t\t\t\tarrowVisualElement.addChild(bmp);\r\n\t\t\t\t\/\/ Handlers for mouse events to signal drawing.\r\n\t\t\t\taddEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);\r\n\t\t\t\taddEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Event handler for MouseEvent.MOUSE_DOWN\r\n\t\t\t * *\/\r\n\t\t\tprivate function mouseDownEventHandler(event:Event):void \r\n\t\t\t{\r\n\t\t\t\t\/\/ Random color from 0 to highest color value which is white\r\n\t\t\t\t\/\/ and then add alpha channel of opaque\r\n\t\t\t\tcolor = Math.random() * 0xffffff + 0xff000000;\r\n\t\t\t\t\/\/ Start enter frame events\r\n\t\t\t\tstage.addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Event handler for MouseEvent.MOUSE_UP\r\n\t\t\t * *\/\r\n\t\t\tprivate function mouseUpEventHandler(event:Event):void \r\n\t\t\t{\r\n\t\t\t\tstage.removeEventListener(Event.ENTER_FRAME, enterFrameEventHandler);\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Event handler for Event.ENTER_FRAME\r\n\t\t\t * *\/\r\n\t\t\tprivate function enterFrameEventHandler(event:Event):void \r\n\t\t\t{\r\n\t\t\t\tdraw();\r\n\t\t\t}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\nThe <code>draw<\/code> method uses the <code>density<\/code> variable on line 72 to determine the number of pixels to color using randomization to compute an angle and a radius within the size of the brush. <\/p>\n<p>Each pixel is basically a point on its own circle. The mouse is becomes a center point for a random circle with a diameter up to the <code>size<\/code> variable. Line 77 computes the radius for that circle. <\/p>\n<p>Keith&#8217;s formulas for computing points on a circle math from chapter 3 are then used to compute the position of the pixel on lines 79 and 81.<\/p>\n<pre class=\"brush: as3; first-line: 66; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\r\n\t\t\t\/**\r\n\t\t\t * Draw\r\n\t\t\t * *\/\r\n\t\t\tprivate function draw():void \r\n\t\t\t{\r\n\t\t\t\t\/\/ Repeat for number of pixels - density.\r\n\t\t\t\tfor (var i:int = 0; i &lt; density; i++)\r\n\t\t\t\t{\r\n\t\t\t\t\t\/\/ Random angle 0 - 6.2832 radians  (0 - 360)\r\n\t\t\t\t\tvar angle:Number = Math.random() * Math.PI * 2;\r\n\t\t\t\t\t\/\/ Radius is random percentage of maximum radius (size \/ 2)\r\n\t\t\t\t\tvar radius:Number = Math.random() * size \/ 2;\r\n\t\t\t\t\t\/\/ Center is mouseX to compute the x point\r\n\t\t\t\t\tvar xpos:Number = mouseX + Math.cos(angle) * radius;\r\n\t\t\t\t\t\/\/ Center is mouseY to compute the y point\r\n\t\t\t\t\tvar ypos:Number = mouseY + Math.sin(angle) * radius;\r\n\t\t\t\t\t\/\/Set the color and alpha transparency values of a single 32 bit pixel.\r\n\t\t\t\t\tcanvas.setPixel32(xpos, ypos, color);\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t]]&gt;\r\n\t&lt;\/fx:Script&gt;\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\nThe <code>SpriteVisualElement<\/code> component allows adding the <code>canvas BitmapData<\/code> object to the display list.<\/p>\n<pre class=\"brush: as3; first-line: 90; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t&lt;!--- \r\n\tBackground for app \r\n\t--&gt; \r\n\t&lt;s:BorderContainer id = &quot;background_bc&quot;\r\n\t\t\t\t\t   width=&quot;{width}&quot; height = &quot;{height}&quot;\r\n\t\t\t\t\t   borderWeight=&quot;{backgroundBorderWeight}&quot;\r\n\t\t\t\t\t   borderColor=&quot;{backgroundBorderColor}&quot;\r\n\t\t\t\t\t   backgroundColor=&quot;{backgroundColor}&quot;&gt;\r\n\r\n\t\t&lt;!--- \r\n\t\tSpark container for Sprite \r\n\t\t--&gt; \r\n\t\t&lt;s:SpriteVisualElement id=&quot;arrowVisualElement&quot; \/&gt;\r\n\r\n\t&lt;\/s:BorderContainer&gt;\r\n\t&lt;!--- \r\n\tInstructions \r\n\t--&gt; \r\n\t&lt;s:Label x=&quot;96&quot; y=&quot;378&quot; text=&quot;Click and drag mouse to spray paint.&quot;\/&gt;\r\n\t\t\t\t\t   \r\n&lt;\/s:Application&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>By Lon (Alonzo) Hosford This my own version of of Keith Peter&#8217;s Foundation Actionscript 3.0 Animation: Making Things Move chapter 4 use of the BitmapData class to create a spray paint example. Download files [August 10 2010 &#8211; I updated this to an Actionscript project in Flex Builder 4. ] You can build this with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[19,12,30,48,3,18,49],"class_list":["post-740","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-air-adobe-integrated-runtime","tag-animation","tag-bitmapdata","tag-adobe-flash","tag-flex-4","tag-keith-peters"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=740"}],"version-history":[{"count":13,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/740\/revisions"}],"predecessor-version":[{"id":3710,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/740\/revisions\/3710"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}