canva-tree/tree.js
djmil d4e87691d9 rename Tree.js to tree.js
since file names is case sensitive
2024-06-10 22:43:51 +02:00

34 lines
1.4 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

function stem(ctx, x1, y1, length, angle) {
// Визначити координати кіня стовбура знаючи почткову точку стовбура, його довжину та кут нахилу. Так, це тригонометрія в дії :)
var x2 = x1 + length * Math.sin(angle * (Math.PI /180));
var y2 = y1 - length * Math.cos(angle * (Math.PI /180));
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineWidth=length/10; // тощина стовбура залежить від його довжини
ctx.stroke();
ctx.closePath();
// Закоментуй цей IF. Що змінилось в картинці дерева? Чому стало гірше?
if (length > 20) {
x2 = x1 + (length * 0.95) * Math.sin(angle * (Math.PI /180));
y2 = y1 - (length * 0.95) * Math.cos(angle * (Math.PI /180));
}
if (length > 1) {
var rnd1 = Math.random() *20 -10; // [-10.0 .. +10.0]
var rnd2 = Math.random() *0.2 +0.6; // [ 0.6 .. 0.8]
// Малюємо розгалудження стовбура. За початок нового стовбура використовується кінець поточного стовбура
stem(ctx, x2, y2, length * rnd2, angle + 35 +rnd1);
stem(ctx, x2, y2, length * rnd2, angle - 25 +rnd1);
}
}
function tree(ctx, x, y, height) {
stem(ctx, x, y, height, 0);
}