lundi 29 septembre 2014

Pure xaml star rating control

One of the best feature in wpf/xaml is ability to completely redesign a built-in control without any line of code. Most of the time you will just define a custom theme for a selection of useful controls. But it becomes more interesting when "hacking" an existing control to make something new.

In my day work I had to make a star rating control and I thought it would be interesting to reuse the slider control for that purpose. I also wanted it to be pure xaml. I use a shape proposed by Kiran Kumar which I slightly modified.
Here is a visual (nothing really surprising though):
If you want to try, simply copy/paste the following piece of xaml to your favorite xaml editor (I used Kaxaml, which is a great tool):

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="#2d2d20">
  <Page.Resources>
    <SolidColorBrush x:Key="NoStar" Color="#29ffffff" />
    <SolidColorBrush x:Key="Star" Color="Yellow" />

    <Style
      x:Key="StarRatingShapeStyle"
      TargetType="Polygon">
      <Setter Property="Width" Value="12" />
      <Setter Property="Height" Value="12" />
      <Setter Property="Fill" Value="{StaticResource NoStar}" />
      <Setter Property="Points" Value="9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7" />
      <Setter Property="Stretch" Value="Fill" />
      <Setter Property="Stroke" Value="White" />
      <Setter Property="StrokeLineJoin" Value="Round" />
      <Setter Property="StrokeThickness" Value=".5" />
      <Setter Property="IsHitTestVisible" Value="False" />
    </Style>

    <Style x:Key="RatingSliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
      <Setter Property="Padding" Value="0" />
      <Setter Property="Margin" Value="0" />
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate>
            <Border
              Background="{TemplateBinding Background}"
              BorderThickness="0"
              />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <Style x:Key="RatingSliderThumbStyle" TargetType="{x:Type Thumb}">
      <Setter Property="OverridesDefaultStyle" Value="true" />
      <Setter Property="Focusable" Value="False" />
      <Setter Property="Padding" Value="0" />
      <Setter Property="Margin" Value="0" />
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Thumb}">
            <Border
              Background="{TemplateBinding Background}"
              BorderThickness="0"
              />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <Style
      x:Key="StarRatingSliderStyle"
      TargetType="Slider">
      <Setter Property="Minimum" Value="0" />
      <Setter Property="Maximum" Value="5" />
      <Setter Property="SmallChange" Value="1" />
      <Setter Property="LargeChange" Value="1" />
      <Setter Property="TickFrequency" Value="1" />
      <Setter Property="IsSnapToTickEnabled" Value="True" />
      <Setter Property="IsMoveToPointEnabled" Value="True" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate
            TargetType="Slider">
            <Grid>
              <Track
                x:Name="PART_Track"
                >
                <Track.DecreaseRepeatButton>
                  <RepeatButton
                    Style="{StaticResource RatingSliderRepeatButtonStyle}"
                    Command="{x:Static Slider.DecreaseLarge}"
                    />
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                  <RepeatButton
                    Style="{StaticResource RatingSliderRepeatButtonStyle}"
                    Command="{x:Static Slider.IncreaseLarge}"
                    />
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                  <Thumb
                    x:Name="PART_Thumb"
                    Style="{StaticResource RatingSliderThumbStyle}"
                    />
                </Track.Thumb>
              </Track>

              <StackPanel
                Orientation="{TemplateBinding Orientation}">
                <Polygon
                  x:Name="S5"
                  Style="{StaticResource StarRatingShapeStyle}"
                  />
                <Polygon
                  x:Name="S4"
                  Style="{StaticResource StarRatingShapeStyle}"
                  />
                <Polygon
                  x:Name="S3"
                  Style="{StaticResource StarRatingShapeStyle}"
                  />
                <Polygon
                  x:Name="S2"
                  Style="{StaticResource StarRatingShapeStyle}"
                  />
                  <Polygon
                  x:Name="S1"
                  Style="{StaticResource StarRatingShapeStyle}"
                  />
              </StackPanel>
            </Grid>

            <ControlTemplate.Triggers>
              <Trigger Property="Value" Value="1">
                <Setter TargetName="S1" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S2" Property="Fill" Value="{StaticResource NoStar}"/>
                <Setter TargetName="S3" Property="Fill" Value="{StaticResource NoStar}"/>
                <Setter TargetName="S4" Property="Fill" Value="{StaticResource NoStar}"/>
                <Setter TargetName="S5" Property="Fill" Value="{StaticResource NoStar}"/>
              </Trigger>
              <Trigger Property="Value" Value="2">
                <Setter TargetName="S1" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S2" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S3" Property="Fill" Value="{StaticResource NoStar}"/>
                <Setter TargetName="S4" Property="Fill" Value="{StaticResource NoStar}"/>
                <Setter TargetName="S5" Property="Fill" Value="{StaticResource NoStar}"/>
              </Trigger>
              <Trigger Property="Value" Value="3">
                <Setter TargetName="S1" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S2" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S3" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S4" Property="Fill" Value="{StaticResource NoStar}"/>
                <Setter TargetName="S5" Property="Fill" Value="{StaticResource NoStar}"/>
              </Trigger>
              <Trigger Property="Value" Value="4">
                <Setter TargetName="S1" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S2" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S3" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S4" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S5" Property="Fill" Value="{StaticResource NoStar}"/>
              </Trigger>
              <Trigger Property="Value" Value="5">
                <Setter TargetName="S1" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S2" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S3" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S4" Property="Fill" Value="{StaticResource Star}"/>
                <Setter TargetName="S5" Property="Fill" Value="{StaticResource Star}"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <StackPanel>
    <Slider
      x:Name="Ranking"
      Orientation="Vertical"
      HorizontalAlignment="Center"
      Background="Transparent"
      Style="{StaticResource StarRatingSliderStyle}"
      />
    <Slider
      x:Name="Test"
      Orientation="Horizontal"
      Minimum="0"
      Maximum="5"
      Width="200"
      Height="200"
      IsSnapToTickEnabled="True"
      TickFrequency="1"
      Value="{Binding Value, ElementName=Ranking}"
      />
  </StackPanel>
