I was looking for a way to generate colours between two colours and I came across this site which gave me a great starting point for this demo. It’s a PHP script that accepts a start colour, an end colour and the number of interpolation steps. As you can see this particular script prints out a table of interpolated colours with the percentage, RGB and HEX values of the steps. For my purposes I simply wanted a comma delimited string passed back to Adobe Edge so that I could convert it to an array to be used in a loop when creating my spiral.
What this demo does.
It allows you to define a start and end colour and also the number of interpolation steps you want between them. It sends these values to the PHP script (using AJAX) which returns the comma delimited values (e.g. #000000,#0F0F0F,#1F1F1F). These values are then converted to an array and stored in Adobe Edge.
Next it creates a holder DIV and into that it adds the number of rectangles (defined by the interpolation step variable) to form a ladder. It then colours them to the appropriate array colour and sets them on a staggered rotation and X scaling loop which creates the spiral. The holder also rotates slowly, mainly to make it look more interesting.
I’m also using this as a means of testing mobile device performance and I’m pleased to say it works well on iPhone 4 and iPad 2.
What this demo doesn’t do.
Your washing or any other household chores.
Download the source files. (Note: Because the colour values rely on a PHP script this will only work on an PHP-enabled HTTP server).
If you’re in a rush you can just hit ‘Generate’ and it’ll use default values.