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_tree(pos) { var baum = new Branch(); baum.length = (20 + Math.random() * 20); var shape; if(Math.random() < 0.5) { shape = "kite"; } else { shape = "triangle"; } baum.crown = {shape: shape}; if(shape == "kite") { baum.crown.length = (70 + Math.random() * 30); 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); baum.crown.width = 0.4 + Math.random() * 0.2; //baum.crown.bisect = 0.3 + Math.random() * 0.1; } baum.angle = Math.PI / 2; // + Math.random() * 0.2 - 0.1; if((shape == "kite") && (Math.random() < 0.5)) { var b = { length: baum.length * 0.4, angle: Math.PI / 5 + Math.random() * 0.45, crown: { shape: "kite", length: baum.crown.length * 0.4, width: baum.crown.width, bisect: baum.crown.bisect, //bisect: 0.5, } }; baum.forks = [{ pos: 0.2 + Math.random() * 0.4, branch: new Branch(b), }]; baum.draw(pos); var rectified = false; var i=0; while(baum.collides_crown(baum.forks[0].branch)) { baum.forks[0].branch.angle -= 0.01; baum.draw(pos); rectified = true; i += 1; if(i>50) { var c = new Path.Circle({center:pos, radius: 2, strokeWidt: 1, strokeColor: '#ff0000'}); //break; } } if(rectified) { baum.forks[0].branch.angle -= Math.random() * 0.1; var c = new Path.Circle({center:pos, radius: 2, strokeWidt: 1, strokeColor: '#ff0000'}); baum.draw(pos); } } baum.draw(pos); 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) { if(typeof this._crown !== "undefined") { this._crown.removeSegments(); delete this._crown; } if(typeof this._branch !== "undefined") { this._branch.removeSegments(); delete this._branch; } this._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); this._branch.strokeColor = 'black'; this._branch.strokeWidth = 2; this._branch.add(pos); this._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); this._crown = new Path(); this._crown.strokeColor = 'black'; this._crown.fillColor = 'white'; this._crown.strokeWidth = 2; this._crown.closed = true; //this._crown.selected = true; this._crown.add(end); this._crown.add(end.add(cvec.multiply(this.crown.bisect)) .add(bsvec)); this._crown.add(end.add(cvec)); this._crown.add(end.add(cvec.multiply(this.crown.bisect)) .subtract(bsvec)); console.log(this._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); this._crown = new Path(); this._crown.strokeColor = 'black'; this._crown.fillColor = 'white'; this._crown.strokeWidth = 2; this._crown.closed = true; //this._crown.selected = true; this._crown.add(end.add(bsvec)); this._crown.add(end.add(cvec)); this._crown.add(end.subtract(bsvec)); console.log(this._crown); } } if(typeof this.forks !== "undefined") { for (let fork of this.forks) { fork.branch.draw(pos.add(bvec.multiply(fork.pos))); } } } collides_crown(other) { return this._crown.intersects(other._crown); } } window.onload = function() { var canvas = document.getElementById('canvas'); paper.setup(canvas); //var br = new Branch(baum); for(var x=0; x<10; x++) { for(var y=0; y<5; y++) { var br = new Branch(gen_tree(new Point(50 + x*80, 150 + y*160))); } } }