The Infinite Foray

Silverlight Math Creativity Part II.II

Rafe Kemmis — Fri, 12 Jun 2009 16:12:10 GMT

This is the second part of the Glen Rhodes animation section in my Silverlight Math Creativity blog series. In today’s post I recreated several more of Rhodes’ flower animations. To view the first half of the flower animations, go read my previous post from the series. If you want to start at the beginning of the series, you can check out the first post here.

Flower Version 8

In this version of the flower animation I elongated the petal and changed the fill and stroke colors using Blend. The animation code changed slight as well. The rotation speed of the petal is now set to a random value between –2 and 2, so petals are rotating clockwise and anti-clockwise.

Click here to view the animation.

Click here to download the source code.

Flower Version 9

In this flower animation the petals do not rotate. This causes the petals to shoot straight out from the center. The opacity and scale get animated though, so ever frame each petal gets larger and more transparent.

Click here to view the animation.

Click here to download the source code.

Flower Version 10

In this animation the starting scale of each petal varies randomly between 0 and 1. I also set the max scale to be 2, which allows the petals to take up the entire screen.

Click here to view the animation.

Click here to download the source code.

Flower Version 11

I wasn’t quite able to replicate what Rhodes describes for version 11. In his example he manages to keep the petals very small while they rush past you. Since the scale of the petal has to increase in order for the petal to be farther from the center, I don’t see how you can keep the petal small w/o changing the logic of the animation entirely.

Click here to view the animation.

Click here to download the source code.

FIN

I will be wrapping up the Rhodes flower section of the book in my next blog post. Stay tuned!

Technorati Tags: Silverlight,Flash,Animation

Animating A Silverlight BezierSegment

Rafe Kemmis — Sat, 16 May 2009 23:21:37 GMT

This afternoon I was impressed by an element on the Ceranco website that behaved like a wave of water. I started to wonder how I would be able to recreate the look of the wave animation in code. So I just dove in and started to play in Silverlight.

After about an hour I had this nice wave animation in Silverlight that I think would make a pretty sweet pre-loader:

Click here to view the animation.

Click here to download the source code.

So how does it work?

The key to this animation is the use of a custom path that I made, it is the element that is filled with the blue gradient. No, I didn’t create this Path in Blend. I created it with code. The curved line across the top is a BezierSegment which has three points that get animated up and down throughout the animation using Math.Sin and Math.Cos.

Just like all the other animations I have done, I subscribe to the CompositionTarget.Rendering event. Inside this event is where all the heavy-lifting is done. A variable name degree is incremented every time the event fires, and degree is passed to the math functions to calculate the new positions of the animated elements.

If you want to know more, take a look at the code.

Thanks for reading!

Technorati Tags: Silverlight,Animation,BezierSegment

Silverlight Math Creativity Part II

Rafe Kemmis — Fri, 15 May 2009 01:43:04 GMT

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.

Technorati Tags: Silverlight,Animation,Flash

Silverlight Math Creativity Part I.V

Rafe Kemmis — Thu, 14 May 2009 01:48:13 GMT

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.

Technorati Tags: Silverlight,Animation,Flash

Silverlight Math Creativity Part I.IV

Rafe Kemmis — Wed, 13 May 2009 15:28:56 GMT

Today I bring you another Silverlight implementation of a Jamie MacDonald animation from the book Flash Math Creativity. This is the “Right To Left” animation which uses sine and cosine in order to oscillate the ball scale and horizontal-position. The combination of the horizontal and scale animation gives the illusion that the balls are moving toward you and away from you, or orbiting around a point in a 3d space.

View the animation here: Right To Left Animation

Download the source code here: Right To Left Animation Source Code

In my next post I will bring you the final MacDonald animation implemented in Silverlight. Check back soon!

Edit: View Part I.V of the Silverlight Math Creativity series here.

Technorati Tags: Silverlight,Animation