canva-tree/tree.js
djmil b9c22554dc better readability
yeah, for the personal historical reasons, i will leave these Ukrainian code comments untranslated :)
2024-06-23 12:09:42 +02:00

35 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.

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);