commit
1477a39c9b
2 changed files with 231 additions and 0 deletions
@ -0,0 +1,17 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<script type="text/javascript" src="paper.js"></script> |
||||||
|
<script type="text/javascript" src="baumgen.js"></script> |
||||||
|
|
||||||
|
<style> |
||||||
|
#canvas { |
||||||
|
width: 1000; |
||||||
|
height: 1000; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<canvas id="canvas" resize></canvas> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,214 @@ |
|||||||
|
|
||||||
|
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)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue