djmil/canva-tree
djmil/canva-tree
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Activity

better readability

Browse Source 
yeah, for the personal historical reasons, i will leave these Ukrainian code comments untranslated :)
This commit is contained in:
djmil 2024-06-23 12:09:42 +02:00
parent 5005331732
commit b9c22554dc
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
tree.js
View File

@ -1,33 +1,34 @@
const balance_angle = angle => angle * (Math.PI / 180)
const angle2rad = angle => angle * (Math.PI / 180)
const stem = (ctx, x1, y1, length, angle) => {
// Визначити координати кіня стовбура знаючи почткову точку стовбура, його довжину та кут нахилу. Так, це тригонометрія в дії :)
const balanced_angle = balance_angle(angle)
let x2 = x1 + length * Math.sin(balanced_angle);
let y2 = y1 - length * Math.cos(balanced_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.lineWidth=length / 10; // Товщина стовбура залежить від його довжини
ctx.stroke();
ctx.closePath();
// Закоментуй цей IF. Що змінилось в картинці дерева? Чому стало гірше?
if (length > 20) {
x2 = x1 + (length * 0.95) * Math.sin(balanced_angle);
y2 = y1 - (length * 0.95) * Math.cos(balanced_angle);
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);