JS Canvas graphical demo with pages capability
Go to file
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
cosin.jpg Readme 2024-06-23 13:24:25 +02:00
gitea-pages.toml allow all branches 2024-06-06 22:26:01 +02:00
index.html path slash problems 2024-06-23 14:36:43 +02:00
README.md Backlink from pages to the repo 2024-06-23 13:41:07 +02:00
tree.js Readme 2024-06-23 13:24:25 +02:00

A simple static HTML page using JavaScript Canvas to draw recurisive tree. Click here 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

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 for more details.