baumgen/baumgen.js

paper.install(window);


var baum = {
    length: 30,
    angle: Math.PI / 2,
    crown: {
        shape: "kite",
        length: 130,
        width: 0.3,
        bisect: 0.3,
    },
    forks: [
        {
            pos: 0.3,
            branch: {
                angle: 0.3,
                length: 30,
                crown: {
                    shape: "kite",
                    length: 50,
                    width: 0.3,
                    bisect: 0.3,
                },
                forks: [
                    {
                        pos: 0.6,
                        branch: {
                            angle: Math.PI/2.5,
                            length: 40,
                            crown: {
                                shape: "kite",
                                length: 70,
                                width: 0.3,
                                bisect: 0.3,
                            },
                        },
                    }
                ],
            },
        },
        {
            pos: 0.5,
            branch: {
                angle: 3*Math.PI /4,
                length: 30,
                crown: {
                    shape: "kite",
                    length: 50,
                    width: 0.3,
                    bisect: 0.3,
                },
            },
        }
    ],
};


function gen_branch(level=0, shape=null, invertAngle=false) {
    var baum = {};
    var fac = 1;
    var lfac = 1;
    if(level > 0) {
        lfac = 1.2;
        //fac = 1 / (level*2);
        fac = 0.5;
    }

    baum.length = (20 + Math.random() * 20) * lfac;

    if(shape == null) {
        if(Math.random() < 0.5) {
            shape = "kite";
        } else {
            shape = "triangle";
        }
    }

    baum.crown = {shape: shape};
    if(shape == "kite") {
        baum.crown.length = (70 + Math.random() * 30) * fac;
        baum.crown.width = 0.4 + Math.random() * 0.2;
        baum.crown.bisect = 0.3 + Math.random() * 0.1;
    } else if(shape == "triangle") {
        baum.crown.length = (70 + Math.random() * 30) * fac;
        baum.crown.width = 0.4 + Math.random() * 0.2;
        //baum.crown.bisect = 0.3 + Math.random() * 0.1;
    }

    if(level == 0) {
        baum.angle = Math.PI / 2;
    } else if(level % 2 == 1) {
        //if(Math.random() < 0.5) {
        if(invertAngle) {
            baum.angle = Math.PI / 4 + Math.random() * 0.45;
        } else {
            baum.angle = Math.PI - Math.PI / 4 - Math.random() * 0.45;
        }
    } else {
        baum.angle = Math.PI/2 + (Math.random() * 0.6 - 0.3);
    }

    if(level == 0) {
        baum.forks = [];
        for(var i=0; i<Math.floor(Math.random() * 3); i++) {
            var inv = (level % 2 == 0) && (i % 2 == 1);
            baum.forks.push({
                pos: 0.2 + Math.random() * 0.4,
                branch: gen_branch(level+1, shape, inv),
            });
        }
    } else if(level == 1) {
        baum.forks = [];
        if(Math.random() < 0.5) {
            var inv = (level % 2 == 0) && (i % 2 == 1);
            baum.forks.push({
                pos: 0.2 + Math.random() * 0.7,
                branch: gen_branch(level+1, shape, inv),
            });
        }
        
    }
    return baum;
}


class Branch {
    constructor(data, parentBranch=null) {
        //this.parentBranch = parentBranch;
        Object.assign(this, data);
        console.log(this);
        if(typeof this.forks !== "undefined") {
            for (let fork of this.forks) {
                fork.branch = new Branch(fork.branch, this);
            }
        }
    }

    draw(pos) {
        var branch = new Path();
        var bvec = new Point(Math.cos(this.angle) * this.length,
                                  -1 * Math.sin(this.angle) * this.length);
        var end = pos.add(bvec);
        branch.strokeColor = 'black';
        branch.strokeWidth = 2;
        branch.add(pos);
        branch.add(end);

        if(typeof this.crown !== "undefined") {
            console.log("CROWN");
            if(this.crown.shape == "kite") {
                console.log("KITE");
                var cvec = bvec.multiply(1/bvec.length * this.crown.length);
                var bswidth = this.crown.length * this.crown.width;
                var bsvec = new Point(Math.sin(this.angle) * bswidth / 2,
                                      Math.cos(this.angle) * bswidth / 2);
                var crown = new Path();
                crown.strokeColor = 'black';
                crown.fillColor = 'white';
                crown.strokeWidth = 2;
                crown.closed = true;
                //crown.selected = true;
                crown.add(end);
                crown.add(end.add(cvec.multiply(this.crown.bisect))
                                      .add(bsvec));
                crown.add(end.add(cvec));
                crown.add(end.add(cvec.multiply(this.crown.bisect))
                                      .subtract(bsvec));
                console.log(crown);
                
            } else if(this.crown.shape = "triangle") {
                console.log("TRIANGLE");
                var cvec = bvec.multiply(1/bvec.length * this.crown.length);
                var bswidth = this.crown.length * this.crown.width;
                var bsvec = new Point(Math.sin(this.angle) * bswidth / 2,
                                      Math.cos(this.angle) * bswidth / 2);
                var crown = new Path();
                crown.strokeColor = 'black';
                crown.fillColor = 'white';
                crown.strokeWidth = 2;
                crown.closed = true;
                //crown.selected = true;
                crown.add(end.add(bsvec));
                crown.add(end.add(cvec));
                crown.add(end.subtract(bsvec));
                console.log(crown);
            }
        }

        if(typeof this.forks !== "undefined") {
            for (let fork of this.forks) {
                fork.branch.draw(pos.add(bvec.multiply(fork.pos)));
            }
        }

    }
}


window.onload = function() {
    var canvas = document.getElementById('canvas');
    paper.setup(canvas);

    //var br = new Branch(baum);

    for(var x=0; x<5; x++) {
        for(var y=0; y<5; y++) {
            var br = new Branch(gen_branch());
            br.draw(new Point(150 + x*160, 150 + y*160));
        }
    }

}