IRhetoric - Karsten Januszewski : Avalon

Inspired By Flash Math Creativity #2: WPF Planets

karstenj — Sat, 24 Feb 2007 00:45:00 GMT

My next inspiration from the algorithms introduced in Flash Math Creativity was based on the work of Jamie MacDonald. In looking at his work, I quickly realized that I was going to need to brush up on my trigonometry skills. This led me to another great Friend of Ed book, Foundation ActionScript Animation: Making Things Move, which has some great trigonometry for animation explanations.

You can see the results of my latest experiment here and the code is here. Just to make sure I was up an running with basic trig, I created a sine wave in 01 as follows:

double x = 0;
double y = 0;
double angle = 0;
for (int i = 0; i < 500; i++)
{
    x += 1;
    y = 200 + Math.Sin(angle) * 50;
    Ellipse el = new Ellipse();
    el.Width = 2;
    el.Height = 2;
    el.Fill = Brushes.Red;
    Canvas.SetLeft(el, x);
    Canvas.SetTop(el, y);
    stage.Children.Add(el);
    angle += .05; }

Nothing fancy here. To make a circle, I changed the x to be x = Math.Cos(angle) * 50. This is the basis for doing circle and ellipse animations. Now, instead of trying to do animations using CompositionTarget.Rendering, I remembered that the SDK has a great sample called CustomAnimations, in which a CircleAnimation exists already using this formula. Here's the key code where it overrides the GetCurrentValueCore method to create the circle effect using basic trig:

protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock clock)
{
double returnValue;
double time = clock.CurrentProgress.Value;

    // math magic: calculate new coordinates using polar coordinate equations. This requires two
    // animations to be wired up in order to move in a circle, since we don't make any assumptions
    // about what we're animating (e.g. a TranslateTransform).
    if (Direction == DirectionEnum.XDirection)
    {
        returnValue = Math.Cos(2 * Math.PI * time);
    }
    else
    {
        returnValue = Math.Sin(2 * Math.PI * time);
    }

// Need to add the defaultOriginValue so that composition works.
return returnValue * Radius + defaultOriginValue;
}

At first, I used this in code to create the effect of these circles circling toward you using BeginAnimation, based on the TowardUs sample in the Flash Math Creativity book (the very first sample):

CircleAnimation cx = new CircleAnimation();
cx.Duration = new Duration(TimeSpan.FromSeconds(1.5));
cx.Direction = CircleAnimation.DirectionEnum.XDirection;
cx.Radius = 150;
cx.RepeatBehavior = RepeatBehavior.Forever;

CircleAnimation cy = new CircleAnimation();
cy.Duration = new Duration(TimeSpan.FromSeconds(1.5));
cy.Direction = CircleAnimation.DirectionEnum.YDirection;
cy.Radius = 150;
cy.RepeatBehavior = RepeatBehavior.Forever;

stage.Children.Add(el);
el.BeginAnimation(Ellipse.OpacityProperty, opacityAnimation);
st.BeginAnimation(ScaleTransform.ScaleXProperty, d);
st.BeginAnimation(ScaleTransform.ScaleYProperty, d);
tt.BeginAnimation(TranslateTransform.XProperty, cx);
tt.BeginAnimation(TranslateTransform.YProperty, cy);

This resulted in 03. It worked, but the code started getting ugly as far as getting each circle to fire when I wanted it to. I found myself using a timer and wiring up an anonymous delegate. I realized Storyboards and ParallelTimelines would serve me much better, which are much easier to wire up in XAML than in code. So, 04 is the same thing, but a XAML solution instead:

By using parallel timelines I could structure my animations and when they fired.

A nice thing about this CustomAnimation is that it can be applied to 3D animations as well, applied to the TranslateTransform3D which I did 05, changing the Radius property to be much smaller to fit the coordinates I was using for my ViewPort.

void towardus3d_Loaded(object sender, RoutedEventArgs e)
{
    sphere = new GeometryModel3D(sphereFactory.Mesh, materialGreen);
    ModelVisual3D mv3d = myViewPort3D.Children[1] as ModelVisual3D;
    mv3d.Content = sphere;

    CircleAnimation ca3d_y = new CircleAnimation();
    ca3d_y.Duration = TimeSpan.FromSeconds(5);
    ca3d_y.RepeatBehavior = RepeatBehavior.Forever;
    ca3d_y.Radius = .5;
    ca3d_y.Direction = CircleAnimation.DirectionEnum.YDirection;

    CircleAnimation ca3d_x = new CircleAnimation();
    ca3d_x.Duration = TimeSpan.FromSeconds(5);
    ca3d_x.RepeatBehavior = RepeatBehavior.Forever;
    ca3d_x.Radius = .5;
    ca3d_x.Direction = CircleAnimation.DirectionEnum.XDirection;

ModelTranslate.BeginAnimation(TranslateTransform3D.OffsetYProperty, ca3d_y);
ModelTranslate.BeginAnimation(TranslateTransform3D.OffsetXProperty, ca3d_x);
}

