35 lines
1.4 KiB
JavaScript
35 lines
1.4 KiB
JavaScript
const angle2rad = angle => angle * (Math.PI / 180)
|
|
|
|
const stem = (ctx, x1, y1, length, angle) => {
|
|
// Визначити координати кіня стовбура знаючи початкову точку, довжину та кут нахилу
|
|
// Так, це тригонометрія в дії :)
|
|
const alpha = angle2rad(angle);
|
|
let x2 = x1 + length * Math.sin(alpha);
|
|
let y2 = y1 - length * Math.cos(alpha);
|
|
|
|
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(alpha);
|
|
y2 = y1 - (length * 0.95) * Math.cos(alpha);
|
|
}
|
|
|
|
if (length > 1) {
|
|
const rnd1 = Math.random() *20 -10; // [-10.0 .. +10.0]
|
|
const 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);
|
|
}
|
|
}
|
|
|
|
const tree = (ctx, x, y, height) => stem(ctx, x, y, height, 0);
|