分形树 - 未绘制的分支

Question

Currently, I'm trying to draw a symmetric binary tree through IFS (Iterated Function Systems):

but the result is always only the branch tips:

.

I can't figure out what I'm doing wrong or what I'm missing.

This is the IFS:

This is my code:

RenderWindow window(VideoMode(480, 640), "fractals everywhere");
CircleShape point(1);
int chance;
float x, y, w, h, nx, ny, px, py;

void SymmetricBinaryTrees()
{
    float r = 0.57f;
    float o = 0.785f;

    chance = rand() % 3;

    switch (chance)
    {
    case 0:
        nx = r * cos(o) * x + (-1 * r * sin(o) * y);
        ny = r * sin(o) * x + r * cos(o) * y + 1;
        break;
    case 1:
        nx = r * cos(o) * x + r * sin(o) * y;
        ny = -1 * r * sin(o) * x + r * cos(o) * y + 1;
        break;
    case 2:
        nx = x;
        ny = y;
        break;
    }
}

void nextPoint()
{
    SymmetricBinaryTrees();

    x = nx; y = ny;
}

void drawPoint()
{
    px = _map(x, -1.078, 1.078f, 0, w); py = _map(y, 0.f, 2.078f, h, 0); // maps the position accordingly
    point.setPosition(px, py);

    window.draw(point);
}

int main()
{
    srand(time(NULL));

    w = window.getSize().x * 1.f;
    h = window.getSize().y * 1.f;

    x = 0.f; y = 0.f;

    window.setFramerateLimit(60);

    while (window.isOpen())
    {
        Event e;

        while (window.pollEvent(e))
            if (e.type == Event::Closed) window.close();

        for (int i = 1; i <= 500; i++)
        {
            drawPoint();
            nextPoint();
        }

        window.display();
    }
    return 0;
}

This is the website that I'm using for my code.

If anyone could help me or has any idea I'd be very grateful, thank you.

Answer 1

I share @beyond opinion, I think you're complicating things too much. It will be easier with a different approach. Let's make things easier.

With a recursive function, we can easily understand what should be done each step. Consider we start from a initial point , then trace a line on an angle of a given lenght , so we need a function like:

void createTreeRecursive(sf::VertexArray &tree, sf::Vector2f point, float angle, float lenght)

Where tree will be our line set, which compose the tree itself.

First thing we can do, is to set the first point, which is already known:

// Add first point
tree.append(sf::Vertex(point, treeColor));

Now we need to calculate our next point, to form a line. With simple trigonometric functions we can determine that point:

float newX = point.x + (cos((2.f * PI / 360.f) * angle) * lenght);
float newY = point.y - (sin((2.f * PI / 360.f) * angle) * lenght);  // Caution here! Minus(-) sign because we're drawing upwards

So we add this second point, and then split the tree into 2 new branches, each one rotated some certain degrees:

// Add second point
tree.append(sf::Vertex(nextPoint, treeColor));

// Create sub-tree from 2nd point, rotating +45 degrees (i.e. counterclockwise), reducing lenght of the new branch by 0.6 factor
createTreeRecursive(tree, nextPoint, angle + O, lenght * R);

// Same with the other sub-tree, but rotating -45 (i.e. clockwise)
createTreeRecursive(tree, nextPoint, angle - O, lenght * R);

We need a base case for our recursive function, in this case, I choose 3 as minimum lenght:

if (lenght < 3)
    // End condition, can be modified
    return;

this must be out first check.

So we're done, we only need the initial call:

sf::VertexArray createTree(){
    // Our tree will be made out of lines
    sf::VertexArray ret(sf::PrimitiveType::Lines);
    // Initial point at botton-center(250, 450), with a 90 degrees rotation, first branch lenght 200 
    createTreeRecursive(ret, sf::Vector2f(250, 450), 90, 200);
    return ret;
}

And the result is:

Full code

#include <SFML/Graphics.hpp>

const double PI = 3.141592;
const double R = 0.57;  // Reduction factor
const double O = 45;    // Degree rotation each time
sf::Color treeColor = sf::Color::Blue;

void createTreeRecursive(sf::VertexArray &tree, sf::Vector2f point, float angle, float lenght){
    if (lenght < 3)
        // End condition, can be modified
        return;

    // Add first point
    tree.append(sf::Vertex(point, treeColor));
    float newX = point.x + (cos((2.f * PI / 360.f) * angle) * lenght);
    float newY = point.y - (sin((2.f * PI / 360.f) * angle) * lenght);  // Caution here! Minus(-) sign because we're drawing upwards
    sf::Vector2f nextPoint(newX, newY);
    // Add second point
    tree.append(sf::Vertex(nextPoint, treeColor));

    // Create sub-tree from 2nd point, rotating +45 degrees (i.e. counterclockwise), reducing lenght of the new branch by 0.6 factor
    createTreeRecursive(tree, nextPoint, angle + O, lenght * R);

    // Same with the other sub-tree, but rotating -45 (i.e. clockwise)
    createTreeRecursive(tree, nextPoint, angle - O, lenght * R);
}

sf::VertexArray createTree(){
    // Our tree will be made out of lines
    sf::VertexArray ret(sf::PrimitiveType::Lines);
    // Initial point at botton-center(250, 450), with a 90 degrees rotation, first branch lenght 200 
    createTreeRecursive(ret, sf::Vector2f(250, 450), 90, 200);
    return ret;
}

int main()
{
    RenderWindow window({ 500, 500 }, "SFML Tree", Style::Close);

    auto tree = createTree();

    while (window.isOpen())
    {
        for (Event event; window.pollEvent(event);){
            if (event.type == Event::Closed)
                window.close();
        }

        window.clear();
        window.draw(tree);
        window.display();
    }
    return EXIT_SUCCESS;
}

Answer 2

I would advice you to use recursion with a function that 1) draws the current branch (as a line), and then 2) creates two new branches from the current branch. Using global variables doesn't help you either. Looks like you should rethink your approach.