It then dawned on me, as I looked at 05, an orbiting sphere, that it would make for great planets. I went out to NASA and found the texture maps for Jupiter and its moons. I also wanted to do all of this 3D work in XAML, so I made a class called SphereModelVisual3D that I could instantiate Jupiter, for example, like this:

<mv3d:SphereModelVisual3D x:Name="Jupiter" >
<mv3d:SphereModelVisual3D.Material>
    <DiffuseMaterial>
      <DiffuseMaterial.Brush >
        <ImageBrush ImageSource="http://maps.jpl.nasa.gov/pix/jup0vss1.jpg%22/>
      </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</mv3d:SphereModelVisual3D.Material>

      <mv3d:SphereModelVisual3D.Transform>
    <Transform3DGroup >
      <ScaleTransform3D ScaleX="2" ScaleY="2" ScaleZ="2" />
      <RotateTransform3D>
        <RotateTransform3D.Rotation>
          <AxisAngleRotation3D Angle="0" Axis="0 1 0" x:Name="Jupiter_rotation">
          </AxisAngleRotation3D>
        </RotateTransform3D.Rotation>
      </RotateTransform3D>
      <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0" />
    </Transform3DGroup>
</mv3d:SphereModelVisual3D.Transform>
</mv3d:SphereModelVisual3D>

The animation that handles the elliptical orbits needs to transform the Z property the TranslateTransform3D. It then looks like this:

The result is in 06. It is not astronomically correct as far as scale -- I'll leave that for someone with some more time on their hands, but I liked the end result. I also threw in the TrackBall control from the 3d tools project so you can trackball the whole model.

The code is here.

WPF Application Portfolio Wiki Updated -- More WPF Apps!

karstenj — Sat, 10 Feb 2007 01:59:00 GMT

Tim Sneath has been doing a great job of blogging the many Vista/WPF showcase applications that are being deployed right now. If you are looking for a quick list of URLs that you can hit for the .XBAP or .APPLICATION files, please go to the WPF Application Portfolio wiki, which I've updated with all the links, tagging them with the kind of deployment used -- very cool to see the number of .application and .xbap applications out there! If you are doing a demo and trying to show someone the WPF portfolio, hopefully this wiki page will be useful -- and watch for more coming...

I've also added some that Tim hasn't documented yet, in particular a whole bunch from Japan, as well as one from Metaliq on snowboarding visualization. Some screenshots below.

http://www.metaliq.com/wpf/
http://weathernews.com/wpfglobal.xbap
http://sp.warnermycal.com/vista/contents/preview.xbap
http://www.shiseido.co.jp/biyou_dic_vista/shiseido.xbap
http://www.dosv.jp/parts_assembler/PartsAssembler.xbap
http://japan.cnet.com/wpf/photo/

Announcing Expression Blend Beta 2 and Expression Design Beta 1

karstenj — Wed, 31 Jan 2007 08:32:00 GMT

You can now go download Expression Blend Beta 2 as well as Expression Design Beta 1. Both applications have received significant work since their last incarnation with tons of bugs fixed. Go give 'em a whirl.

Databinding In Expression Blend: Forget the Data and Do the Bind

karstenj — Fri, 26 Jan 2007 23:47:00 GMT

I just posted a screencast showing how to wire up UI elements using Blend. The general premise is that databinding in WPF is about more than just data; it also allows you to connect UI properties, like wiring a slider up to a progress bar. Blend exposes this is a very useable way, once you know your way around. I also use some cool styles from this Charles Petzold article and show how, in Blend, you can extract a style and template from a piece of XAML to be reused in other parts of your application.

The Definitive Post on XBAP Trust Levels

karstenj — Fri, 12 Jan 2007 00:53:00 GMT

