Coder to draw animated flower vase and add flowers

Avg Bid (USD)
Project Budget (USD)
$250 - $750

Project Description:
View a virtual bouquet of flowers in a vase on screen. Insert a new flower into the vase. See links for examples.

We assume you are a coder so the web site design will be under a separate quote. v0.9 bidders might want to bid v1.2 (flying butterflies) as well. We want to get to v1.2 ASAP!

• v0.9 – Basic flower draw and add routines (this quotation)
• v1.0 – Basic web site design with a pop-up invitation and FAQ.
• v1.1 – Share with Friends – social media pop-up with Facebook widget
• v1.2 – Animated butterflies and add butterfly – fly over the flowers
• v2.0 – Enhanced animation – v2.0 graphics, flowers move like in in wind, clicking a flower displays donor name and message

v0.9 Starter site – the heavy lifting!
Code Requirements
• “Work for hire”. At the end of development and completion of payment code shall be property of MLD Foundation. Contract shall be signed before coding starts, developer agrees not to remarket/reuse the code for the purpose of a implementing a fund raising platform. All source code and reasonable documentation will be provided.
• Code must run on standard web browsers – IE, Safari, Chrome
o HTML v5, CSS v3, No FLASH, MySQL database that we will supply
o Must display on mobile devices (iPhone, Android, Blackberry)
• JavaScript is OK
• PHP … controlling software and MySQL access to be written in PHP.

MySQL Database
There will be much more data in this database – these are the key fields
• Event Details: Number of flowers, Number of butterflies, Flower set code

DRAW FLOWERS - Given a number from 1-50 and a code for the flower type, draw a vase with that number of flowers in it.
o Vase is opaque with a MLD foundation butterfly logo on it
o Several flower type sets … semi-realistic virtual art
• Starter flower choices are
o S - spring flower mix (10 graphics) with corresponding greenery
o D – daffodils (5 graphics) with corresponding greenery
• The vase starts with one flower in the center, each additional flower is added slightly to the side of and randomly in front of the prior flowers
• Each additional flower added varies slightly from the flower before it
• Slightly rotated and to the side of the prior flower
• On semi-random basis add to left or right side – need to keep some sense of overall balance but a full alternating pattern is not desired
• Flowers randomly chosen from the bouquet set for that particular flower code
o Each flower code will have up to 10 different flower graphics to randomly choose from (should code for a variable number of graphics)
• Sample result might be somewhat like this:
• Logo for vase is
o As flowers are added they start to spread out … at 50 flowers the vase is visually full and the bouquet is very broad
o The vase draw should take no more than 3 seconds with flowers being initially drawn every 0.25 second. When the flower count is over 12, the delay between redraws should be calculated to complete in 3 seconds.
o Periodically, every 10 flowers, we will add greenery
• For mobile devices, if draw performance suffers then drawing 10 flowers at a time or a static display of the vase is acceptable.

ADD – add a flower to the vase
o Instantly display the current vase
o Add another flower
• either flying it in and inserting it into the vase … should take 2-3 seconds
• or by “growing” it … the background dims slightly while the flower stem reveals from bottom (in the vase) to top so the viewer is focused on, and can see the flower grow. After a small delay, the vase & existing flowers brighten and the new flower blends in.
o On mobile devices the ADD animation still needs to run even if the existing vase draw is expedited.

Skills required:
Graphic Design, HTML, MySQL, PHP, Website Design
About the employer:
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.