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();
}

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

https://github.com/zimbatm/ffmpeg-static/blob/master/build.sh

Answer 1

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

这是我对代码的修改，使其运行得足以生成示例树：

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);

}

需要帮助打印分形树

1 个答案: