Jim Galasyn's Learning Curve

WPF and Bling

2009-10-28T01:00:43Z

Here is one of the coolest applications of WPF ever: Bling. It’s a completely new way to leverage the WPF platform for high-performance graphics development. Bling experiments with a programming model that combines the ease of programming provided by a retained graphics model with the flexibility and performance provided by custom pixel and vertex shaders. Shaders are expressed in pure C# code rather than HLSL code. At run-time, the C#-encoded shaders are dynamically translated into HLSL code that is then compiled into DirectX 10 shaders. You get the speed of shaders running on the GPU without the HLSL goo, hooray!

Glass shader effect in Bling. It runs really fast.

To give you an idea of what pixel shader code looks like in Bling, here’s a simple lens effect:

// A lens pixel effect.

At = new ButtonBl( canvas )

    LeftTop = At,

    Content = "Lens",

    Click = () => UseImage.Effect.Custom = ( input, uv ) =>

        slider.Visibility = true;

        slider.LabelName = "light";

        PointBl v = ( ( uv * UseImage.Size ) - ( thumbA - UseImage.LeftTop ) );

        DoubleBl l = ( v.Length / 100 );

        l = ( l <= 1 ).Condition( l.Pow( 1d + slider.Value ), l );

        var n = v.Normalize;

        var clr = input[uv + ( l * n * .1 )];

        var clrB = input[uv - ( l * n * .1 )];

        var antiAlias = 1d - ( ( l - 1 ) / .01 ).Saturate;

        return ( l <= 1 ).Condition( l.Lerp( clr, Colors.LightGray ), antiAlias.Lerp( input[uv], Colors.LightGray ) );

}.RightTop;

Here’s what the shader looks like:

Lens pixel shader in Bling.

In addition, the UI is expressed by sophisticated declarative constraints that maintain dynamic relationships in the UI without event handling. But that’s a topic for another post. Just go download Bling.

Technorati Tags: WPF,pixel shader,.NET Framework

WPF samples now available at Code Gallery

2009-10-23T20:43:59Z

In past versions of our Visual Studio and .NET Framework documentation, you may have experienced frustration when you tried to access our WPF sample code.

No more. We’ve picked the best samples, hoisted them out of the docs, updated them for Visual Studio 2010, and uploaded them to Code Gallery: WPF Documentation Samples.

You’ll see example code for creating custom controls, 3D graphics, data binding, and lots of other stuff. Almost all samples have Visual Basic parity with C#. Go install Visual Studio Beta 2 and then check them out.

Screenshot from the Brushes sample

Technorati Tags: .NET Framework,WPF,Visual Studio

Fun with brainwaves, part 2

2009-10-18T21:11:35Z

As I promised in Fun with brainwaves, part 1, I’ve written a little WPF application that displays realtime data from Emotiv’s Epoc neuroheadset. It’s a very simple monitoring app, named WPFEmotivClient, that displays the data stream from either EmoComposer or Emotiv Control Panel. The idea is to demonstrate that WPF can consume and display Epoc data easily, and this enables many high-performance visualization scenarios.

Code is posted at Code Gallery: WPF and realtime neural data.

WPFEmotivClient (left) and Emotiv Control Panel (right) displaying realtime data form the Epoc neuroheadset. The expression corresponds to Blink, Furrow, and Clench.

WPFEmotivClient (left) and Emotiv Control Panel (right) displaying realtime data form the Epoc neuroheadset.

Technorati Tags: EEG,brainwave,chaos,nonlinear dynamics,WPF

Fun with brainwaves, part 1

2009-09-29T02:09:54Z

For years, I’ve been interested in human brainwaves, especially the possibility of using nonlinear dynamics (“chaos theory”) to analyze them. But affordable EEG devices simply have not been available. Back in the early 90s, I built a little device from a kit, but the data had only 6-bit resolution, and there were issues with signal-to-noise ratio, so I didn’t make any progress.