I've written about XBAPs and full trust in the past, but never as thoroughly as Karen Corby just did in her post on XBAP trust levels. She spent a lot of time getting this post correct, reviewing with various folks within Microsoft and providing very solid guidance. It is the kind of post that should be in the SDK and official docs, but didn't make it due to time constraints. If you have questions about XBAPs and full trust, this is a must read. Her deployment recommendations in particular are essential if you are thinking about going down the full trust XBAP road. But keep her guidance in mind: only do this if you must. ClickOnce .exe's are pretty slick and don't have nearly the issues associated with them as full trust .xbaps.

Yahoo Messenger for Vista Debuts at CES

karstenj — Tue, 09 Jan 2007 20:32:00 GMT

I'm here at CES, where Yahoo and Microsoft showed off a preview of the new Yahoo Messenger for Vista, built entirely on WPF. Yahoo has a great landing page with screenshots, a screencast of the app and a sign up sheet for when they release a beta. I held off on blogging this until we got the Channel 10 interview posted, where I hooked up with Jeff Sandquist and the crew to do an interview with the Yahoo folks, Joshua Jacobson and Matthew Skyrm, about the application. (If you haven't seen Channel 10, it is the sister to Channel 9, targeted to enthusiasts and power users.) They talk about their motivations for building this new messenger, their experience with WPF and Expression and more. They've got a blog up as well! I've been working with the lead developer, Eric Burke, along with Frog Design, including Lee Brimelow, on this application and the alpha is looking great. This application is a shining example of the opportunities and possibilities of the Vista and .NET 3.0 platform. Expect to hear more about this, for sure...

Gradient Animation Obsession Redux

karstenj — Fri, 05 Jan 2007 01:02:00 GMT

I guess I didn't call it an obsession without reason, as I can't seem to keep away from those hyponotizing gradient animations. I modified the tool I posted last month so that it would output the XAML, such that a designer could actually use the tool and never touch a line of XAML. I set up the tool to output either WPF or WPF/E XAML, as WPF/E doesn't support everything (yet) that the tool uses, such as AccelerationRatio, as well as having a different namespace.

I ran into some problems with XAMLWriter and the way it strips x:Name from the XAML it produces, so there is some hacky string replace code in there that I'm not proud of. I could have used property paths as an alternative.

Because you can't use XAMLWriter in an XBAP, I made the tool a ClickOnce .application that doesn't get installed on your machine but just runs in the ClickOnce cache. Hopefully, we'll see more and more of these types of apps -- mini applications that never get installed but can do more than in-browser applications.

