This begins part two of my Silverlight animation series where I am recreating the animations that are described in the book Flash Math Creativity. Everything in part two of my series is from the second section of the book, which is authored by Glen Rhodes.
If you want to go back and view posts from part I of the series you can find a listing of all the posts in the Table of Contents.
Flowers Version 1
This first example demonstrates how you can layout instances of the flower petal at random scales and random angles of rotation. There really isn’t any animation yet, but at this point you’re only concerned with creating some sort of petal looking Path using Blend, and then getting them placed initially within the LayoutRoot.
I made the animation redraw the flower every 2 seconds so you can see that the petals are actually scaled and rotated randomly.
View version 1 here.
Download the source code here.
Flowers Version 2
In this second version of the flower I again randomly scale and rotate the petals. However, I don’t add them to the LayoutRoot in the order I create them. I first sorted the petals from largest scale to smallest scale, and then added them to LayoutRoot in that order. This caused the smallest petals to be in front of of the larger ones. Again, no real animation is happening yet.
View version 2 here.
Download the source code here.
Flowers Version 3
In version 3 I set the rotation and scale incrementally so that everything is spaced nicely. I also added the petals to the stage in order from largest scale to smallest so that the smaller petals were in front.
View version 3 here.
Download the source code here.
Flowers Version 4
In version 4 I tweaked the fill and stroke of the petal Path. I also changed the RenderTransformOrigin to be "0.65,-0.5" so that it would cause the petal to rotate farter out from where the origin of rotation is.
View version 4 here.
Download the source code here.
Flower Version 5
In version 5 I changed the way I initialized the scale and rotation of the pedals. The scale and rotation in this example were calculated using the loop-control-variable (i) so that each has its own unique scale and rotation, but the values are not random.
View version 5 here.
Download the source code here.
Flowers Version 6
Finally some animation! In this animation each petal increments its rotation every frame. The smaller the petal is, the faster it rotates.
View version 6 here.
Download the source code here.
Flowers Version 7
The final animation for today is the same as version 6, but there is an additional scaling of the petals every frame. Once the petals reach a certain size, I have them return to a scale of 0, and I move them to the front using Canvas.SetZIndex.
View version 7 here.
Download the source code here.
More Flowers Coming Soon!
The next post will have the second half of Glen Rhodes’ flower animations. Some of them are pretty trippy, so keep an eye out!
Thanks for reading!
Edit: You can read the next post in the animation series here.