I don’t know about you but I love the new Apache Flex logo. And when I saw it I couldn’t help but see that the shape was similar to a mathematical Rose. So of course I spent way, WAY, too much time futzing around with values until I could create a rough representation using Away3D 4.0.
If your curious the Apache Flex logo = 2.0 + 1.6 * Math.cos( i * 4 );
Creating the shape of the logo was pretty easy. But getting the colors to change the way they do took a chunk of work. I went through a handful of different approaches until I finally settled on what you see. It isn’t exact but you get the idea, right?
This was also my first expedition into the land of Away3D 4.0 beta. Quite a bit different than 3.6. I’m looking forward to spending some good quality time with 4.0 and redoing a lot of my previous work done in 3.6 including my entire Away3D 101 series. Converting everything over will be a good exercise in understanding the changes between the two versions of Away3D.
|[kml_flashembed movie=”http://polygeek.com/flex/5028_Flex-rose/FlexRose.swf” width=”550″ height=”700″ wmode=”direct” allowfullscreen=”true”/]|
Here’s the official Apache Flex logo so you can compare and see how close I got.
I’m continually amazed that such beautiful objects can be created through such simple code. The shape is created with one very simple line of code:
_r = 2.0 + 1.6 * Math.cos( i * 4 );
While that creates the shape it takes another line of code to create the spiral effect is the line wraps around and around:
_r += _r + 0.6 * Math.cos( _r ) + ( i / twoPi ) / 20;
That one took a bit of futzing with to get the spiral to be the way you see.
By turning the constants into variables that can be changed via a slider you can play around and get lots of variations on the shape of the rose. Have fun.
FYI, when you’re playing around with Away3D and you can’t get it to work in your browser then remember to set wmode=direct. That’s probably the thing you forgot. I know I did. :-)