<strong>THIS PHASE OF THE PROJECT IS TO CREATE THE GRAPHIC ONLY - AS DESCRIBED BELOW. Once I have the graphic, and I like the way it fills and overflows, I will then turn this over to a programmer to program the code to control it. THIS IS NOT THE PROGRAMMING of the bucket, only the graphic for it - but it must be able to be used on the iPhone and be able to be adapted to programming. A Demonstration of something similar is required for consideration.</strong>
I need an animation that will be able to be deployed in the iPhone / iPad (therefore, NO FLASH) that will show a bucket empty, and shaded by a color (parameter controlled) which should be similar but not exactly like the image attached. I am open to all visual representations that work on the devices specified below. I then need this bucket to slowly fill up by the image becoming a darker shade of the original color - in a way that easily can be seen as the bucket being filled with a liquid of the same color (only darker). The speed of it filling up will be dictated by a single numeric parameter increasing.
At the beginning of the animation, the user would set the COLOR parameter by hexidecimal or HTML color code. The user would set the FILL parameter with a single number to represent the "FULL" state (100%) of the bucket. The animation program would begin with the bucket at 0% full, and then it would fill the animated bucket with the color change as the FILL parameter changes or increases value.
If the FILL Parameter gets OVER the FULL state (more than 100%), then the animation should slowly and proportionally show the color liquid overflowing - first down the side of the bucket, and then filling an area around the bottom of the bucket.
This must work on a web page, and on an iPhone / iPad - even if we need separate code to do so.