Share via

Using WriteableBitmap to Display a Procedural Texture

  • Article

A long time ago, back in the Java days, I wrote some code to simulate a particular kind of autocatalytic chemical reaction. A chaos theory researcher named Vladimir Gontar was doing some interesting work,  adapting cellular automata to more closely resemble real physical systems. He presented a method [1] for modeling a two-stage chemical reaction of the form

A → B → C

What's neat about this reaction is that it's defined to be autocatalytic, meaning that the chemicals accelerate their own formation, or as Wikipedia says, the reaction product is itself the catalyst for the reaction. In the Gontar model, chemical B catalyzes the reaction from chemical B to chemical C.

To account for spatial variation, Gontar distributes each chemical concentration Xa, Xb, and Xc on a 2D grid, with coordinates i and j. Each grid cell is coupled to its neighbors by diffusion, which is modeled with a simple weighting rule. The equations of state at time step n are

Xan(i,j) + Xbn(i,j) + Xcn(i,j) = 1,

Xbn(i,j) / Xan(i,j) = K1 * exp[ -W1 / MXcn-1(i,j) ],  

Xcn(i,j) / Xbn(i,j) = K2 * exp[ -W2 / MXbn-1(i,j) ].   

M is the weighting function that couples cell (i,j) to its neighbors:

MX(i,j) = 1/5 * [ X(i,j) + X(i-1,j) + X(i+1,j) + X( i,j-1) + X(i, j+1)].

Because models such as this account for both the chemical reactions and the transport of chemicals through the solution by diffusion, they are called reaction-diffusion systems. Chemical systems of this kind are known to be responsible for important biological functions, such as pigmentation patterns in animal skin [2] and microtubule formation in the cellular skeleton [3].

 

fish stripes and rd

Dynamic pattern change in fish and reaction-diffusion simulation. (Kondo, 2002.)

 

In 1991, when Gontar ran these equations on his little old PC (a 386, no doubt), he found solutions that were clearly analogous to real-world chemical reactions. In particular, his model successfully demonstrated the spiral wave propagation that is characteristic of the famous Belousov-Zhabotinsky reaction. 

 

gontar spiral waves 

Gontar model of B-Z reaction.

 

 bz3

Actual B-Z reaction. (Tabletop Experiments, August 2007.)

 

I find these nonlinear "chaotic" systems to be endlessly fascinating, so I reproduced Gontar's results by using old skool Java code. When the .NET Framework 1.0 shipped, my very first Windows Forms control was adapted from the original Java implementation. It was a bit disappointing when performance wasn't appreciably better than Java bytecode. I re-wrote the engine by using unsafe code blocks to do array access and copying, but it wasn't much help. For a 400x400 grid, I'd get around 5 frames per second on a decent machine. The presentation layer was CPU bound.

 

rdwf

Windows Forms implementation of the Gontar model. Typical frame times for a 400x400 grid are around 190 milliseconds.

 

But now we have WPF. It was a simple matter to write a new visualization layer on the old engine, and the WriteableBitmap class was just what I needed. Best of all, frame time went down considerably. The WPF implementation is almost three times faster than the WinForms implementation:

 

rdwpf

WPF implementation of the Gontar model. Typical frame times for a 400x400 grid are around 70 milliseconds.

 

The WriteableBitmap class is good for any sort of procedural texture, including fractals, cellular automata, and music visualizers. I'm hoping for even better perf when the new implementation ships with Arrowhead.

Another thing just popped into my head: the state equations generalize to 3D quite naturally. It might be an interesting exercise to build a 3D visualizer. Not sure how I'd approach that, but it's something to think about.

Update: I've posted the code for the WPF visualizer at Code Gallery. Please keep in mind that the ReactionVessel engine was the very first thing I ever wrote in the .NET Framework, so it might have a few warts.

Update 2: I’ve cleaned up the code and re-implemented with the Parallel Extensions for the .NET Framework: WPF and the Parallel Extensions.

---

[1]V. G. Gontar and A. V. Il'in, "New dynamic model describing spatio-temporal behaviour of chemical reactions," Physica D 52 (1991), pp 528-531.

[2] Kondo, Shigero, "The reaction-diffusion system: a mechanism for autonomous pattern formation in the animal skin," Genes To Cells (2002) 7, 535-541.

[3] James Tabony, Nicolas Glade, Jacques Demongeot, and Cyril Papaseit, "Biological Self-Organization by Way of Microtubule Reaction-Diffusion Processes," Langmuir, 18 (19), 7196 -7207, 2002.

Comments

  • Anonymous
    April 17, 2008
    PingBack from http://microsoftnews.askpcdoc.com/?p=3124

  • Anonymous
    April 17, 2008
    You should post up your code!  I'd like to test the performance of it with my VideoRendererElement control:  http://www.codeplex.com/VideoRendererElement -Jer

  • Anonymous
    April 18, 2008
    Yes, please share your source if possible.  I need to investigate WriteableBitmap.  Thanks!

  • Anonymous
    April 18, 2008
    I've posted the code at Code Gallery: https://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=jgalasyn&ReleaseId=932 Enjoy.

  • Anonymous
    March 01, 2009
    It’s been over six months since the Parallel Extensions to .NET Framework 3.5, June 2008 CTP release,

  • Anonymous
    May 20, 2012
    Dear Jim, Occasionally found your site. Thank you for your interest to my work,  understanding and realization of the idea...

  • Anonymous
    December 15, 2014
    Please repost this to somewhere that might remain accessible for a little while (One Drive?).  Thanks.

  • Anonymous
    July 01, 2015
    Shame I can't find the code anywhere. This example is mentioned in the book "Pro WPF 4.5 in C#"  : Matthew MacDonald.

  • Anonymous
    July 02, 2015
    Okay y'all, the code is posted at: github.com/.../ReactionLabClassic. Enjoy!