Delete 'gitea-pages.toml' from 'master'

revert
path slash problems
2024-11-12 21:39:13 +01:00 · 2024-06-23 14:38:29 +02:00 · 2024-06-23 14:36:43 +02:00 · 2024-06-23 13:41:07 +02:00 · 2024-06-23 13:24:25 +02:00 · 2024-06-23 12:09:42 +02:00
5 changed files with 35 additions and 19 deletions
--- a/README.md
+++ b/README.md
@ -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.
--- a/cosin.jpg
+++ b/cosin.jpg
--- a/gitea-pages.toml
+++ b/gitea-pages.toml
@ -1 +0,0 @@
-allowedrefs=["*"]
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html>
 <head>
    <meta charset="utf-8" />
-    <title>Canvas</title>
+    <title>Recursive tree</title>
 <!--    <link rel="stylesheet" href="css/style.css"> -->
 	<style>
 		canvas {
@ -21,12 +21,13 @@

 <section>
 	<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>

 <canvas id="tree" width="1000" height="750"></canvas>

 <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>
 </section>

--- a/tree.js
+++ b/tree.js
@ -1,33 +1,34 @@
-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));
+const angle2rad = angle => angle * (Math.PI / 180)
+
+const stem = (ctx, x1, y1, length, angle) => {
+	// Визначити координати кіня стовбура знаючи початкову точку, довжину та кут нахилу
+	// Так, це тригонометрія в дії :)
+    const alpha = angle2rad(angle);
+	let x2 = x1 + length * Math.sin(alpha);
+	let y2 = y1 - length * Math.cos(alpha);
 	
 	ctx.beginPath();
 	ctx.moveTo(x1, y1);
 	ctx.lineTo(x2, y2);
-	ctx.lineWidth=length/10; // тощина стовбура залежить від його довжини
+	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));
+		x2 = x1 + (length * 0.95) * Math.sin(alpha);
+		y2 = y1 - (length * 0.95) * Math.cos(alpha);
 	}

    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]
+		const rnd1 = Math.random() *20  -10;  // [-10.0 .. +10.0]
+		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 - 25 +rnd1);
 	}
 }

-function tree(ctx, x, y, height) {
-
-	stem(ctx, x, y, height, 0);
-
-}
+const tree = (ctx, x, y, height) => stem(ctx, x, y, height, 0);
Author	SHA1	Message	Date
djmil	8908ef5b2a	Delete 'gitea-pages.toml' from 'master'	2024-11-12 21:39:13 +01:00
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