But now, we have Emotiv, a company that intends to bring high-resolution brainwave data to the desktop. Their first consumer-grade neuroheadsets rolled off the assembly line and shipped last week, and I was fortunate enough to receive mine on Tuesday. So here’s a little tour of what we know so far.

The device arrived from the Philippines in a compact box. Shipping had been delayed by Typhoon Morakot, the deadliest typhoon to hit Taiwan in recorded history.

Here’s how it shipped:

Packaging for Emotiv’s Epoc neuroheadset.

Here’s a shot with the cat, for scale:

The neuroheadset packaging, with Lord Azrael for scale. We didn’t name him.

The Epoc device peeks out of its packaging. Very Videodrome:

Epoc neuroheadset peeks out of its packaging.

Here it is, fully revealed:

Epoc neuroheadset, one of the first off the assembly line.

And now for a gratuitous montage of movies that inspired me to go down this path.

James Woods gets up close and personal with the Videodrome signal.

Ralph Fiennes deals in illegal virtual experiences. Okay, I couldn’t find a shot of the cool headset.

Christopher Walken records human experiences, featuring the famous “orgasm loop.”

A younger Christopher Walken gets a dose of early-70s mind-control technology.

It took some figuring out, but we finally got the neuroheadset on the the right way. Okay, it was my wife who said we had it on backward. YOU WERE RIGHT, HONEY

My friend Scott applies the saline solution to the electrodes. Liberally.

In Part 2: A WPF client for realtime Epoc headset data!

Technorati Tags: EEG,brainwave,chaos,nonlinear dynamics

WPF Designer sample code is posted

2009-09-17T19:30:31Z

If you want to author custom design-time experiences for your WPF controls, this is a good place to start.

We have samples for custom adorners, context menus, property value editors, and advanced scenarios. This code is written for Visual Studio 2010 Beta 2, but you should have luck with the Beta 1 bits. A Silverlight example is in preparation but isn’t posted yet.

Check out the code here: WPF and Silverlight Designer Extensibility Samples.

Property Editors

Custom Dialog Property Value Editor

Custom dialog property editor that launches a dialog to set a FileName property

Custom Inline Value Editor

Custom inline property value editor

Custom Extended Property Value Editor

Custom extended property value editor

Adorners

Custom Autosize Adorner

Custom adorner that sets the Autosize property

Custom Rail Adorner

Custom rail adorner that adjusts the opacity of a control

Custom Inner Rail Adorner

Custom rail adorner that adjusts the RenderTransform of a control

In-place Editing

Custom adorner that enables in-place text editing

Advanced

Custom Context Menu

Custom context menu that sets the Background of a control

Custom Feature Connector

Custom feature connector that displays the pending and activated designer features

Custom Surrogate Policy

Surrogate policy that enables a custom primary selection policy

Technorati Tags: .NET Framework,WPF,WPF Designer,Visual Studio

TestApi v0.3 Posted

2009-09-15T20:50:57Z

Ever wondered how to test your WPF, Windows Forms, .Net Framework, and Win32 applications programmatically? Of course you have.

Now there’s the TestApi, a library of test and utility APIs that enables developers and testers to create automated tests for .NET and Win32 applications. TestApi provides a set of common test building blocks -- data-structures and algorithms -- in a simple, layered, componentized and documented stack.

New in TestApi v0.3:

Managed code fault Injection API
Combinatorial Variation Generation API
New application control API (experimental)
Visual verification additions
Acceptance tests
New namespace and binary naming
New samples
Updated documentation

Get the TestApi here: http://testapi.codeplex.com.

Visual Verification

Expected Client-Area Snapshot

Actual Client-Area Snapshot

Difference Snapshot

Get the TestApi here: http://testapi.codeplex.com.

Technorati Tags: .NET Framework,Windows Forms,WPF

WPF and the Parallel Extensions, Updated

2009-09-11T21:01:11Z

At the request of the Parallel .NET team, I’ve cleaned up the code from my earlier post, WPF and the Parallel Extensions.

Reaction-diffusion visualization

You can download the code from here: WPF and Parallel .NET. Have fun!