Download the source or run the tool. Also, check out some of the gradient animations I made with the tool and put into a WPF/E page here (screenshot below, although it doesn't do justice to the hypnotizing effect...)

The North Face In-Store Explorer

karstenj — Tue, 02 Jan 2007 21:27:00 GMT

It was at PDC 2005 when The North Face showed a prototype of a WPF kiosk they were building. Well, with Vista and WPF having RTM'd, the real kiosk has been deployed, which you can read about from lead engineer Darren David at Fluid's blog. (Fluid is the agency that did the work for The North Face.) If you live near a North Face retail store, go check it out! This is an exciting milestone for WPF and Vista, as it is one of the most ambitious .NET 3.0/Vista applications deployed to date. Note that the white paper written about this application is still relevant and worth reading. The code samples all work just fine on the final bits and have some useful code as far as state management, image montages and a 3D carousel.

Gradient Obsession: A Tool For Tweaking Gradient Animations

karstenj — Wed, 13 Dec 2006 01:11:00 GMT

I started getting slightly obsessed/hypnotized with gradient animations and wanted a tool to see what I could do, so I built one. Basically, I just bound a bunch of sliders to the various transforms on the brush transform. I reused the infrastructure from an earlier post.

As you watch the animation and see something you like, you can pause it and note the values for your own purpose. I didn't actually create an exporter for the xaml, but that wouldn't be hard. Download the source or run the XBAP.

Woodgrove Finance Application Source Code Posted

karstenj — Wed, 06 Dec 2006 04:07:00 GMT

The Woodgrove Finance Application is a great demo of how WPF can be used to create better data visualization, in this case for financial data. I've posted the source code -- there are some good nuggets in here worth exploring.

Click Here To Run It

Using The Finance Application

The application provides a 3D visualization into a hypothetical, static porfolio. It is important to note that this application is not bound to live data. To the left is a 2D list of stocks, grouped by Small Cap, Mid Cap and Large Cap stocks. By clicking on a stock in this list, detailed information about the stock can be seen in the far right column. If you hover over the 2D stock chart, it will expand for an easier reading experience.

Hovering over a stock will group it with other stocks of the same sector within that market size. For example, hovering over ArvinMeritor will also highlight Men's Wearhouse, both part of the consumer segment. This becomes interesting in terms of the 3D chart, in the center of the application. You can see how the labels for the X and Y axis update when different stocks are hovered over. The hover action pinpoints that particular grouping of sector and market cap, aggregating the results. So, one can immediately get a sense of how Mid Cap stocks in the consumer sector are doing -- in this case, not well, as can seen from the long red bar.

The application is two way, in that you can also interact with the 3D bar chart and see the corresponding 2D areas become highlighted. If you leave the mouse over a given bar for 1 second, you will get information about that bar as well, letting you know what aggregate of stocks that bar represents as well as the market cap and sector.

If you click on the the Woodgrove logo, the 2D section will animate away, allowing you to focus on the 3D. Holding the right click button down of the mouse will allow you to trackball the graph. In addition, you can compare stocks against the DJIA if you click that button. (The other comparison buttons aren't wired up.) If you then move the slider, you will see an animation between the current data and a date in the past.

Lastly, by switching in the drop down from Day % Change to Dollar change, the bars turn to columns.

Decomposing The Finance Application

While all of the data is static, the application is designed to support databinding to live data and could be done with a nominal amount of effort. Right now, everything is databound to the static equity.xml file. However, changing the databinding to a webservice would allow for this application to show real data.

You'll notice that the project is factored into multiple components. The WoodgroveFinanceApplication doesn't really do anything but hold the WoodgroveFinanceHost, which sets up the layout and handles the interaction between the 2D and the 3D. The WoodgroveFinanceStockChartFrame then holds the 2D pieces and the WoodgroveFinanceStockChart3D holds the 3D pieces. By doing this componentization, all of the functionality is really contained in controls, such that they can be added to a different project quite easily. If just the 3D section were desired, it is already isolated from the rest of the application.

You can open the project in Expression Blend, which is very cool. One could customize the look and feel from within Blend. It also demonstrates how Expression Blend supports opening .sln files and working with multiple projects.

Lastly, it is worth commenting that the 3D graph is based on work done by Robert Hogue (http://www.therhogue.com/WinFX/). Some of the explanation in his download pack is germaine to the code in the 3D part of the application.

Enjoy!

Required Reading: Optimizing WPF Application Performance

karstenj — Wed, 29 Nov 2006 22:44:00 GMT

If you are a WPF developer, you must read Optimizing WPF Application Performance. It is chockful of tips, tricks and information about the inner workings of WPF. I've read it multiple times and I always learn something new. It is a glimse into the WPF source code, which you are building on top of whenever you build a WPF application. With a platform as vast as WPF which does so much on your behalf, you need to understand in fact what it is doing and how it is doing it. Don't read this paper before you've hit the curve, but once you have your bearings with WPF, you have to read it. Twice. Or more.

Plumbing the SDK Samples and Unearthing More About Doing Per Frame Animation

karstenj — Thu, 23 Nov 2006 02:02:00 GMT

There is a very cool sample buried deeply in the SDK called Per Frame Animation that has some very clever and useful code in it. I recently was revisiting the sample and realized that there is a lot going on in the sample that may not at first be apparent. As such, I decided to isolate just the firework effects part of the sample and put some more UI around it so that people could tweak the settings and see what is possible visually. Here's the result - you can click the image to run it and download the source as well. If you hover or click the blue cross on the right, you will see the effect.

If you look at the burst on the right, you'll get a sense for what the application does, although it is of course much prettier if you actually see it in action. You can play with animating other visuals, including any geometry, text, etc. You can also play around with the effect using the sliders and other toggles on the left. I borrowed Ernie Booth's color picker that he posted in this sample and I used Expression Interactive Designer to create the layout, playing around with styling and databinding.

So, what is going on here? The crux is this line 477 in the page1.xaml file:

<ae:FireworkEffect x:Name="theEffect" >
<Button Style="{DynamicResource ButtonStyle1}" Width="100" Height="100" Content="Button"/>
</ae:FireworkEffect>

The button is wrapped in a FireworkEffect class. Now, if you dig into the FireworkEffect class, you'll see that it derives from OverlayRenderDecorator, which a custom FrameworkElement whose sole purpose is to overlay graphics on top of any UI element. It is quite clever what is going on in this class, because the OverlayRenderDecorator has two visual children but only one logical child. The first child, which is both a visual child and a logical child, is whatever is the child of the element, in this case a button. The second visual child is a OverlayRenderDecoratorOverlayVisual, which is another custom class that derives from DrawingVisual. This second child doesn't participate in layout, hittesting or any of the other behaviors native to logical children. But, it does get to display UI. When and how, you might ask?

This is where another moment of cleverness comes in: the OverlayRenderDecorator declares its own virtual method, OnOverlayRender, which it calls after Arrange has been called in its ArrangeOverride override. But, how is the derived type allowed to do its work? Well, remember, the second visual child, buried inside the OverlayRenderDecorator, is derived from DrawingVisual, so it can pass its drawing context, to the derived class, as follows:

using (DrawingContext dc = _overlayVisual.RenderOpen())
{
//delegate to derived types
OnOverlayRender(dc);
}

This means that OnOverlayRender gets called after the logical children have been painted during OnRender, which is where WPF graphics are typically painted. This is real real handy because it can do per frame animations that don't affect layout, hittesting, input or anything else.

I modified the code in the FireworkEffect implementation of OnOverlayRender from the SDK to show off the ability to create some other effects. One that is kind of interesting is the DrawDrawing call, because you can pass any resource you have to it, which might be created by a designer in a tool such as Illustrator, Studio MX or Expression. At first, I was thrown off by how to use DrawDrawing because, unlike other calls such as DrawGeometry, DrawEllipse, DrawImage or DrawText, there was no way to pass a point where the drawing is to take place. Because the whole animation effect is created by updating where the drawing takes place, this was problematic. I then realized that I could push a TranslateTransform to the DrawDrawing and acheive the same effect, as follows:

case "Drawing":
             GeometryDrawing gd = (GeometryDrawing)this.FindResource("d");
             drawingContext.PushTransform(new TranslateTransform(p.Location.X, p.Location.Y));
             drawingContext.DrawDrawing(gd);
             drawingContext.Pop();
             break;

If you want to try some other effects with the code, it is in the OnOverlayRender method of the FireworkEffect class where you would do it.

Another curious thing about the sample is that you'll notice that the CompositionTarget.Rendering doesn't do any UI work inside of it. All of the painting, as it were, is done by the OnOverlayRender method. So, what is the point of CompositionTarget.Rendering? Well, it is used to create the physics effects and keep track of frame/time ratio. Each particle in the effect is updated in the CompositionTarget.Rendering callback method, passing a delta time.

One final comment: I used the Flexible Application Template for the project so that I could easily toggle whether it is deployed as an XBAP or a Windows Application.

download the source

Mike Swanson Is The Man: Flash to WPF Converter Posted

karstenj — Tue, 21 Nov 2006 21:00:00 GMT

Mike Swanson, a hero already for his Illustrator to XAML converter, has posted a Thanksgiving gift: a SWF to XAML converter. I just interviewed him for Channel 9, in which he shows some demos and spills the beans on how he did it.

.NET 3.0 Shipped and MIX07 Announced: What Better Way To Celebrate Than With A Cool WPF App From ReMIX Japan?

karstenj — Wed, 08 Nov 2006 21:12:00 GMT

So, if you haven't heard the news, .NET 3.0 shipped along with the SDK! The Visual Studio Extensions aren't official yet, but they are looking better with every build. And, in addition, MIX07 has been announced. It wouldn't surprise me if it sold out.

So, what better way to celebrate than checking out this media browser done by NHK, recently demo'd at ReMIX Japan, screenshots below. The screenshots don't do the application justice, so it is worth it to watch the video, as you'll see all kinds of nice animation interactivity, 3D, media and more. (To jump right to the demo in the video, select the 7th "chapter".) There is another demo worth watching at Chapter 42 by the web agency Second Factory with TV head people (screen shots below). I can't wait to see more and more applications emerging written on top of WPF, as people get more and more creative having the shackles of earlier UI limitations lifted.

Healthcare Prototype Source Code Posted

karstenj — Mon, 30 Oct 2006 21:30:00 GMT

The healthcare prototype source code, which we have demo'ed in one way or another many times, is now posted. It is a very compelling prototype as far as how a particular vertical -- healthcare -- could take advantage of WPF. Perhaps most interesting is its different techniques for doing data visualization, including some clever 3D work, which you can see from the screen shot below, as well as some nice video manipulation. This app is probably one of the more complete samples with source code available on WPF that exists. The download also includes a script on how to demo it as well as a decomposition of how it takes advantage of WPF, walking through feature by feature. Check it out!