For those of you that haven’t been following along, I’ve been recreating the animations from the book Flash Math Creativity, using Silverlight. This is the final example from the first section of the book which is authored by Jamie MacDonald.
In this animation there is a grid of red balls. Each ball renders its color and scale based using Math.Sin, passing its current “degree” value to the function. This results in a number between –1 and 1. You use this value to calculate the current color and scale. By manipulating the balls’ initial degree value, you can change the direction that the wave of color moves.
View the animation here.
Download the source code here.
I learned a few things while creating this animation. First, if you ever need to keep an object (an ellipse in this case) centered when you apply a scale transform, you can set the RenderTransformOrigin property on the object to “0.5,0.5”. In previous animations I dealt with this problem by manually calculating and setting the centered position.
In this animation I was also able to tackle the manipulation of the color and opacity of the balls. In previous examples I wasn’t able to obtain the same color effects that MacDonald created using the ColorTransform class that ActionScript provides you.
Just for fun, I added a Slider to the top of the Silverlight movie that allows you to control the speed of the animation. This is nice because you can slow the animation down to get a better look at how the color and scale of the balls is changing.
In my next post I will begin recreating some really trippy spiral animations from the second part of the book. These animations are going to be wicked, so stick around!
Edit: View the next part of the Silverlight Math Creativity series here.