At Your Majesty, we worked on a site where some images appear on different products. I had my hands full with the image generation backend and the hosting issues to work too much on the Flash, but I was able to contribute one effect. I wrote a cylindrical mapping class which let us put any image on a mug as it rotated in three-space.
The process for building this was actually kind of interesting. I ended up actually using that graphing calculator that comes with OS X to preview different equations. I figured, if I could visualize the cross-section of the cylinder across the axis of distortion, then I would have an appropriate function to generate the distortion for each pixel, so I plotted a bunch of different equations interactively without coding them up. For the vertical displacement, the curve of the top lip (and the entire front) of a mug looks like a semicircle, perhaps squashed, so I quickly ended up the equation for a circle, y² + x² = r or y = ±√(r – x²). However, the sides are a bit more exaggerated.
Word to first-time displacement map users like myself, using the drawing API’s gradient tool as a source for displacement map data is not going to yield very good effects, since it seems that it only interpolates between colors linearly, which won’t do much more than shear your image.
So here’s the effect applied to my banner. Scrub the mouse left to right below to “rotate” the “cylinder.” You can see that while the speed of the effect of course scales with the size of the distortion map, it is very fast.
The code isn’t all cleaned up but at least the interface is clean. We simply create a new distortion map with a size and a display object to attach, set some parameters, and attach its ‘wet’ output to our display list.
map = new CylinderMap(200, 200, new IMAGE()); map.sideCompression = 100; map.arc = -0.3; map.rotation = 100; addChild(map.wet);
And here’s the code for the displacement map class.
com.yourmajesty.effects.distortion.CylinderMap View Source | Download (.as, 5k)
com.yourmajesty.effects.distortion.IDistortionMap View Source | Download (.as, 1k)
You didn’t include com.yourmajesty.types.IDestroyable in the source.
Oh yeah, oops, it defines function destroy():void. That’s all.
Could you provide the source for the com.yourmajesty.types.IDestroyable or let me know what I’m missing?
It appears that IDestroyable needs to extend or implement something but what?
package com.yourmajesty.types
{
public interface IDestroyable
{
function destroy():void;
}
}
Hey, this is nice. Do you have any advice on getting a concave effect as though the bitmap is on the inside surface of the cylinder? Or at least where in your class to focus?