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