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

Compare commits

merge into: MrBlonde:master
Branches Tags
MrBlonde:master
MrBlonde:smoothie
MrBlonde:gitea-pages
djmil:master
djmil:gitea-pages
...
pull from: djmil:master
Branches Tags
djmil:master
djmil:gitea-pages
MrBlonde:master
MrBlonde:smoothie
MrBlonde:gitea-pages

8 Commits
master ... master

Author SHA1 Message Date
djmil
4efb1c5c74 revert 2024-06-23 14:38:29 +02:00
djmil
5ff9d3e824 path slash problems 
trying to make https://djmil.pages.djmil.dev/canva-tree address to work
previous state was unable to load the script
 2024-06-23 14:36:43 +02:00
djmil
1207009502 Backlink from pages to the repo 2024-06-23 13:41:07 +02:00
djmil
585c1fbb91 Readme 2024-06-23 13:24:25 +02:00
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
djmil
5005331732 Unicode in comments 
I'm to lazy to translate them to english :)
 2024-06-22 23:31:19 +02:00
djmil
9206eff8c1 Merge pull request 'Smoothie programmer do the job' (#1) from MrBlonde/canvas:smoothie into master 
Reviewed-on: djmil/canvas#1
 2024-06-22 23:03:26 +02:00
mrblondin
d01893c145 Smoothie programmer do the job 2024-06-22 22:54:58 +02:00
4 changed files with 35 additions and 18 deletions
Show Stats Expand all files Collapse all files

15
README.md Normal file
View File

@ -0,0 +1,15 @@
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 Normal file
View File

Binary file not shown.
Side by Side

After

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>Canvas</title> <title>Recursive tree</title>
<!-- <link rel="stylesheet" href="css/style.css"> --> <!-- <link rel="stylesheet" href="css/style.css"> -->
<style> <style>
canvas { canvas {
@ -21,12 +21,13 @@
<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,33 +1,34 @@
function stem(ctx, x1, y1, length, angle) { const angle2rad = angle => angle * (Math.PI / 180)
// Визначити координати кіня стовбура знаючи почткову точку стовбура, його довжину та кут нахилу. Так, це тригонометрія в дії :)
var x2 = x1 + length * Math.sin(angle * (Math.PI /180)); const stem = (ctx, x1, y1, length, angle) => {
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(angle * (Math.PI /180)); x2 = x1 + (length * 0.95) * Math.sin(alpha);
y2 = y1 - (length * 0.95) * Math.cos(angle * (Math.PI /180)); y2 = y1 - (length * 0.95) * Math.cos(alpha);
} }
if (length > 1) { if (length > 1) {
var rnd1 = Math.random() *20 -10; // [-10.0 .. +10.0] const rnd1 = Math.random() *20 -10; // [-10.0 .. +10.0]
var rnd2 = Math.random() *0.2 +0.6; // [ 0.6 .. 0.8] 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 + 35 +rnd1);
stem(ctx, x2, y2, length * rnd2, angle - 25 +rnd1); stem(ctx, x2, y2, length * rnd2, angle - 25 +rnd1);
} }
} }
function tree(ctx, x, y, height) { const tree = (ctx, x, y, height) => stem(ctx, x, y, height, 0);
stem(ctx, x, y, height, 0);
}