在打印分形树时需要帮助

Question

我需要一些帮助来使用 JavaScript 打印分形树。

我已经编写了根据为树定义的规则打印树序列的代码，但是在打印树时遇到了一些麻烦。感谢大家的帮助。

代码如下：

var sentence = "F";
var rules = [];
rules[0] = {
    a: "F",
    b: "F[+F]F[-F]F"
}

setup();
function setup() {
    turtle();
    for (i = 0; i < 2; i++){
        generate();
    }
}

function turtle(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');
    for (var i = 0; i < sentence.length; i++){
        context.beginPath();
        var current = sentence.charAt(i);
        if (current == "F"){
            context.stroke();
            context.lineTo(50,50);
        }else if (current == "+"){
            context.rotate(20*Math.PI/180);
        }else if (current == "-"){
            context.rotate(-20*Math.PI/180);
        }else if (current == "["){
            context.save();
        }else if (current == "]"){
            context.restore();
        }
    }
}

function generate(){
    var nextSentence = "";
    for (var i = 0; i < sentence.length; i++){
        var current = sentence.charAt(i);
        var found = false;
        for (var j = 0; j < rules.length; j++ ){
            if (current == rules[j].a){
                found = true;
                nextSentence += rules[j].b;
                console.log(nextSentence);
                break;
            }
        }
        if (!found){
            nextSentence += current;
        }
    }
    sentence = nextSentence;
    turtle();
}

我能够打印树序列，但需要一些帮助来转换该树序列以便能够在画布上打印树。 输出应如下所示：

Answer 1

您的绘图逻辑存在一些问题。您的代码似乎假设save() 和restore() 也保存坐标并恢复它们——它们没有。您没有正确使用rotate()（它相对于原点旋转，因此您还需要translate()）。你正在做 absolute lineto() 当你应该做它 relative 到当前位置。并且朝着错误的方向前进。以及其他问题。

这是我对您的代码的返工，使其运行起来刚好足以生成示例树：

var sentence = "F";
var rules = [];

rules[0] = {
    a: "F",
    b: "F[+F]F[-F]F"
}

var x = 150;  // starting x
var y = 400;  // starting y
var y_stack = [];  // save & restore don't handle coordinates

function turtle(sentence, context) {

    for (var i = 0; i < sentence.length; i++) {

        var current = sentence.charAt(i);

        if (current == "F") {
            y -= 35;
            context.lineTo(x, y);
            context.stroke();
        } else if (current == "+") {
            context.translate(x, y);
            context.rotate(20 * Math.PI / 180);
            context.translate(-x, -y);
        } else if (current == "-") {
            context.translate(x, y);
            context.rotate(-20 * Math.PI / 180);
            context.translate(-x, -y);
        } else if (current == "[") {
            context.save();
            y_stack.push(y);
        } else if (current == "]") {
            context.restore();
            y = y_stack.pop();
            context.moveTo(x, y)
        }
    }
}

function generate(sentence) {
    var nextSentence = "";

    for (var i = 0; i < sentence.length; i++) {
        var current = sentence.charAt(i);
        var found = false;

        for (var j = 0; j < rules.length; j++ ) {
            if (current == rules[j].a) {
                found = true;
                nextSentence += rules[j].b;
                break;
            }
        }

        if (!found) {
            nextSentence += current;
        }
    }

    return nextSentence;
}

function draw() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');

    context.moveTo(x, y);

    for (i = 0; i < 2; i++) {
        sentence = generate(sentence);
    }

    console.log(sentence);
    turtle(sentence, context);

}