Gradient Spiral Generator in Adobe Edge

Gradient Spiral Generator in Adobe Edge Animate and GreensockI 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.

What next?

Click here to launch the Gradient Spiral Generator

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.

2 thoughts on “Gradient Spiral Generator in Adobe Edge

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s