Introduction

This article shows a WPF application that takes a set of simple rules, some input data to be processed by those rules, and then allows us to visualize the result of applying those rules to the input data. The rules and input data are stored in XML files, allowing you to have various configurations with which to experiment.

Background

At work the other day, I was talking with a good friend of mine, Grant Hinkson. Grant mentioned that he has been reading Stephen Wolfram’s book, “A New Kind of Science”. He explained the idea of Cellular Automaton to me, which caught my interest and got my imagination going. The idea of having a simple set of rules that apply to basic building blocks, and then seeing what large-scale phenomena can arise out of applying those rules repeatedly, is very intriguing to me.

Now, before going one step further, I must make something very clear. I have not studied Wolfram’s work, I do not claim to understand his ideas, nor is my program in any way trying to demonstrate his concepts. His Mathematica product does an excellent job of that. I was simply inspired by a discussion about Cellular Automaton, and built a simple program based on that inspiration.

The Idea of a Binary Rule System

The idea is simple: take a sequence of numbers, apply some rules to those numbers, and get a new sequence of numbers. Each number in the input sequence results in one number in the output sequence. The rules can contain any logic that you want. The simplest rule would be to return the input value. In my program, each rule returns the same output value for a given input value, but that output value is configurable.

So, why do I call it a “binary” rule system? My rule system only works with the values zero through seven. Those eight numbers can be represented by the first three binary values (i.e., 000 through 111 in binary). When we render the numbers later, we will display each number as a visualization of its binary representation.

Visual Explanation

Let’s start with the simplest example. In the demo project, the simple1.xml file contains this configuration:

The configuration seen above shows the fundamentals. The <rules> section specifies how to map an input value to an output value. The mappings in this example simply walk up the number line in ascending order. The <numbers> section only has one number, zero. This means that the application will only display one number and start applying the rules to just that number. How many times will the rules be applied? As you can see in the <config> element, the rules will be applied eight times, as specified by the ‘iterations’ attribute.

Running the program using the configuration above will create a visualization of these numbers, in decimal:

0
1
2
3
4
5
6
7

You could also say that it is a visualization of those same numbers, but in binary:

000
001
010
011
100
101
110
111

Here is a screenshot of the program running when this configuration is applied, where a black cell represents 0 and a white cell represents 1. Each "row" of cells in the image represents a number, and the numbers increase as you move down from row to row.

It is also possible to specify how each bit in a number should render. As seen above, by default, a bit is black if its value is 0, and white if its value is 1. The simple2.xml file in the demo project shows how you can specify the colors of each bit when it is 1. Here is that file:

Running the program with that configuration file loaded looks like this:

So far, we have only seen an example with one number in the <numbers> section. The visualizations become more interesting as we add more input numbers. The next configuration, in the simple3.xml file, has eight input numbers. Each of those numbers renders side-by-side in the same row. Here is the next configuration:

The final example in this section is a configuration that takes the previous input numbers and creates a mirror symmetry of them, uses more exciting colors, and increases the number of times that the rules are applied. The resultant visualization is visually appealing, especially if you view it at a larger size. The simple4.xml configuration file is shown below:

How the Rule System Works

The rule system is very simple. It consists of a class that represents a number and a class that represents a rule. Each of those two classes has a corresponding collection class. Here is the BinaryNumber class, which represents a number:

This class is a wrapper around a byte value. The Bit1, Bit2, and Bit4 properties come into play later, when we create a visualization for this class. Each of those properties return true if the bit they represent is “on” for the BinaryNumber’s value. For example, if the value is five (101 in binary), Bit4 returns true, Bit2 returns false, and Bit1 returns true.

We create a sequence of BinaryNumbers by adding them to a BinaryNumberCollection. That class also provides the logic for getting the output values created by applying the rules to its sequence of values. Here is that class:

Rules are added to a BinaryRuleCollection, an instance of which is shared by all BinaryNumberCollection objects. The collection of rules provides a way to get the output value created by a rule for an input value. That class is listed below:

How the Visualization Works

