Двумерное дерево на JS

Пример:

Обновить фон

HTML:

<div id="treediv"></div>

1	<div id="treediv"></div>

JS:

Подключаем библиотеку p5.min.js и скрипт самой графики:

var canbg = '#BFE2FF';
var treebg = '#337AB7'; 
var canheight = 500;
var canwidth = document.getElementById('treediv').offsetWidth;
var angle;
function setup() {
	var myCanvas = createCanvas(canwidth, canheight);
    myCanvas.parent("treediv");	
	window.addEventListener("resize", resize);
}
function branch(len, w, a, b) {
	strokeWeight(w);
	stroke(treebg);
	line(0, 0, 0, -len);
	translate(0, -len);
	if (len > 10) {
		push();
		var len1 = len * random(.99, .45);
		var w1 = w * random(.9, .5);
		var a1 = angle + random(-.4, 0);
		var b1 = b * 1.15;
		rotate(a1);
		branch(len1, w1, a1, b1);
		pop();
		push();
		var len2 = len * random(.99, .45);
		var w2 = w * random(.9, .5);
		var a2 = angle + random(-.4, 0);
		var b2 = b * 1.15;
		rotate(-a2);
		branch(len2, w2, a2, b2);
		pop();
	}	
	noLoop();
}
function draw() {
	background(canbg);	
	angle = PI / 3;
	push();
	translate(width/2, height);
	branch(height/4, width/50, angle, 20);				
	pop();
}
function resize () {
	resizeCanvas(canwidth, canheight);
}

var canbg = '#BFE2FF';

var treebg = '#337AB7';

var canheight = 500;

var canwidth = document.getElementById('treediv').offsetWidth;

var angle;

function setup() {

var myCanvas = createCanvas(canwidth, canheight);

myCanvas.parent("treediv");

window.addEventListener("resize", resize);

}

function branch(len, w, a, b) {

strokeWeight(w);

stroke(treebg);

line(0, 0, 0, -len);

translate(0, -len);

if (len > 10) {

push();

var len1 = len * random(.99, .45);

var w1 = w * random(.9, .5);

var a1 = angle + random(-.4, 0);

var b1 = b * 1.15;

rotate(a1);

branch(len1, w1, a1, b1);

pop();

push();

var len2 = len * random(.99, .45);

var w2 = w * random(.9, .5);

var a2 = angle + random(-.4, 0);

var b2 = b * 1.15;

rotate(-a2);

branch(len2, w2, a2, b2);

pop();

}

noLoop();

}

function draw() {

background(canbg);

angle = PI / 3;

push();

translate(width/2, height);

branch(height/4, width/50, angle, 20);

pop();

}

function resize () {

resizeCanvas(canwidth, canheight);

}

Где:

canbg - Цвет фона

treebg - Цвет дерева

canheight - Высота блока

canwidth - Ширина блока.

Для перерисовки дерева вызывается функция draw(), например:

<span onclick="draw()">Обновить фон</span>

1	<span onclick="draw()">Обновить фон</span>

Пример:

HTML:

JS:

Смотрите также:

Добавить комментарий: