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

Compare commits

base: djmil:master
Branches Tags
djmil:master
djmil:gitea-pages
MrBlonde:smoothie
MrBlonde:master
MrBlonde:gitea-pages
..
compare: MrBlonde:master
Branches Tags
MrBlonde:smoothie
MrBlonde:master
MrBlonde:gitea-pages
djmil:master
djmil:gitea-pages

No commits in common. "master" and "master" have entirely different histories.
master ... master

4 changed files with 18 additions and 35 deletions
Show Stats Expand all files Collapse all files

15
README.md
View File

@ -1,15 +0,0 @@
A simple static HTML page using JavaScript Canvas to draw recurisive tree. Click [here](https://djmil.pages.djmil.dev/canva-tree/index.html) to see the final result.
# How does it work
In it's essence, `index.html` is responsible for providing tree-drawing configuration by placeing initial tree trunk somewhere on the page. Than, the recursive nature of the called function will do the rest of the job by drawing two, slightly smaller & slightly different, sub-trunks on top of the parrent trunk. The core trick is that the beginning of each new branch derived from the end of it's predecessor.
# Trigonometry cheetsheet
![pic](cosin.jpg)
Key: by knowing *coordinates* `x1`, `y1` of a starting point, we want to find a *destination point* `x2`, `y2` by using *distance* `L` and *angle* `Alpha` as additional constaraints.
# Pages
The pages server, self-hosted at `www.pages.djmil.dev`, is listening for your requests for the web-page content in the form of `http://user.pages.djmil.dev/repo/file.html`, than fetches the desired data from the underline Gitea instance to serve it as a responce. Check [gitea-pages](https://gitea.djmil.dev/goland/gitea-pages) for more details.

BIN
cosin.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

5
index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Recursive tree</title> <title>Canvas</title>
<!-- <link rel="stylesheet" href="css/style.css"> --> <!-- <link rel="stylesheet" href="css/style.css"> -->
<style> <style>
canvas { canvas {
@ -21,13 +21,12 @@
<section> <section>
<h1 align="center">Recursive tree</h1> <h1 align="center">Recursive tree</h1>
<p>Reload the page to see another one.</p> <p>Reload the page to see another one</p>
</section> </section>
<canvas id="tree" width="1000" height="750"></canvas> <canvas id="tree" width="1000" height="750"></canvas>
<section> <section>
<p>Find out how this magick works at the <a href="https://gitea.djmil.dev/djmil/canva-tree">canvas-tree</a> repo.</p>
<p align="right">(c) djmil</p> <p align="right">(c) djmil</p>
</section> </section>

31
tree.js
View File

@ -1,34 +1,33 @@
const angle2rad = angle => angle * (Math.PI / 180) function stem(ctx, x1, y1, length, angle) {
// Визначити координати кіня стовбура знаючи почткову точку стовбура, його довжину та кут нахилу. Так, це тригонометрія в дії :)
const 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));
// Так, це тригонометрія в дії :)
const alpha = angle2rad(angle);
let x2 = x1 + length * Math.sin(alpha);
let y2 = y1 - length * Math.cos(alpha);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x1, y1); ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2); ctx.lineTo(x2, y2);
ctx.lineWidth = length / 10; // Товщина стовбура залежить від його довжини ctx.lineWidth=length/10; // тощина стовбура залежить від його довжини
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
// Закоментуй цей IF. Що змінилось в картинці дерева? Чому стало гірше? // Закоментуй цей IF. Що змінилось в картинці дерева? Чому стало гірше?
if (length > 20) { if (length > 20) {
x2 = x1 + (length * 0.95) * Math.sin(alpha); x2 = x1 + (length * 0.95) * Math.sin(angle * (Math.PI /180));
y2 = y1 - (length * 0.95) * Math.cos(alpha); y2 = y1 - (length * 0.95) * Math.cos(angle * (Math.PI /180));
} }
if (length > 1) { if (length > 1) {
const rnd1 = Math.random() *20 -10; // [-10.0 .. +10.0] var rnd1 = Math.random() *20 -10; // [-10.0 .. +10.0]
const rnd2 = Math.random() *0.2 +0.6; // [ 0.6 .. 0.8] 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 + 35 +rnd1);
stem(ctx, x2, y2, length * rnd2, angle - 25 +rnd1); stem(ctx, x2, y2, length * rnd2, angle - 25 +rnd1);
} }
} }
const tree = (ctx, x, y, height) => stem(ctx, x, y, height, 0); function tree(ctx, x, y, height) {
stem(ctx, x, y, height, 0);
}