Technorati Tags: .NET Framework,Parallel,WPF,Chaos,Fractal

Sensors in my Pocket PC

2009-06-30T05:37:14Z

I like to play around with the occasional new Microsoft technology, and since I recently traded my old Treo for an HTC Touch Pro, it seemed like it might be fun to check out the onboard accelerometers.

Fortunately, courageous bloggers have probed the secrets of HTCSensorSDK.dll, culminating in the .NET wrapper by Koush. This makes developing a mobile app that uses the device’s sensors a snap.

My first thought was to see what the data stream from the sensors looks like, so I wrote a primitive real-time graphing app by using the Windows Mobile 6 SDK. The WinMo SDK has nice integration with Visual Studio, so it’s painless to create a Smart Device project.

Koush’s sample code is great, and it was easy to adapt it to draw waveforms. Here’s the app in the designer:

The TiltData main form in the Visual Studio designer.

There are three panels, one for each component of the tilt vector. The tilt vector is the vector, in device space, that measures the alignment of the device relative to the gravity vector. When the device is held upright, the Y value is maximum (at around 9.8, units are m/sec/sec), and the X and Z values are zero.

To produce some interesting signal, I taped my phone to the spokes of a bicycle wheel. Here are the traces that result from a good spin:

TiltData running on my HTC Touch Pro.

The X-Y plane of the phone is parallel to the radial plane of the wheel, which is vertical. Most of the signal shows up as oscillations in the X-Y plane, but some Z-axis wobble is detectable.

Code is here. You’ll need Visual Studio 2008 SP1, Windows Mobile 6 SDK, and Koush’s Windows Mobile Unified Sensor API. Add Koush’s Sensors project to the TiltData Solution, compile, and deploy to your device. I don’t recommend swinging it around by the USB cable, by the way.

Technorati Tags: Windows Mobile,Visual Studio,Pocket PC,Smart Device

Microsoft and Earth Week

2009-04-23T21:04:57Z

I have to say I’ve been impressed with Microsoft’s recent efforts to green up. All the cafeterias have compostable dining ware now – it’s quite a blast to dump everything on my tray into a single receptacle labeled “Compost.”

Now Microsoft is publicly announcing new technologies for managing power consumption.

Check out TechNet magazine’s “Going Green” issue.

Also, Microsoft’s Environment site has been updated for Earth Week. The revisions reflect the following content and technology updates:

Launch of Windows 7 Landing Page
- Marks Release of the Windows 7 Power Management White Paper
Launch of RSS Feed
Launch of Unified Communications Landing Page
Launch of Flexible Work Landing Page
Launch of YouTube Channel (Beta)
Opening of Registration for Green IT Webcast Series on TechNet
Revision of Data Center Best Practices

Steve Ballmer has committed Microsoft to reduce its corporate carbon footprint by 30% by 2012. I hope to see solar panels and green roofs on campus buildings by then!

Technorati Tags: green power,alternative energy,Microsoft,environment,green computing

Live streaming from MIX ‘09

2009-03-18T19:54:00Z

Don’t miss the live stream from MIX ‘09. Scott Guthrie is on right now. Lots of exciting new announcements coming today.

WPF and the Parallel Extensions

2009-03-02T05:03:35Z

It’s been over six months since the Parallel Extensions to .NET Framework 3.5, June 2008 CTP release, and I’ve been wanting to play around with that stuff for awhile. It’s all shipping in .NET Framework 4.0 and is considered by Soma to be a key cloud-enabling technology. So I finally jumped in and decided to “parallelize” the reaction-diffusion visualizer I discussed in Using WriteableBitmap to Display a Procedural Texture.

Here’s a snapshot:

Reaction-diffusion visualizer

My first implementation used a single worker thread to compute each frame. Here’s how the single-thread implementation uses the CPU resources on my dual-core Inspiron laptop. Frame time averages about 127 ms.

One processor is at nearly 100% usage, but the other is underutilized.

