MrBlonde/canvas
1
0
Fork 0
forked from djmil/canva-tree
Code Pull Requests Activity

initial commit

Browse Source
This commit is contained in:
djmil 2024-06-05 23:00:24 +02:00
commit e2ca47f243
2 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Tree.js Normal file
View File

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

39
index.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<style>
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
p { width: 800px; margin: 0 auto; }
ol { width: 800px; margin: 0 auto; }
</style>
</head>
<body>
<section>
<h1 align="center">Recursive tree</h1>
<p>Renew the page to see another tree</p>
</section>
<canvas id="tree" width="1000" height="750"></canvas>
<script src="tree.js"></script>
<script>
var canvas = document.getElementById("tree");
ctx = canvas.getContext("2d");
tree(ctx, canvas.width/2, canvas.height, 200);
</script>
</body>
</html>