Join 3,503 readers in helping fund MetaFilter (Hide)


Making artwork "pop" on the web
October 13, 2011 3:40 PM   Subscribe

Question for a web app I'm building... How can I distort a flat image as though it were projected onto a contour, using JS/jQuery and HTML5 or ColdFusion's server-side image processing?

What I'm imagining is some sort of drawing tool that lets users design their own clothing patterns. They do this on a flat canvas. But I want to provide a way to "see what it looks like" on a virtual mannequin. This requires warping the image along the torso edges and bust, for example, to simulate depth in a natural way. I don't need to animate it or show multiple angles, though I'd like to offer a variety of body types, both male and female. Ideally I could provide a customizable (for me, not the users) depth map for each body type, and let the software do the rest. Especially if the alternative is figuring out a complicated chain of mathematical functions, and trying to tweak them manually in code!

I'm still in the brainstorming phase so go ahead and re-interpret my methodology or think way outside the box. I do have to use ColdFusion. Flash isn't an option for this project, and neither is WebGL. I'm trying to avoid browser-specific hacks too, though I've already decided to go full HTML5; IE is not supported. I'd prefer if this thing works in Firefox, Chrome, and Safari though.

I've never done any kind of 3D programming, so if this question crosses into that territory, please speak to me as if I were a very small child. Links to tutorials would be nice too! If what I'm asking for isn't possible, what are my next best options?
posted by The Winsome Parker Lewis to Computers & Internet (8 answers total) 1 user marked this as a favorite
 
You might be able to do this server side with ImageMagick
posted by wongcorgi at 3:55 PM on October 13, 2011


I second the ImageMagick recommendation...

http://www.imagemagick.org/Usage/warping/
http://www.imagemagick.org/Usage/distorts/affine/
posted by anthroprose at 4:09 PM on October 13, 2011


I've seen some impressive work with three.js, but using Canvas or SVG without WebGL I'm not sure how good performance is going to be.
posted by lantius at 4:12 PM on October 13, 2011


Google CSS3 and 3D. Some browser makers are bundling new bits that allow you to do very similar to what you mention. Bleeding edge though. I suspect Flash may be the best solution if you are launching soon.
posted by bprater at 4:31 PM on October 13, 2011


This will probably hurt you to hear, but the current best way to do this on the client is probably with Flash. Its 3D rendering capabilities have improved radically in recent times. I have not studied them, but you can probably get away without too much math.
posted by klanawa at 10:22 PM on October 13, 2011


processing.js might be another solution.
posted by gregglind at 6:55 AM on October 14, 2011


Thanks for the suggestions. I think the ImageMagick tips put me on the right track towards discovering displacement maps. The topic of this thread I found is very similar to what I'm trying to do. I have a lot more self-educating to do before I can even try to get this running on my server, but thanks again for pointing me in the general direction.
posted by The Winsome Parker Lewis at 12:43 PM on October 14, 2011


On further research (I'm posting this for future people who stumble onto this thread), I don't think I'm going to need ImageMagick at all. Turns out you can do displacement purely in a <canvas> element with JS. This demo I found shows the technique. I can pre-render displacement maps and apply them to the users' custom designs. I think this will do what I need without the overhead of installing more stuff on my server.
posted by The Winsome Parker Lewis at 1:59 PM on October 16, 2011


« Older Bring me up to date on modern ...   |  awesome custom jewelry designe... Newer »
This thread is closed to new comments.