需要帮助打印分形树 [英] Need help in printing fractal tree

问题描述

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

I need some help in printing fractal tree using JavaScript.

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

I have written code which prints tree sequence according to the rules defined for the tree, but having some trouble to print the tree. Thanks for all the help.

代码如下:

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

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

I am able to print a tree sequence, but need some help in converting that tree sequence to be able to print a tree on the canvas. The output should look something like this:

推荐答案

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

There are some issue with your drawing logic. You code seems to be assuming that save() and restore() also save the coordinates and restore them -- they don't. You aren't using rotate() correctly (it rotates relative to the origin so you need to also translate()). You're doing absolute lineto() when you should be doing it relative to the current position. And moving in the wrong direction. And other issues.

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

Here's my rework of your code to make it run just enough to produce the example tree:

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

}

这篇关于需要帮助打印分形树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！