A

Anonymous

Question

advice needed for faking a curved image wall

Forum|Forum|17 years ago
July 14, 2008
9 replies
1244 views

Hi,

I need to build an image wall i.e. a grid of images, around 2-300 thumbnails. The problem is i need them to load into a grid that looks like it is curved (like inside a cylinder for example). I would assume that if it was a standard rectangular grid i would load them into a matrix?
I'm hoping to do this without the use of papervision as i dont know it yet and i have a deadline. Can anyone direct me to examples or classes i should be using. Having searched on google it only really shows up examples with papervision but no tutorials, maybe i'm looking for the wrong thing....i'm a bit confused wth this one, any ideas would be appreciated.

thanks in advance

Greg

p.s The wall doesn't need to move, just needs to populate which i will be doing from an xml file which is generated by a CMS.

ActionScript

This topic has been closed for replies.

kglad

Community Expert

start simple with something like a horizontal line segment and think about what kind of mapbitmap you would use to displace that to a parabola (or arc of any kind).

A

Anonymous

That sounds pretty advanced. I kinda dont know where to even start with that....Can you point me to an example so i can give it a go?

Thanks for you patience kglad!

Greg

kglad

Community Expert

possibly because of my math background, i prefer to construct a function that maps each point (x,y) in the source image to a point (x',y') in the result image. it's almost always to think of a sequence of functions: one for each vertical (or horizontal) line through the source image that maps to a curve in the result image.

i then convert those functions into a mapbitmap that will do the same mapping. all the other parameters are essentially normalizing parameters analogous to subtracting a mean value and dividing by a variance that allow shifting and scaling of the mapping.

kglad

Community Expert

your mapbitmap (which is the key part of the mapping function) is going to be whatever's on-stage and that looks like tyBmp.

so, if you don't like the mapping, change tyBmp.

A

Anonymous

I get that the mapbitmap is the key, this is what i have click here for map, it seems that the next key is the scaleY variable in the DisplacementMapFilter function, it will only allows the pixels to move in one direction as i only apply it once to the whole image. Is there a way to directly reference individual pixels and move them accordingly.

I've done a work around that kind of works, although it's a bit distorted in the centre which wasn't what i was going for, which uses two filters, i apply the first filter and set scaleY to -100 and then apply a second which sets scaleY to 225 to counter what it did the first time......it seems like a hack to me? there must be a better way.

here is my result click here for result

here is my code (please ignore the extra imported classes)

A

adobe_as3_pro

Participating Frequently

See this cool mp3 xml player with visualization, playlist and skins. Fully customisable. Vector. http://flashden.net/item/mp3-xml-strongplayerstrong-with-visualization-and-skins-vectorised/11851

A

Anonymous

it's the map2.png that's in the library, i'm using this graphic as the displacement map.

i suppose the draw function only actually needs this

var ty:map2 = new map2(size,size);
var tyBmp:Bitmap = new Bitmap(ty);
addChild(tyBmp);

thanks

Greg

kglad

Community Expert

what's map2?

A

Anonymous

I'm afraid there is no easy way to do short of using a video. Papervision is really the tool of choice, but yeah it's pretty lean on documentation. I would start with tutorials http://papervision2.com/tutorial-list/ which helps put its myriad of classes in perspective.

Kglad's suggestion is also a possibility, but few of us have his math credentials.

WL

A

Anonymous

Thanks for the response.

I'm trying kglad's way first and see how it goes.

kglad, i've got an image displacing however i can only get the bottom to displace, when i need the top and bottom to displace into a convex shape like this although ignore the fade in the centre.

I'm using an image like this as the displacement map....

here is my result so far, as you can see the bottom of the image has worked but the top hasn't.....any tips?

do i need to assign 2 diplacement maps to the one image is it possible? or is there some mathematical way around this?

Here is my code, so far i've just adapted the displacementMapFilterExample from livedocs

kglad

Community Expert

you can use the displacementmap filter, but most people have trouble understanding how to use it to get the effect they want.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded