commit e2ca47f2435edbdf5b859480f49c8471a3f70cad Author: djmil Date: Wed Jun 5 23:00:24 2024 +0200 initial commit diff --git a/Tree.js b/Tree.js new file mode 100644 index 0000000..68a59b4 --- /dev/null +++ b/Tree.js @@ -0,0 +1,33 @@ +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); + +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..a1fd197 --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + Canvas + + + + + + +

Recursive tree

Renew the page to see another tree

+ +

+ + + + + + + + \ No newline at end of file