Inspired By Flash Math Creativity #3: WPF Flag

karstenj — Fri, 09 Mar 2007 08:43:00 GMT

There is a clever sample up on Flash Math Creativity by Lifaros that fundamentally does 2D morph meshing by chopping up an image into sections and then animating the sections, resulting in the effect of a flag waving. I decided to implement something similar in WPF. When I started thinking about how to chop up something in WPF, I remembered the Slide Puzzle sample from the SDK and I used it the foundation for how to chop, well, anything up in WPF. (If you haven't checked out this sample, definitely do so!)

In my sample, I only chop up an image, but nothing is stopping you from using this same technique to chop up a video, a document or the UI itself. Once again, I used the custom animation classes to create the animation using Math.Sin. The slider allows you to modify the intensity of the wave. The result? The UN flag waving in the desert. I'm not sure why. Download source or run it.

Here's the crux of the code:

private void Chop()
{
    stackPanel.Children.Clear();
    Image image = (Image)this.Resources["image"];
    BitmapSource bitmap = (BitmapSource)image.Source;
    Size size = new Size(bitmap.PixelWidth / 5, bitmap.PixelHeight / 5);
    image.Width = size.Width;
    image.Height = size.Height;

float edgesize = 1.0f / numCols;

    // Set up viewbox appropriately for each tile.
    for (int i = 0; i < numCols; i++)
    {
        Rectangle r = new Rectangle();
        TranslateTransform t = new TranslateTransform();
        r.RenderTransform = t;
        //this confused me at first!
        r.SnapsToDevicePixels = true;
        VisualBrush vb = new VisualBrush(image);
        //viewboxes are all relative to 1
        vb.Viewbox = new Rect(edgesize * i, 0, edgesize, 1);
        vb.ViewboxUnits = BrushMappingMode.RelativeToBoundingBox;
        r.Fill = vb;
        r.Height = image.Height;
        r.Width = image.Width / numCols;

        CircleAnimation ca = new CircleAnimation();
        ca.Direction = CircleAnimation.DirectionEnum.YDirection;
        ca.Radius = slider.Value;
        ca.Duration = TimeSpan.FromSeconds(1);
        ca.BeginTime = TimeSpan.FromMilliseconds(i * 10);
        ca.RepeatBehavior = RepeatBehavior.Forever;
        t.BeginAnimation(TranslateTransform.YProperty, ca);
        stackPanel.Children.Add(r);

}

Inspired By Flash Math Creativity: WPF Flowers

karstenj — Fri, 16 Feb 2007 20:57:00 GMT

I've recently picked up a great book called Flash Math Creativity. I been inspired by some of the techniques it outlines and have played around with similar ideas in WPF. The exercise has been a fruitful one, in that I'm making some pleasing computer art while also learning about the differences between Action Script animation and WPF animation. The first one I played with is flowers, inspired by the work of Glen Rhodes, which is actually featured on the cover of the book. You can see the results here and download the code here.

The first flower, which has no animation, is pretty simple. I just create 125 rectangles with a fill using a DrawingBrush I created in Blend. I place each of the petals on the "stage", which in the case is a Grid. I use Grid instead of Canvas so that I get the goodness of the WPF layout engine for free without having to handle any positioning of the rectangles. I then tranform the rotation and scale of each one to create the flower effect. I also swap the ZIndex so that the large petals are in back and the smaller ones are in front.

void OnLoaded(object sender, EventArgs e)
{
    int r = 0;
    double s = 0;
    for (int i=0; i < 125; i++)
    {
        Rectangle rect = new Rectangle();
        rect.Width = 50;
        rect.Height = 50;
        rect.Fill = (DrawingBrush)this.FindResource("petal");
        TransformGroup tg = new TransformGroup();
        s += .01;
        ScaleTransform st = new ScaleTransform(s * s * s + .1, s * s * s + .1);
        r += 27;
        RotateTransform rt = new RotateTransform(r);
        tg.Children.Add(st);
        tg.Children.Add(rt);
        rect.RenderTransform = tg;
        Grid.SetZIndex(rect, -i);
        stage.Children.Add(rect);
    }
}

Where things get a little more interesting is when it comes to animating the flower. In Action Script, this kind of dynamic animation is handled through the very convenient onEnterFrame. This handler provides a per-frame callback for each individual movie clip, in which a function can be wired up. There is no equivalent in WPF such that you get a per-frame callback for each element. The closest thing to this concept is the CompositionTarget.Rendering handler, which gets called per-frame for the entire tree (or page or stage, if you will.)

It is possible to find each element you are looking for when this event gets fired and achieve a similar effect to onEnterFrame. I did just this in Page3.xaml, which ends up adding the following in addition to the loaded method:

void CompositionTarget_Rendering(object sender, EventArgs e)
{
    foreach (UIElement uie in stage.Children)
    {
        TransformGroup tg = uie.RenderTransform as TransformGroup;
        ScaleTransform st = tg.Children[0] as ScaleTransform;
        if (st.ScaleX > -3)
           st.ScaleX -= .1;
    }
}

You can see how I end up having to walk the tree, extracting the children and then acting on the children. While this works, there are several disadvantages to this methodology. First, having to figure out the animation for every UI element within a single callback has the potential to get quite unwieldy. Second, using this method means we don't get all of the goodness of the WPF animation system, things like frame rate indepence, timelines, storyboards, repeat behaviors, autoreverse, etc. So, let's see what this animation would look like using the WPF animation system:

void Page2_Loaded(object sender, RoutedEventArgs e)
{
    int r = 0;
    double s = 0;
    DoubleAnimation d = new DoubleAnimation(-3, new Duration(TimeSpan.FromSeconds(2)));
    d.AutoReverse = true;
    d.RepeatBehavior = RepeatBehavior.Forever;
    for (int i = 0; i < 125; i++)
    {
        Rectangle rect = new Rectangle();
        rect.Width = 50;
        rect.Height = 50;
        rect.Opacity = .5;
        rect.Fill = (DrawingBrush)this.FindResource("petal2");
        TransformGroup tg = new TransformGroup();
        s += .01;
        ScaleTransform st = new ScaleTransform(s * s * s + .1, s * s * s + .1);
        r += 27;
        RotateTransform rt = new RotateTransform(r);
        tg.Children.Add(st);
        tg.Children.Add(rt);
        rect.RenderTransform = tg;
        Grid.SetZIndex(rect, -i);
        st.BeginAnimation(ScaleTransform.ScaleXProperty, d);
        stage.Children.Add(rect);
    }
}

With this code, I get to wire up an animation to each element -- in fact I'm wiring up the same animation, which simply animates the scale. I get to use some of the features of the animation system, like AutoReverse and RepeatBehaviors. And, I'm letting WPF calculate the timing instead of me doing it per-frame. Much nicer, methinks.

Those seasoned with the WPF samples can probably deduce where I derived the harness you toggle between the different animations. I took the basic idea from Kevin Moore's Bag-o-Tricks and then added the fading between frames from the custom frame in the WPF Feature Fest sample.

I'm also now pointing all my WPF samples to an HTML page which checks to see if you have the framework installed and directs you to where you get it if you don't. I took this from the Windows SDK and modified to to auto-redirect if .NET 3.0 is installed. It is included in the source.

IRhetoric - Karsten Januszewski : Action Script

Inspired By Flash Math Creativity #3: WPF Flag

Inspired By Flash Math Creativity: WPF Flowers