So far, we have not talked about how I created the visualizations. We have focused only on what a binary rule system is and how it works. Now, it is time to turn our attention to the rendering aspect of this program.

There are many ways that I could have implemented the rendering. I wanted to keep it simple, and use data binding and data templates as much as possible. I know there are other ways that would perform marginally faster, but performance is not a priority for me. I would rather keep it simple and easy to configure in XAML.

The program has two data templates. One template renders a BinaryNumber object. It displays three Rectangles in a StackPanel, each representing a binary bit in the number. That template is shown below:

The brushes used to paint each Rectangle come from a dynamic resource reference. Those brushes are placed into the Application.Resources collection. That logic exists in the Configuration class’ constructor, as shown below:

The BinaryNumberCollection class also has a data template. That template displays all of the collection’s BinaryNumber objects in an ItemsControl. Each of those ItemsControls can be thought of as a “row” in the visualization. That template declaration looks like this:

The container for all of the BinaryNumberCollections is an ItemsControl, whose ItemsSource property is set to a List<BinaryNumberCollection> in the code-behind. That ItemsControl is wrapped in a Viewbox so that it renders nicely no matter what size the Window happens to be. Those elements are shown below:

Conclusion

This might not be the most useful program or article out there, but I think it is fun and interesting. The simple, declarative way that WPF can create an appealing visualization of this data is, in itself, appealing. I hope you enjoyed this article and, perhaps, learned a thing or two along the way. Happy coding!

Comments and Discussions

Excellent article. The topic stretches my understanding so it must be good.

I do have an additional question. I noticed an article you wrote on dynamically loading content (e.g. Grids, ListBoxes, FlowDocumentReaders, etc...). Is there a good place where I can find information on how to dynamically load then discard certain items?

Based on what the user enters, they will see different screens within the "main area" of the software. I use a grid to layout the GUI. The area in the 2nd column and 1st row is the main area (and is about 1/3rd the size of the entire screen). In this area, I need to dynamically load and discard content. So, for example, if the user is entering information about themselves, I must load a list box, buttons, and a picture. If the user is looking at other information they have entered, then I must load a rich text box or flow document viewer. If the user wants to see data, then I must load some graphs, etc....

I need to know the best way to load what I need - where I need it, then discard them when finished so they are not taking up memory.

There are many ways to do what you describe. The one I would use, assuming I have a relatively clean slate to work with, is as follows. Each View that you display is a custom UserControl. The data and domain logic of the view is baked into a corresponding ViewModel class, to which the View communicates via data binding and executing commands. The ViewModel objects are placed, one at a time, into the Content property of a ContentControl, which is in the main Window/Page. That ContentControl's Resources contains a typed DataTemplate for each type of ViewModel that it might contain. Each DataTemplate simply wraps the UserControl you created for a ViewModel class. You end up with a one-to-one relationship between ViewModel class, UserControl, and typed DataTemplate.

The final result of this approach is quite enticing. When the user wants to view, say, the the Edit My Info screen (as you mentioned) they click perhaps a button on a Toolbar called "Edit My Info". In response to that action, you would load up and place a UserProfileViewModel object into the ContentControl's Content property. Since you previously added a typed DataTemplate for UserProfileViewModel to the ContentControl's Resources, your UserProfileControl will automatically be displayed in the ContentControl and bind itself to the ViewModel object. When the user navigates to another View, the UserProfileControl will be removed and thrown away for you.

Not off the top of my head. You should search the Web for "ViewModel WPF" and check out some examples. Maybe one day soon I'll throw together an example and write an article about it. I wrote an article[^] about using a ViewModel with the TreeView control. Maybe that will give you a good starting point.

Strange but cool is certainly true! It makes me wonder how a visualization of the movie kiosk distribution system would look like--the whole thing is rule based, whether certain formats exist, whether they've been encoded at different playback rates, whether the movie is corrupted or not, and of course, a realtime visualization of the active movies, their distribution and all that.

Crazy stuff!

(oh, and a 5 from me. I will be perusing your WPF code when I finally get a chance to write my next installment)