Creating a Static Drawing Whose dimensions get changed based on the parameters supplied - asp.net

Question

I want to create an static drawing (say any animals like giraffe) using some points, lines, drawing etc. Now i want to update the drawing by passing the parameters say height of his legs, its width or its color.
The parameters are supplied from the web page. The image will be a 2D image
I am searching on which technology should i implement this for more than 10 hours but cannot find any perfect solution.
Right now i am thinking i can use Adobe flash in which i can do some programming to create an drawing and change the drawing by passing the parameters to a Flash file, i think we can pass it when we embed an flv.
Whether i am right? Or there is any other solution. I have no knowledge of any thing except asp.net
Please help.
Any help is appreciated

Answer 1

I'd like to build on the previous post - you could also incorporate svg graphics into the mix. This would allow you control over color, width, and height. You can manipulate SVG files with javascript (Dynamic SVG). You'll probably get that going faster than learning action script.

Answer 2

If you just want to be able to stretch or recolor parts of an image, you could do that using ordinary HTML parameters. Just create a giraffe image, break it into the chunks that you want to be able to resize independently, and use CSS layout or tables to assemble them. Here's an artistic rendering:
___________________________
|image 1 V__ <<|
|head |oo | <<| <--- delicious acacia leaves
| | < <<<|
---------------------------
|image 2 | | |
|neck |o| |
| | | |
---------------------------
|image 3 / | |
|body /------/ \ |
| | \ |
---------------------------
|image 4| | | | | | | | |
|legs | | | | | | | | |
| \_/ \_/ \_/ \_/ | <--- I do not know what giraffe feet look like
---------------------------
If you want to give your giraffe a short neck without changing anything else about it, you can just alter the height attribute of the second image, like so:
___________________________
|image 1 V__ <<|
|head |oo | <<|
| | < <<<|
---------------------------
|image 2 | | |
---------------------------
|image 3 / | |
|body /------/ \ |
| | \ |
---------------------------
|image 4| | | | | | | | |
|legs | | | | | | | | |
| \_/ \_/ \_/ \_/ |
---------------------------
Obviously, changing the width of just one image would cause the boundaries to no longer match up, so you'd need to change them all to the same value.
To handle color changes, you can make use of image transparency. Each image would be white, with a transparent region representing the giraffe. Then, you'd set the background color of the div or table cell to the color you want the giraffe to appear. Again, this is clunky, but it would let you do what you want without needing anything other than static GIF / PNG images and basic HTML.