{"id":363,"date":"2009-07-31T07:05:24","date_gmt":"2009-07-31T14:05:24","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1878"},"modified":"2009-07-31T07:05:24","modified_gmt":"2009-07-31T14:05:24","slug":"perlin-outlines","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=363","title":{"rendered":"Perlin Outlines"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width = 600, height=600, backgroundColor=0xCCCCCC, frameRate=24)]\r\nvar canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);\r\nvar blur:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);\r\naddChild(new Bitmap(canvas, &quot;auto&quot;, true));\r\n\r\nvar w:int = canvas.width \r\nvar hw:int = w \/ 2;\r\nvar size:int = w * w;\r\nvar seed:Number = Math.random()*100;\r\nvar pnt:Point = new Point();\r\nvar dy:Number = 0, dx:Number = 0;\r\nvar blr:BlurFilter = new BlurFilter(10,10,1);\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\t\r\n\tdx += (mouseX - dx) \/ 4;\r\n\tdy += (mouseY - dy) \/ 4;\r\n\tcanvas.lock();\r\n\tcanvas.perlinNoise(hw,hw,2,seed,false, false, 1, true, &#x5B;new Point(dx, dy), new Point(-dx, -dy)]);\r\n\tvar pix:Vector.&lt;uint&gt; = canvas.getVector(canvas.rect);\r\n\tfor (var i:int = 0; i&lt;size; i++){\r\n\t\tvar col:uint = 255 - pix&#x5B;i] &lt;&lt; 4 &amp; 0x00FF00;\r\n\t\tpix&#x5B;i] = col &lt;&lt; 8 | col | col &gt;&gt; 8;\r\n\t}\r\n\tcanvas.setVector(canvas.rect, pix);\r\n\tblur.copyPixels(canvas, canvas.rect, pnt);\r\n\tblur.applyFilter(blur, blur.rect, pnt, blr);\r\n\tcanvas.draw(blur, null, null, BlendMode.DIFFERENCE);\r\n\tcanvas.draw(canvas, null, null, BlendMode.INVERT);\r\n\tcanvas.unlock();\r\n}\r\n<\/pre>\n<p>This is actually an optimized variation on some recent posts that made use of perlin noise. You can get a wide range of effects by changing just the BlendMode values alone&#8230;. I particularly like this combination of BlendModes because it reminds me a bit of a terrain map&#8230;<br \/>\n<a data-asruffle-linked=\"true\" href=\"https:\/\/actionsnippet.com\/swfs\/perlin_outlines.html\" target=\"blank\"><br \/>\nHave a look at the swf&#8230;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/perlin_outlines.jpg\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/perlin_outlines.swf&quot;,&quot;title&quot;:&quot;perlin outlines&quot;,&quot;width&quot;:600,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#cccccc&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: perlin outlines<\/span><\/button><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(width = 600, height=600, backgroundColor=0xCCCCCC, frameRate=24)] var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000); var blur:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000); addChild(new Bitmap(canvas, &quot;auto&quot;, true)); var w:int = canvas.width var hw:int = w \/ 2; var size:int = w * w; var seed:Number = Math.random()*100; var pnt:Point = new Point(); var dy:Number = 0, dx:Number = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25,79],"tags":[3,14,4],"class_list":["post-363","post","type-post","status-publish","format-standard","hentry","category-bitmapdata","category-pixel-manipulation","category-vector","tag-actionscript","tag-as3","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/363","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=363"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}