To parallelize my reaction-diffusion visualizer, I simply replace the outer for loop with a Parallel.For method call:

            //for (int i = 1; i < vesselHeight - 1; i++)
            Parallel.For(1, vesselHeight - 1, i =>
            {
                for (int j = 1; j < vesselWidth - 1; j++)
                {
                    c = -W1 / weight(2, i, j, reaction);
                    f = -W2 * weight(1, i, j, reaction);

                    e_to_c = Math.Exp(c);
                    e_to_f = Math.Exp(f);
                    d = 1.0 + K1 * e_to_c;
                    g0 = (K1 * K2 * e_to_c * e_to_f) / d;
                        
                    Xc = b * (g0 / (g0 + 1));
                    Xb = (K1 * e_to_c / (1 + K1 * e_to_c)) * (b - Xc);
                    Xa = b - Xb - Xc;

                    // The out buffer is shared among processors/threads.
                    reactionOut[2, i, j] = Xc;
                    reactionOut[1, i, j] = Xb;
                    reactionOut[0, i, j] = Xa;

                }; 
            });

Of course, it can’t be quite this simple. Here’s the output after a few frames:

Reaction-diffusion visualizer with thread contention

The problem, of course, is that access to the out buffer, reactionOut, is not synchronized (Not so! See UPDATE below). I can put the inner loop inside a lock, and this produces correct behavior again, but the frame rate is actually slower than in the single-thread case.

Fortunately, it’s easy to solve the problem without the performance penalty caused by lock overhead. I factored the inner loop code into a ComputeConcentrations method – I hadn’t done this before, because I didn’t want the method-call overhead.

            //for (int i = 1; i < vesselHeight - 1; i++)
            Parallel.For(1, vesselHeight - 1, i =>
            {
                for (int j = 1; j < vesselWidth - 1; j++)
                {
                        Concentrations c = ComputeConcentrations(i, j, reaction);
                        reactionOut[2, i, j] = c._Xc;
                        reactionOut[1, i, j] = c._Xb;
                        reactionOut[0, i, j] = c._Xa;
                }; 
            });

Now the output is correct and both cores are fully engaged. Frame time averages about 83 ms, which is a 35% improvement.

Now I need to get my hands on a quad-core machine.

UPDATE: Stephen Toub, lead PM for our concurrency development platform team, kindly reviewed my code and corrected my misconception about access to the out buffer. In fact, the problem is with closure; specifically, I had declared all my variables outside the outer loop. This meant that all threads were sharing those registers, which is almost never what you want. The colors were pretty, though.

UPDATE 2: Here’s the same code running on my 3.6GHz quadcore. Average frame rate is 62ms, which is slightly over 50% faster than the 2GHz single-thread case.

UPDATE 3: The code is now posted on my Code Gallery page: WPF and Parallel .NET.

Technorati Tags: .NET Framework,parallel,chaos,fractal,WPF

A simple particle system

2008-12-19T21:21:31Z

For no obvious reason, I had a sudden need to write a particle system that simulates a Maxwell-Boltzmann gas, which forms the basis for the kinetic theory of gases. The trick is to implement momentum-conserving collisions as the particles bang into each other. When setting the initial conditions, the particles get uniformly random velocity vectors. The cool and somewhat counterintuitive result is that regardless of the initial conditions, the system equilibrates to the asymmetric Maxwell-Boltzmann distribution, shown in the histogram below. The histogram shows the cumulative number of particles binned by speed. The colors follow a heat map, with the fastest particle speeds rendered with the hottest colors.

Colliding particles and histogram of speeds.

Here's what the particle speed distribution looks like for four different kinds of atoms. My particles are qualitatively most similar to Xenon atoms and therefore model heavier atoms (those with higher atomic number).

The speed probability density functions of the speeds of a few noble gases at a temperature of 298.15 K (25 °C).

Just something to entertain myself while we're snowed in.

Technorati Tags: Maxwell,Boltzmann,kinetic theory

Silverlight designer extensibility

2008-11-18T23:38:13Z

