An Evening of Code: Koch Snowflake

The Koch Snowflake is the one of the first, and simplest, of the fractals.

Starting with an equilateral triangle:

• Start at the first line and remove it.
• Set the step length by dividing the line length by 3.
• Set the angle to that of the line.
• Step forward.
• Rotate 60 degrees left.
• Step forward.
• Rotate 120 degrees right.
• Step forward.
• Rotate 60 degrees left.
• Step forward.

In total, we've added four new lines and increased the total length of the shape by 1/3. Repeat for the remaining lines and we have completed an iteration. Starting again on the new shape we can repeat the same steps for each of the new lines. As can be seen from the above animation, which only iterates 5 times, the complexity rapidly increases.

Technically this is not actually a Koch Snowflake as that is the shape we approach as we iterate. However, we would need to iterate an infinite number of times to generate a true Snowflake.

Iterating on a single line generates a Koch Curve. The Snowflake, starting from a triangle, is made of three curves.

The Koch Curve can be described by a Lindenmayer (L-) System. This is where we create a string and, each iteration, run a set of rules to replace characters in the string with others. Each character defines a drawing rule which we can follow to draw the shape after the iterations have completed.

F = Step Forward
+ = Rotate 60 degrees right
- = Rotate 60 degrees left

Rules
F → F-F++F-F

Starting with: F++F++F++

Our drawing instructions give us our starting triangle. Iterating, we increase the size of the string and generate more rules. Following them generate the animation above.

float stepLength = 256;
string rule = "F-F++F-F";
Vector2 start = new Vector2(128, 128);

protected override void Draw () {
  string axiom = "F++F++F++";
  for (int i = 0; i < 5; i++) {
    axiom = Iterate(axiom);
  }

  int index = 0;
  Color[] colors = new Color[3]{Color.black, Color.red, Color.blue};
  int length = axiom.Length;

  Vector2 currentPoint = start;
  float angle = 0;
  int colIndex = 0;
  while(index < axiom.Length) {
    char c = axiom[index];
    if (c == 'F') {
      Vector2 newPoint = NewPoint(currentPoint, stepLength, angle);
      DrawLine (new Line(currentPoint, newPoint), colors[colIndex % 3]);
      colIndex++;
      currentPoint = newPoint;
    } else if (c == '-') {
      angle -= 60;
    } else if (c == '+') {
      angle += 60;
    }
    index++;
  }
}

string Iterate(string axiom) {
  Regex regex = new Regex("F");
  stepLength /= 3;

  return regex.Replace(axiom, rule);
}

Vector2 NewPoint(Vector2 point, float step, float angle) {
  float radAngle = angle * Mathf.Deg2Rad;
  float x1 = (point.x + (step * Mathf.Cos(radAngle)));
  float y1 = (point.y + (step * Mathf.Sin(radAngle)));

  return new Vector2(x1, y1);
}

Try modifying the above to generate new shapes. For example, replacing the '+' with '-' symbols in the starting axiom will create the equilateral triangle facing in the other direction and which starts a different pattern which will never exceed the bounds of the initial equilateral triangle.