Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

http://www.astorandblack.com/ab/bespokevisualizer/ (click on "continue as guest")

A client wants this "bespoke visualizer" on their site. Is there a third party plugin I can buy for this? It can be in Flash and/or JavaScript, it doesn't matter. Also, if there's no third-party plugin that's similar to this web app, then how could I code this from scratch?



share|improve this question

closed as off-topic by Stephen Ostermiller Jan 20 '15 at 18:10

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking for recommended external websites, tools, resources, and software are off-topic as they tend to attract opinionated answers and spam. Recommendations for software are permitted on Software Recommendations, but be sure to read their quality guidelines before posting there." – Stephen Ostermiller
If this question can be reworded to fit the rules in the help center, please edit the question.

Are you looking for a flash app that lets you design/customize clothing? That's a pretty narrow niche application. Your best bet would be to do as they did and hire a web developer to create one for you. – Lèse majesté Dec 7 '10 at 23:53
@Lèse - that's a good enough comment to be an answer – Mark Henderson Dec 8 '10 at 4:18

Are you looking for a flash app that lets you design/customize clothing? That's a pretty narrow niche application. Your best bet would be to do as they did and hire a web developer to create one for you.

share|improve this answer

If you explore the code from the page you post, you'll see that they use jquery with a jquery plugin on the left panel.

Reproduce the body part should be a matter of replacing images (my first option would be follow with Ajax to make the requests), and correct alignment with CSS (positions and z-indexes).

Despite I'm a HTML5 enthusiast, I think using canvas at this point is not the best options, as browser support is not wide enough, and development with that is kind overhelm yet. Go with simple, safe and straight-to-the-point solution.

share|improve this answer

I'm one of the developers responsible for building this Visualizer (it was actually me and one other fellow handling the backend stuff).

For anyone interested here are the techniques I had to use to make this project possible. There are no pre-rendered images in the entire visualizer, it actually used Flash to warp a tiled texture with a displacement map, it then applies a mask and specific shadows to create the final rendering. Each component of a suit has its own mask and a corresponding xml file to give it information such as the angle to place the texture. This was done to allow the lapels to go both directions (giving the visualizer a real nice look) to allow for the cuffs and coats to be created without needing to touch the Flash app once it was compiled out. jQuery is only used for the user interface otherwise its a completely custom Flash application. The UI interfaces with the Flash app through some flash vars. Thats it! Nothing too special just a lot of long hours and hard work making all the different combinations (over a million if you don't count thread colors) possible.

I know this is old, but thought I would at least share for the next poor fool that attempts something like this.

Oh and you can totally do something like this in Canvas (webGL would be even better if you can get all the models).

share|improve this answer

If I was going to tackle that I would use jQuery and the HTML5 canvas element. Using Canvas does limit the browsers you can use though.


Doubt there's any existing code for that as it's very bespoke but you might be able to find a Canvas-drawing jQuery plugin that could be modified.

To be honest, I don't think it'd be that hard, it'd just be drawing pre-defined clothes on top of each other.

share|improve this answer