I haven't even started writing the docs for SL designer extensibility, and here's Justin Angel with a great blog post that's worthy of the Visual Studio documentation. Maybe I can steal it without anybody noticing...

Siverlight Design Time Extensibility

A custom editor running in Blend.

Technorati Tags: Silverlight,designer,extensibility,Visual Studio

WPF developers take note: WPF Designer Hotfix is posted

2008-11-10T23:24:37Z

If you're writing WPF code, be sure to run the new Hotfix.

Details at the WPF SDK blog.

Technorati Tags: WPF Designer,Silverlight Toolkit,XAML

Visualizing Climate Data in Phase Space, Part 2

2008-10-17T02:34:22Z

I promised in an earlier post to implement a visualizer for Poincaré sections. This is a new feature for my phase-space visualizer, and it displays a cross-sectional view of a (usually) tangled phase-space trajectory. If you haven't read the first post, you might want to, or the following discussion will make absolutely no sense.

A Poincaré section is a slice through phase space. It can reveal interesting structures, called attractors, which constrain the orbits through phase space. The following diagram shows a Poincaré section with two different orbits: one is periodic and intersects a single point on the section repeatedly; the other is non-periodic and intersects at many different points.

A Poincaré section in phase space (Encyclopedia Britannica).

The periodic signal has a fixed-point attractor. The non-periodic signal may have one of any number of attractors. If the signal is chaotic, the attractor will appear as a fractal distribution on the Poincaré section. These are commonly called strange attractors. If everything were to come together perfectly, I'd hope to see something like the following attractors in my insolation sections:

Fractal ("strange") attractors revealed in Poincaré sections.

Keep in mind that "chaotic" does not mean random; it refers to randomlike variations that are purely deterministic, but sensitive to initial conditions. Chaotic oscillations occur in systems with nonlinear feedbacks, and Earth's climate system definitely fits this description.

In Part 1, I embedded climate data in a three-dimensional phase space and looked for interesting patterns. There were tantalizing hints of structure, but no smoking gun. The data sets generated by Dr. Raymo were too short for much detail to be visible in a Poincaré section, so I needed to generate my own.

I especially wanted to look for attractors in the insolation signal. Insolation drives Earth'[s climate system, and understanding this input signal gives us a better chance of understanding the system's response to it. In particular, if we can show that the input signal is chaotic, we can expect to find chaotic oscillations in the climate system's response.

The insolation signal is generated from a mathematical model of Earth's orbital dynamics. Dr. Raymo kindly pointed me to a handy Mac implementation named AnalySeries, so I didn't have to reverse-engineer a FORTRAN implementation named Insola. To see any interesting patterns in a Poincaré section typically requires a very large data set, so I used AnalySeries to generate 100 million years of data. Data points occur at 1000-year intervals, so there are 100,000 data points. The 3D phase-space portrait with an embedding delay of 7 samples (7,000 years) looks like this:

Phase space portrait of 100 million years of insolation data.

Not very helpful. But if we take a slice along the XY-plane, we may see more detail. The following images show the Poincaré sections for two phase-space portraits, with 6- and 7-sample embedding delays. Each orbit makes a dot when it crosses the plane. Downward-traveling crossings make an orange dot, and upward-traveling crossings make a yellow dot. There are 9063 crossings shown in each of the following Poincaré sections.

Poincaré sections for delays of 6 samples (left) and 7 samples (right).

Here are the sections along the YZ-plane:

Poincaré sections along the YZ-plane for delays of 6 samples (left) and 7 samples (right).

I find these sections to be highly suggestive of fractal structure, but there's nothing as clear as in the previous example plots. A fractal attractor might be more visible with a longer data set, but unfortunately AnalySeries generates only 100 million years of insolation data.

All is not lost, however. It's possible visualize the flow by rotating the Poincaré section around an axis and animating the intersection points as it moves. This isn't hard in principle, but it requires more coding. Because the data set is so large, realtime animation is out of the question, so I need to make a WMV out of successive snapshots. That's some more coding. I'll get back to you when I have something that works.