paper.install(window); function gen_tree(pos) { var baum = new Branch(); baum.length = (20 + Math.random() * 20); var shapernd = Math.random() * 3; if(shapernd < 1) { baum.crown = new KiteCrown( 70 + Math.random() * 30, 0.4 + Math.random() * 0.2, {bisect: 0.2 + Math.random() * 0.2}, ); } else if(shapernd < 2) { baum.crown = new TriangleCrown( 70 + Math.random() * 30, 0.4 + Math.random() * 0.2, ); } else { baum.crown = new EllipseCrown( 70 + Math.random() * 30, 0.4 + Math.random() * 0.2, {bisect: 0.1 + Math.random() * 0.4}, ); } baum.angle = Math.PI / 2; // + Math.random() * 0.2 - 0.1; if((baum.crown.shape != "triangle") && (Math.random() < 0.5)) { var b = { length: baum.length * 0.4, angle: Math.PI / 2, crown: baum.crown.clone() }; b.crown.length *= 0.4; baum.forks = [{ pos: 0.2 + Math.random() * 0.4, branch: new Branch(b), }]; baum.draw(pos); var step = (Math.random() < 0.5) ? -0.1 : 0.1; while(baum.collides_crown(baum.forks[0].branch)) { baum.forks[0].branch.angle += step; baum.draw(pos); } var range = 4*Math.PI/9 - Math.abs(Math.PI/2 - baum.forks[0].branch.angle); if(step > 0) { baum.forks[0].branch.angle += range * (0.1 + 0.9 * Math.random()); } else { baum.forks[0].branch.angle -= range * (0.1 + 0.9 * Math.random()); } baum.draw(pos); } baum.draw(pos); return baum; } class Crown { constructor(length, width, shape) { this.width = width; this.length = length; this.shape = shape; } undraw() { if(typeof this._path !== "undefined") { this._path.removeSegments(); delete this._path; } } collides(other) { return this._path.intersects(other._path); } } class KiteCrown extends Crown { constructor(length, width, {bisect = 0.3}={}) { super(length, width, 'kite'); this.bisect = bisect; } clone() { return new KiteCrown(this.length, this.width, {bisect: this.bisect}); } draw(branch, bvec, cpos) { this.undraw(); var cvec = bvec.multiply(1/bvec.length * this.length); var bswidth = this.length * this.width; var bsvec = new Point(Math.sin(branch.angle) * bswidth / 2, Math.cos(branch.angle) * bswidth / 2); this._path = new Path(); this._path.strokeColor = 'black'; this._path.fillColor = 'white'; this._path.strokeWidth = 2; this._path.closed = true; this._path.add(cpos); this._path.add(cpos.add(cvec.multiply(this.bisect)).add(bsvec)); this._path.add(cpos.add(cvec)); this._path.add(cpos.add(cvec.multiply(this.bisect)).subtract(bsvec)); } } class TriangleCrown extends Crown { constructor(length, width) { super(length, width, 'triangle'); } clone() { return new TriangleCrown(this.length, this.width); } draw(branch, bvec, cpos) { this.undraw(); var cvec = bvec.multiply(1/bvec.length * this.length); var bswidth = this.length * this.width; var bsvec = new Point(Math.sin(branch.angle) * bswidth / 2, Math.cos(branch.angle) * bswidth / 2); this._path = new Path(); this._path.strokeColor = 'black'; this._path.fillColor = 'white'; this._path.strokeWidth = 2; this._path.closed = true; this._path.add(cpos.add(bsvec)); this._path.add(cpos.add(cvec)); this._path.add(cpos.subtract(bsvec)); } } class EllipseCrown extends Crown { constructor(length, width, {bisect = 0.5}={}) { super(length, width, 'ellipse'); this.bisect = bisect; } clone() { return new EllipseCrown(this.length, this.width, {bisect: this.bisect}); } draw(branch, bvec, cpos) { this.undraw(); var cvec = bvec.multiply(1/bvec.length * this.length); var bswidth = this.length * this.width; var bsvec = new Point(Math.sin(branch.angle) * bswidth / 2, Math.cos(branch.angle) * bswidth / 2); this._path = new Path(); this._path.strokeColor = 'black'; this._path.fillColor = 'white'; this._path.strokeWidth = 2; this._path.closed = true; var cmid = cpos.add(cvec.multiply(this.bisect)); this._path.add(new Segment(cpos, bsvec.multiply(0.5), bsvec.multiply(-0.5), )); this._path.add(new Segment(cmid.subtract(bsvec), bvec.multiply(-0.5), bvec.multiply(0.5), )); this._path.add(new Segment(cpos.add(cvec), bsvec.multiply(-0.5), bsvec.multiply(0.5), )); this._path.add(new Segment(cmid.add(bsvec), bvec.multiply(0.5), bvec.multiply(-0.5), )); } } class Branch { constructor(data) { Object.assign(this, data); if(typeof this.forks !== "undefined") { for (let fork of this.forks) { fork.branch = new Branch(fork.branch, this); } } } draw(pos) { 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") { this.crown.draw(this, bvec, end); } 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.collides(other.crown); } } function draw() { 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))); } } }