Center a Heighway dragon fractal in C#

[Heighway dragon]

The example Draw a Heighway dragon fractal in C# explains how to draw a Heighway dragon. That example draws its curve somewhere near the center of the form but the curve isn’t really centered. To properly size and center the curve, you need to understand its dimensions in relationship to the curve’s starting point.

The following picture shows the curve’s dimensions where X is the distance drawn by the first segment in the level 0 curve.

If the initial segment’s length is X, then the curve’s total height is X/3 + X * 2/3 = X and its total width is X/3 + X + X/6 = 1.5 * X. (If you want to try to figure out why this is true, note that the height is X * [1/2 + 1/22 + 1/23 + ···] = X * 1 and the width is X * [1 + 1/22 + 1/23 + ···] = 1.5 * X.)

Now you can use this information about proportions to size and center the curve. The following code shows how the program determines how big to draw the curve and where to start drawing so the curve is centered.

// Draw the dragon.
private void picDragon_Paint(object sender, PaintEventArgs e)
    Cursor = Cursors.WaitCursor;

    // Find the first control points.
    const int margin = 5;
    float dx = Math.Min(
        (picDragon.ClientSize.Width - 2 * margin) / 1.5f,
        (picDragon.ClientSize.Height - 2 * margin));

    // Center it.
    float x0 =
        (picDragon.ClientSize.Width - dx * 1.5f) / 2f + dx / 3f;
    float y0 =
        (picDragon.ClientSize.Height - dx) / 2f + dx / 3f;

    // Recursively draw the lines.
    int level = (int)nudLevel.Value;
    DrawDragonLine(e.Graphics, level, Direction.Right,
        x0, y0, dx, 0);
    Cursor = Cursors.Default;

    // Draw a box around it and some other lines to show size.
        x0 - dx / 3, y0 - dx / 3,
        1.5f * dx, dx);
    e.Graphics.DrawLine(Pens.Blue, x0, y0, x0 + dx, y0 + 0);
    e.Graphics.FillEllipse(Brushes.Blue, x0 - 2, y0 - 2, 5, 5);

To determine the first segment’s length dx (which corresponds to the value X in the previous picture), the code divides the available height by 1.5, divides the available width by 1 (you can skip that because you’re dividing by 1), and then takes the minimum of those two values.

To center the curve, the program calculates the curve’s width (dx * 1.5) and height (dx). It subtracts those values from the available width and height and divides by 2 to find the upper left corner for the curve. It then adds dx / 3 to the starting X and Y coordinates to find the location of the curve’s starting point. (See the previous picture.)

Having found the proper value for dx and the starting point (x0, y0), the program calls the DrawDragonLine method as in the earlier example.

The code finishes by drawing a green rectangle around the curve, drawing a line showing the level 0 curve, and plotting the curve’s starting point (x0, y0). Compare the two pictures shown here to see how the result makes sense.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in algorithms, drawing, fractals, graphics, mathematics and tagged , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.