P5.js – Drzewo

Inspiracja:

Kod źródłowy:

<script type="text/javascript">
var angle = 3.14/5;
var proportion = 0.67;
var canvasWidth = 500;
var canvasHeight = 500;

function setup() {
	var canvas = createCanvas(canvasWidth, canvasHeight);
	canvas.parent('drzewo');
	background(0,0,10);
	colorMode(HSB);
	frameRate(10);
}

function draw() {
	angle = PI*(abs(mouseX % canvasWidth)/canvasWidth);
	//proportion = 0.67;
	proportion = ((abs(mouseY % canvasHeight)/2)/canvasHeight+0.5)*0.75;
	background(0,0,10);
	stroke(255);
	translate(canvasWidth/2, canvasHeight);
	branch(150, 1);
}

function branch(len, generation) {
	strokeWeight(20/generation);
	stroke(generation*10+100, 100, 100);
	line(0, 0, 0, -len);
	translate(0, -len);
	if (len > 4) {
		push();
		rotate(angle+ randomGaussian(1)/30);
		branch(len * proportion, generation+1);
		pop();
		push();
		rotate(-angle + randomGaussian(1)/30);
		branch(len * proportion, generation+1);
		pop();
	}
	else
	{
		noFill();
		ellipse(0,0,3);
	}
}
</script>

Zachęcam do własnych prób