</Page>

This xaml implementation is not completely usable because of two small issues:

  • Depending on where you click on a star (above or below the middle) you got different behaviors. But it could be easily solved with a converter that would ceil or floor the value.
  • Horizontal and vertical orientation is handled, but in horizontal orientation the order is reversed. I guess I should not use the Stackpanel orientation but rather a LayoutTransform.
Publié par à Aucun commentaire:
Libellés : , , , , , , ,
Pays/territoire : Issy-les-Moulineaux, France

dimanche 28 septembre 2014

2D fractal heightmap

3D Inspiration

I recently had to generate a random 2D heightmap for a spare time project.
Then I recalled Paul Bourke excellent page about fractals (and a lot more !)

You will find a great article on how to generate 3D planets with a very simple algorithm here. In an ancient time I implemented this algorithm in a 3DS Max plugin. And today I thought it would be funny to transpose it to 2D and see what happens ...

Let me quickly describe the 3D algorithm in a few steps:
  1. Start with a sphere
  2. Pick a random plane (actually you need a normal to that plane)
  3. Increase height on one side and decrease height on the other side of the plan
  4. Go back to step 2
Illustrations from Paul Bourke (1000 iterations)

2D Transposition


Let's now talk about how we can transpose this algorithm to 2D:
  1. Start with a flat map (square or rectangular)
  2. Pick a random line that cut the map (you need two points or a point and a normal)
  3. Randomly increase height on one side of the line and decrease height on the other side
  4. Go back to step 2.



Some results after 10000 iterations on a 512x512 grid (12s on my core i7)

Indeed the more iteration the more "details" you get but the downside is that it takes longer to generate (for each iteration all pixels are evaluated). Then I had the idea to try a different workflow:
  1. Pick a random "normal" associated with a random height offset and save it
  2. Go back to step 1 as many times as number of iteration
  3. For every pixel sum the height offset given by each line
I naively I though it would be faster, but indeed it produce exactly the same amount of processing. There is at least one benefit to this method, being able to calculate elevation for any coordinate (the map size can grow at any time).

Generalization

After playing a bit with my generator, I thought it could funny to go a bit further. What happens if instead of dividing the map in two part with a line, I choose a different primitive like a circle.
And well, why not a triangle or square?

Here are some outputs using a random combination of lines, circles, triangles and rectangles.
As you can see other shapes introduce a huge bias, most probably because I use circles, rectangles and triangles that fully lie inside the grid. I will try to find a better way to define those shapes. But the good thing it that it seems to remove visible line patterns (that what led me to this idea).

Updated (September 30th 2014)

At the cost of a lot more iterations, and using a square grid instead of a rectangular one the visual results seem good. The performance are not so good even with a small change I did to take advantage of parallel computing (4x times faster on a quad core).

1
2
3
4
5
Parallel.ForEach(
      (from x in Enumerable.Range(0, this.width)
       from y in Enumerable.Range(0, this.height)
       select new Tuple<int, int>(x, y)),
        p => this.map[p.Item2, p.Item1] = this.dividers.Sum(s => s.GetValue(p.Item1, p.Item2)));

I didn't understood it first, but using a rectangular grid introduce a small bias in the density of horizontal and vertical lines that was generating more visible line patterns.

In the end I'm a bit disappointed by the visual results. Indeed increasing the number of iterations to 1000 reduce artifacts at the cost of generation time.

Below you will find a piece of code from a visual studio demo project:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace HeightMapDemo
{
  public class PaulBourke
  {
    private interface IDivider
    {
      double GetValue(double x, double y);
    }

    private class Splitter : IDivider
    {
      public Splitter(Point a, double va, Point b, double vb)
      {
        this.X = (int)a.X;
        this.Y = (int)a.Y;
        this.va = va;
        this.vb = vb;

        this.ratio = (b.X - this.X) / (b.Y - this.Y);
      }

      private readonly int X;
      private readonly int Y;
      private readonly double va;
      private readonly double vb;
      private readonly double ratio;

      public double GetValue(double x, double y)
      {
        return this.ratio * (y - this.Y) - (x - this.X) > 0 ? this.va : this.vb;
      }
    }

    private readonly Random randomizer;
    private readonly int width;
    private readonly int height;
    private readonly double[,] map;

    private IDivider[] dividers;

    public PaulBourke(Random randomizer, int width, int height)
    {
      this.randomizer = randomizer;
      this.width = width;
      this.height = height;
      this.map = new double[height, width];
      this.Iterations = 10000;
    }

    public int Iterations { get; set; }

    public double[,] Map
    {
      get { return this.map; }
    }

    public IEnumerable<double> Map1D
    {
      get { return this.map.Cast<double>(); }
    }

    public void Generate()
    {
      this.Prepare();

      Parallel.ForEach(
      (from x in Enumerable.Range(0, this.width)
       from y in Enumerable.Range(0, this.height)
       select new Tuple<int, int>(x, y)),
        p => this.map[p.Item2, p.Item1] = this.dividers.Sum(s => s.GetValue(p.Item1, p.Item2)));
    }

    private void Prepare()
    {
      this.dividers = new IDivider[this.Iterations];

      Parallel.ForEach(Enumerable.Range(0, this.Iterations),
                        i => this.dividers[i] = this.CreateSplitter());
    }

    private IDivider CreateSplitter()
    {
      int sideA = this.randomizer.Next(4);
      Point pointA = this.PickPointOnSide(sideA);

      int sideB = this.Next(4, sideA);
      Point pointB = this.PickPointOnSide(sideB);
      while (pointB == pointA)
      {
        pointB = this.PickPointOnSide(sideB);
      }

      double valueA = 2 * this.randomizer.NextDouble() - 1d;
      double valueB = -valueA;// this.randomizer.NextHeight();

      return new Splitter(pointA, valueA, pointB, valueB);
    }

    private Point PickPointOnSide(int side)
    {
      Point p = new Point();

      switch (side)
      {
        case 0:
          p.Y = 0.0;
          p.X = this.randomizer.Next(this.width);
          break;
        case 1:
          p.Y = this.randomizer.Next(this.height);
          p.X = this.width;
          break;
        case 2:
          p.Y = this.width;
          p.X = this.randomizer.Next(this.width);
          break;
        case 3:
          p.Y = this.randomizer.Next(this.height);
          p.X = 0.0;
          break;
      }

      return p;
    }

    private int Next(int maxValue, int except)
    {
      int value = this.randomizer.Next(maxValue);

      while (value == except)
      {
        value = this.randomizer.Next(maxValue);
      }

      return value;
    }
  }
}

Updated (October 3rd 2014)

Fuzzyness

I was wondering how I could achieve good results with less iterations. Because I must admit that less 5K iterations produces visible edges (even if I mix different primitives). Then I though that instead of splitting the grid with hard edges I could introduce "fuzzy" edges.

How I made it ? Using perlin noise to scramble edges. Basically if a point is close enough to an edge, instead of being binary categorized, a 2D perlin noise is used to categorize. Below you can see the code for a line divider:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
public override double GetValue(Point p)
{
  Vector v = this.origin - p;

  if (this.UseEdge)
  {
    return Math.Abs(v.X * this.normal.X + v.Y * this.normal.Y) < 0.5 ? 10d : 0d;
  }
  
  double distance = v.X * this.normal.X + v.Y * this.normal.Y;

  if (this.Fuzziness > 0 && Math.Abs(distance) < this.Fuzziness)
  {
    double generate = this.Fuzziness*this.PerlinNoise.Generate(p.X, p.Y);

    return generate > distance ? this.va : this.vb;
  }

  return distance < 0 ? this.va : this.vb;
}

In the code above you can see:
  •  a toggle to display only the line itself
  • the line is defined by its normal and a point on the grid
  • the distance is actually the result of a dot product
  • if the point is in the fuzziness area then "randomize" using perlin noise the point value.
This algorithm seems to remove hard edges artifacts but, well introduce other kind of artifacts (depending on the perlin noise parameters). But here is a nice result with less than 1000 iterations:

Publié par à Aucun commentaire:
Libellés : , ,
Pays/territoire : Issy-les-Moulineaux, France
Inscription à : Articles (Atom)