{"id":161,"date":"2009-01-19T00:00:11","date_gmt":"2009-01-19T07:00:11","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=556"},"modified":"2009-01-19T00:00:11","modified_gmt":"2009-01-19T07:00:11","slug":"parallax-displacement-map","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=161","title":{"rendered":"Parallax Displacement Map"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width=500, height=500, backgroundColor=0xCCCCCC, frameRate=30)]\r\n\r\nvar canvas:BitmapData = new BitmapData(500, 500, true, 0xFF000000);\r\naddChild(new Bitmap(canvas));\r\n\r\n\/\/ create a radial gradient\r\nvar radial:Shape = new Shape();\r\nvar m:Matrix = new Matrix()\r\nm.createGradientBox(500,500,0,0,0);\r\nradial.graphics.beginGradientFill(GradientType.RADIAL, &#x5B;0xFFFFFF, 0x000000], &#x5B;1, 1], &#x5B;0, 200], m, SpreadMethod.PAD);\r\n\r\nradial.graphics.drawRect(0,0,500,500);\r\nradial.x = radial.y = 0;\r\n\r\nvar displace:BitmapData = new BitmapData(500, 500, false,0xFF000000);\r\ndisplace.perlinNoise(150,150, 3, 30, true, false,0,true);\r\n\r\n\/\/ try different blendmodes here\r\ndisplace.draw(radial, null ,null, BlendMode.LIGHTEN);\r\n \r\nvar displacementMap:DisplacementMapFilter = new DisplacementMapFilter(displace, new Point(0,0), 1, 1,  0, 0, DisplacementMapFilterMode.WRAP);\r\n\r\nvar scale:Number = 50 \/ stage.stageWidth;\r\n\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n \r\n\tcanvas.copyPixels(displace, canvas.rect, new Point(0,0));\r\n\t \r\n\tdisplacementMap.scaleX = 25 - mouseX  * scale ;\r\n\tdisplacementMap.scaleY = 25 - mouseY  * scale ;\r\n\t\r\n\tcanvas.applyFilter(canvas, canvas.rect, new Point(0,0), displacementMap);\r\n}\r\n<\/pre>\n<p>This one is hard to describe, <a data-asruffle-linked=\"true\" href=\"https:\/\/actionsnippet.com\/swfs\/para_displace.html\" target=\"blank\">so take a look at the swf first<\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/para_displace.swf&quot;,&quot;title&quot;:&quot;para displace&quot;,&quot;width&quot;:500,&quot;height&quot;:550,&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\">: para displace<\/span><\/button><\/span>.<\/p>\n<p>I think displacement maps are underused &#8211; they&#8217;re very powerful. In this snippet I use a DisplacementMapFilter to create a parallax effect on some perlin noise and a radial gradient. The result is an abstract texture that looks 3D. <\/p>\n<p>I got the idea from a <a href=\"http:\/\/blog.alternativaplatform.com\/en\/2008\/01\/04\/character-parallax\/\">demo for the alternative game engine<\/a>. The first time I saw this demo I had no idea how they were doing it&#8230; but after looking at it a few times, I noticed some distortion around the neck area of the model&#8230; at that point I recognized it as a displacement map and whipped up a demo (using a drawings as the source image). The alternativa demo also has some color stuff happening to simulate lighting&#8230; I&#8217;m assuming that&#8217;s done with a ColorMatrixFilter or two, but I&#8217;m not sure.<\/p>\n<p>As in the alternativa demo, this technique could be used with 2 images&#8230; one depth map rendered out from your favorite 3D app and one textured render&#8230;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(width=500, height=500, backgroundColor=0xCCCCCC, frameRate=30)] var canvas:BitmapData = new BitmapData(500, 500, true, 0xFF000000); addChild(new Bitmap(canvas)); \/\/ create a radial gradient var radial:Shape = new Shape(); var m:Matrix = new Matrix() m.createGradientBox(500,500,0,0,0); radial.graphics.beginGradientFill(GradientType.RADIAL, &#x5B;0xFFFFFF, 0x000000], &#x5B;1, 1], &#x5B;0, 200], m, SpreadMethod.PAD); radial.graphics.drawRect(0,0,500,500); radial.x = radial.y = 0; var displace:BitmapData = new BitmapData(500, 500, false,0xFF000000); displace.perlinNoise(150,150, 3, 30, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101,24,94],"tags":[3,4],"class_list":["post-161","post","type-post","status-publish","format-standard","hentry","category-3d","category-bitmapdata","category-misc","tag-actionscript","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/161","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=161"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/161\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}