commit
1477a39c9b
2 changed files with 231 additions and 0 deletions
@ -0,0 +1,17 @@
@@ -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 @@
@@ -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