Visualizing a Binary Rule System with WPF

• Download source code - 17 KB

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:

<?xml version="1.0" encoding="utf-8" ?>
<config iterations="8">
  <rules>
    <rule input="0" output="1" />
    <rule input="1" output="2" />
    <rule input="2" output="3" />
    <rule input="3" output="4" />
    <rule input="4" output="5" />
    <rule input="5" output="6" />
    <rule input="6" output="7" />
    <rule input="7" output="0" />
  </rules>
  <numbers>
    <number value="0" />
  </numbers>
</config>  

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:

<?xml version="1.0" encoding="utf-8" ?>
<config 
  color1="White" 
  color2="LightGray" 
  color3="Gray"
  iterations="8"
  >
  <rules>
    <rule input="0" output="1" />
    <rule input="1" output="2" />
    <rule input="2" output="3" />
    <rule input="3" output="4" />
    <rule input="4" output="5" />
    <rule input="5" output="6" />
    <rule input="6" output="7" />
    <rule input="7" output="0" />
  </rules>
  <numbers>
    <number value="0" />
  </numbers>
</config> 

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:

<?xml version="1.0" encoding="utf-8" ?>
<config 
  color1="White" 
  color2="LightGray" 
  color3="Gray"
  iterations="8"
  >
  <rules>
    <rule input="0" output="1" />
    <rule input="1" output="2" />
    <rule input="2" output="3" />
    <rule input="3" output="4" />
    <rule input="4" output="5" />
    <rule input="5" output="6" />
    <rule input="6" output="7" />
    <rule input="7" output="0" />
  </rules>
  <numbers>
    <number value="0" />
    <number value="1" />
    <number value="2" />
    <number value="3" />
    <number value="4" />
    <number value="5" />
    <number value="6" />
    <number value="7" />
  </numbers>
</config> 

The above configuration renders like this:

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 below:

<?xml version="1.0" encoding="utf-8" ?>
<config 
  color1="DodgerBlue" 
  color2="Orange" 
  color3="Lime"
  iterations="200"
  >
  <rules>
    <rule input="0" output="1" />
    <rule input="1" output="2" />
    <rule input="2" output="3" />
    <rule input="3" output="4" />
    <rule input="4" output="5" />
    <rule input="5" output="6" />
    <rule input="6" output="7" />
    <rule input="7" output="0" />
  </rules>
  <numbers>
    <number value="0" />
    <number value="1" />
    <number value="2" />
    <number value="3" />
    <number value="4" />
    <number value="5" />
    <number value="6" />
    <number value="7" />
    <number value="6" />
    <number value="5" />
    <number value="4" />
    <number value="3" />
    <number value="2" />
    <number value="1" />
    <number value="0" />
  </numbers>
</config> 

The configuration seen above looks like this:

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:

public class BinaryNumber
{
    byte _value;

    public BinaryNumber(byte value)
    {
        if (value < 0 || 7 < value)
            throw new ArgumentOutOfRangeException("value");

        _value = value;
    }

    public bool Bit1
    {
        get { return _value % 2 == 1; }
    }

    public bool Bit2
    {
        get { return (_value >> 1) % 2 == 1; }
    }

    public bool Bit4
    {
        get { return (_value >> 2) % 2 == 1; }
    }

    public byte Value
    {
        get { return _value; }
    }
}  

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:

public class BinaryNumberCollection : ReadOnlyCollection<BinaryNumber>
{
    readonly BinaryRuleCollection _rules;

    public BinaryNumberCollection(IList<BinaryNumber> list, BinaryRuleCollection rules)
        : base(list)
    {
        _rules = rules;
    }

    public BinaryNumberCollection OutputNumbers
    {
        get
        {
            var outputQuery =
                from number in base.Items
                select _rules.ApplyRule(number);

            return new BinaryNumberCollection(outputQuery.ToList(), _rules);
        }
    }
}  

The BinaryRule class represents a rule, which is quite simple:

public class BinaryRule
{
    public BinaryRule(byte input, byte output)
    {
        this.Input = new BinaryNumber(input);
        this.Output = new BinaryNumber(output);
    }

    public BinaryNumber Input { get; private set; }
    public BinaryNumber Output { get; private set; }
} 

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:

public class BinaryRuleCollection : ReadOnlyCollection<BinaryRule>
{
    public BinaryRuleCollection(IList<BinaryRule> list)
        : base(list)
    {
    }

    public BinaryNumber ApplyRule(BinaryNumber input)
    {
        BinaryRule rule = 
            base.Items.FirstOrDefault(r => r.Input.Value == input.Value);

        if (rule == null)
        {
            Debug.Fail("Missing rule for input value " + input.Value);
            return null;
        }

        return rule.Output;
    }
}  

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 below:

<DataTemplate DataType="{x:Type model:BinaryNumber}">
  <StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
      <Style TargetType="Rectangle">
        <Setter Property="Height" Value="1" />
        <Setter Property="Width" Value="1" />            
      </Style>
    </StackPanel.Resources>
    <Rectangle x:Name="bit4" />
    <Rectangle x:Name="bit2" />
    <Rectangle x:Name="bit1" />
  </StackPanel>
  <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Bit1}" Value="True">
      <Setter 
        TargetName="bit1" 
        Property="Fill" 
        Value="{DynamicResource color3}" 
        />
    </DataTrigger>
    <DataTrigger Binding="{Binding Bit2}" Value="True">
      <Setter 
        TargetName="bit2" 
        Property="Fill" 
        Value="{DynamicResource color2}" 
        />
    </DataTrigger>
    <DataTrigger Binding="{Binding Bit4}" Value="True">
      <Setter 
        TargetName="bit4" 
        Property="Fill" 
        Value="{DynamicResource color1}" 
        />
    </DataTrigger>
  </DataTemplate.Triggers>
</DataTemplate>  

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’s constructor, as seen below:

XDocument xdoc = XDocument.Load(configFilePath);
XElement configElem = xdoc.Element("config");
BrushConverter converter = new BrushConverter();
for (int i = 1; i <= 3; ++i)
{
    string colorName = "color" + i;

    XAttribute attr = configElem.Attribute(colorName);
    Brush brush;
    if (attr == null)
        brush = Brushes.White;
    else
        brush = converter.ConvertFromString(attr.Value) as Brush;

    App.Current.Resources[colorName] = brush;
}  

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:

<DataTemplate DataType="{x:Type model:BinaryNumberCollection}">
  <ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
  </ItemsControl>
</DataTemplate>  

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 below:

<Border 
  Background="Black"
  BorderBrush="Black" 
  BorderThickness="3" 
  Margin="6" 
  Padding="1"
  >
  <Viewbox Stretch="Fill">
    <ItemsControl x:Name="itemList"  />
  </Viewbox>
</Border>  

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!