I want to be able to take an image and stretch/contract each pixel row (or 5 rows for performance) to fit within a curved shape. I've been searching for this for the last few days and have turned up nothing. My current solution is to use my image as a sprite, divide it into rows of a few pixels in height and stretch that to the calculated width of my shape at each height.

If anybody has a simpler solution that would be much appreciated.
Preferably I'd like to do this with javascript but php would also suit.

  • If WebGL is allowable on the client side, this sounds like something you could use UV mapping for. If you're not familiar with UV mapping, it allows you to remap how pixels are placed in textures (that's the really high-level view). So I think a possible path would be to use your curve to generate a shader that remaps the input image onto the curved shape. I doubt this would be simpler. Unfortunately, I do not have enough shader expertise to get you much further here. – J Trana Sep 16 '14 at 0:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.