What does this mean for me? You will always be able to play your favorite games on Kongregate. However, certain site features may suddenly stop working and leave you with a severely degraded experience.
What should I do? We strongly urge all our users to upgrade to modern browsers for a better experience and improved security.
We suggest you install the latest version of one of these browsers:
Kongregate is a community-driven browser games portal with an open platform for all web games.
Get your games in front of thousands of users while monetizing through ads and virtual goods.
Learn more »
I’m trying to make a spherical bump in a graphic using DisplacementMapFilter.. And I have problems rendering the map itself. I don’t know anything about 3D math so I thought I could calculate the sine of every pixel in a semicircle ([,](http://pastebin.com/YCtUghLB))
And then somehow use the sine values on both x and y axis. But that would just make some squarish shit, so
How do I render a DisplacementMapFilter bitmapdata for a sphere?
If you don’t know anything about DisplacementMapFilter: I should make a bitmapdata with values from #7F to #FF where #FF is the highest point of the sphere and #7F is neutral (I think)
get your radius, get your center, calculate the distance from center for your current point. If above radius, slap #7F. Otherwise, calculate `0x80*Math.sqrt(1.0-distance*distance/(radius*radius))` and add this to #7F, slap the result into displacement map.
Well, if you split your sphere by an equator and lay it on the plane flat side down, that sqrt() will be its height at the corresponding point, if the sphere’s radius is 1. Since you can’t correctly reflect the radius, as you are limited by height, I provided a constant 0×80 that’s the cap for itmap value (0xFF-0×7F), but feel free to change it if your sphere’s radius will be way smaller. If distance from the center is outside the sphere, there’s no sphere therefore height is 0.
I didn’t understand why it’s `1.0-distance*distance/(radius*radius)` but never mind, I shouldn’t bother you explain the math. I might ask my math teacher in 30 min.
> but feel free to change it if your sphere’s radius will be way smaller
Made me wonder, how do I make the sphere as deep as its radius (how strong the filter is)? Do I use scaleX and scaleY?
> scaleX:Number (default = 0.0) — The multiplier to use to scale the x displacement result from the map calculation.
> scaleY:Number (default = 0.0) — The multiplier to use to scale the y displacement result from the map calculation.
Wait, it seems I have not understood DisplacementMapFilter.
They use bitmaps like these to make spheres — I don’t get it. And then [this](http://www.emanueleferonato.com/2009/08/12/pure-as3-magnifying-effect-using-displacement-map-filter/) makes a magnifier. Can someone help me understand the DisplacementMapFilter map?
I really need help with this .. How do you make a bitmapdata to DisplacementMapFilter that can render a bitmap to look like a sphere? The picture in my last post only did it on the x axis and I would also need to make a new one for any different size I need on the sphere. Thus, I want to know how I can generate a map like that (no picture in library).
Looks like you got that image from the Moon Displacement example at the Adobe web site. I thought the explanation was pretty straightforward. Can you post screenshots of the sphere you’re rendering so we can see what’s wrong?
I haven’t rendered anything yet because that map is only applying on x axis and I need on both.
I guess I could just rotate it by 90 degrees and copy it to the green component to do that? And I gotta scale it all the time. I am just wondering how this works because it does not make sense to me
I see. In the [Moon Displacement article](http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d61.html), there are two reason why pixels aren’t being distorted along the y-axis.
1. In the call to make a new DisplacementMapFilter, the value of the scaleY parameter is 0. That means nothing will be displaced on the y-axis. However, setting this to some other value such as the radius of your sphere won’t work either because of reason number 2:
2. In the function createFisheyeMap, notice that the green channel is always zero. That’s why the bitmap for the filter looks like a red sphere. Its green and blue channels are both set to zero. You don’t need the blue channel, but you’ll need the green channel to be set to a proper value.
Try changing the function to use the following formula:
`green = 128 * (1 + 0.99 * pctY * pctY * pctY / (1 - pctX * pctX));`
Also, when you instantiate a new DisplacementMapFilter, be sure to set the scaleY parameter to be the same as the radius of your sphere. For example:
_myFilter = new DisplacementMapFilter(bdSphere,
new Point(mouseX - _sphereRadius, mouseY - _sphereRadius),
Yes, it should do that if you rotate it properly. [Here](http://www.innerdrivestudios.com/blog/category/articles/as2-displacement-maps) is a base principle behind a displacement map filter. You give it x-scale and y-scale in pixels, and a displacement map, the filter makes each point be replaced by a point shifted by the map’s encoded vector.
~~It wraps my perlin noise like this !(http://img854.imageshack.us/img854/3729/e0b71d0ea6fb49f9abf9622.png)~~
Edit: Actually I just made the bitmap wrong size. “This” is the result.
Edit 2: Changed the _mode_ of DisplacementMapFilter to `clamp` [http://www.fastswf.com/59T-8DE](http://www.fastswf.com/59T-8DE)
Still not 100% good though.
\*Edit 3: Solved." It was just that I had to make the bitmapdata and the displacementmapfilter bigger so that the displacementfilter had more texture to work with.