今更ながら、CreateJSでフラクタルツリーを描く
フラクタルツリーの情報は山ほどあるけどね。
■上部に行くほど細く短い枝に
- 親枝の先端から2股に分け、小枝を描く
- 左にθ回転した枝と、右にθ回転する
- 小枝は、親枝の90%の長さ、1ピクセル細くする
- 上記を繰り返す
var stage = new createjs.Stage("mcanvas");
var sh = new createjs.Shape();
stage.addChild(sh);
var cnt = 0;
function recurv( st_x, st_y, end_x, end_y, vec, cnt ) {
if(cnt > 7) {
return;
}
//長さr 角度angleの線を引く
var deg = Math.floor( Math.random() * 35 ); //35度以内
var angle = ( deg * (Math.PI / 180) ) * vec;
//点（a,b）を中心に座標(x, y)をθ回転した座標
var end_x2 = (end_x - st_x) * Math.cos(angle) - (end_y - st_y) * Math.sin(angle) + st_x;
var end_y2 = (end_x - st_x) * Math.sin(angle) + (end_y - st_y) * Math.cos(angle) + st_y;
//ライン描画
var linew = cnt;
if( cnt < 8 ) {
linew = 8 - cnt;
}
sh.graphics.beginStroke(createjs.Graphics.getRGB(0,0,0));
sh.graphics.setStrokeStyle( linew );
sh.graphics.moveTo(st_x,st_y);
sh.graphics.lineTo(end_x2,end_y2);
//次の準備
var end_x3 = ( (end_x2 - st_x) * 0.9 ) + end_x2;
var end_y3 = ( (end_y2 - st_y) * 0.9 ) + end_y2;
cnt++;
recurv( end_x2, end_y2, end_x3, end_y3, 1, cnt );
recurv( end_x2, end_y2, end_x3, end_y3, -1, cnt );
}
recurv(300, 320, 300, 260, 1, 1);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}