From 5bd6f98c6eab38384f7a52c476c2900d4ae59b2a Mon Sep 17 00:00:00 2001
From: kiruma524 <71787194+kiruma524@users.noreply.github.com>
Date: Wed, 28 Jul 2021 14:49:52 +0300
Subject: [PATCH] Add files via upload

---
 docs/tutorial.md | 207 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 docs/tutorial.md

diff --git a/docs/tutorial.md b/docs/tutorial.md
new file mode 100644
index 00000000..5d8bc1e3
--- /dev/null
+++ b/docs/tutorial.md
@@ -0,0 +1,207 @@
+#Tutorial
+
+###The main goal of this tutorial is to show all capabilities of ... (this part will be supplemented)
+
+The simple visualization can be made with function `main`. (this part will be supplemented as well)
+```kotlin
+import kotlinx.html.div
+import space.kscience.dataforge.context.Context
+import space.kscience.visionforge.html.ResourceLocation
+import space.kscience.visionforge.solid.*
+import java.nio.file.Paths
+
+fun main(){
+    val context = Context{
+        plugin(Solids)
+    }
+
+    context.makeVisionFile (
+        Paths.get("customFile.html"),
+        resourceLocation = ResourceLocation.EMBED
+    ){
+        div {
+            vision {
+                solid {
+                }
+            }
+        }
+    }
+}
+```
+##Solids properties
+**We will analyze which basic properties solids have using `box` solid.**
+
+Basic properties:
+1. `opacity` - It is set in `float`. It takes on values from 0 to 1, which represent percents of solid opacity. It's initial value is 1.
+2. `color` - It can be specified as `Int`, `String`, or as three `Ubytes`, which represent color in `rgb`. Elementally, the solid will have `green` color.
+3. `rotation` - it's the point, around which the solid will be rotated. Initially, the value is `Point3D(0, 0, 0)`
+4. position, which is given by values `x`, `y`, `z`. Initial values are `x = 0`, `y = 0`, `z = 0`
+
+Let's see how properties are set in solids.
+The `small box` will have elemental values of properties. If you will not set properties, it will have the same `position`, `color`, `rotation`, and `opacity` values.
+
+***You can see that `box` take four values. Later, we will discuss what they are doing in more detail. Now, it does not really matter.***
+```kotlin
+box(10, 10, 10, name = "small box"){
+   x = 0
+   y = 0
+   z = 0
+   opacity = 1 //100% opacity
+   color("red") //as string
+   rotation = Point3D(0, 0, 0)
+}
+```
+![](../docs/images/small box.png)
+
+The `big box` will have properties with custom values. 
+```kotlin
+box(40, 40, 40, name = "big box"){
+   x = 20
+   y = 10
+   z = 60
+   opacity = 0.5 //50% opacity
+   color(0u, 179u, 179u) //color in rgb
+   rotation = Point3D(60, 80, 0)
+}
+```
+![](../docs/images/big rotated box.png)
+If we compare these boxes, we will see all differences. 
+
+Here is the function `main` with both boxes.
+```kotlin
+fun main(){
+    val context = Context{
+        plugin(Solids)
+    }
+
+    context.makeVisionFile (
+        Paths.get("customFile.html"),
+        resourceLocation = ResourceLocation.EMBED
+    ){
+        div {
+            vision {
+                solid {
+                   box(10, 10, 10, name = "small box"){
+                      x = 0
+                      y = 0
+                      z = 0
+                      opacity = 1 //100% opacity
+                      color("red") //as string
+                      rotation = Point3D(0, 0, 0)
+                   }
+                   box(40, 40, 40, name = "big box"){
+                      x = 20
+                      y = 10
+                      z = 60
+                      opacity = 0.5 //50% opacity
+                      color(0u, 179u, 179u) //rgb
+                      rotation = Point3D(60, 80, 0)
+                   }
+                }
+            }
+        }
+    }
+}
+```
+![](../docs/images/two-boxes-1.png)
+![](../docs/images/two-boxes-2.png)
+
+###Basic Solids
+Now, let's see which solids can be visualized:
+1) PolyLine
+2) Box
+   ```kotlin
+   box(50, 50, 50, name = "box") {
+        x = 0
+        y = 0
+        z = 0
+        color("pink")
+   }
+   ```
+   ![](../docs/images/box.png)
+   ```kotlin
+   box(10, 25, 10, name = "high_box") {
+        x = 0
+        y = 0
+        z = 0
+        color("black")
+   }
+   ```
+   ![](../docs/images/high-box.png)
+   
+   ```kotlin
+   box(65, 40, 40, name = "wide_box") {
+        x = 0
+        y = 0
+        z = 0
+        color("black")
+   }
+   ```
+   ![](../docs/images/wide-box.png)
+   
+3) Sphere
+   ```kotlin
+   sphere(50, name = "sphere") {
+        x = 0
+        y = 0
+        z = 0
+        color("blue")
+   }
+   ```
+   ![](../docs/images/sphere.png)
+4) Hexagon
+   ```kotlin
+   hexagon(
+        Point3D(25, 30, 25),
+        Point3D(35, 30, 25),
+        Point3D(35, 30, 15),
+        Point3D(25, 30, 15),
+        Point3D(30, 18, 20),
+        Point3D(40, 18, 20),
+        Point3D(40, 18, 10),
+        Point3D(30, 18, 10),
+        name = "classic_hexagon"){
+        color("green")
+   }
+   ```
+   ![](../docs/images/classic-hexagon.png)
+   ```kotlin
+   hexagon(
+        Point3D(5, 30, 5),
+        Point3D(24, 30, 8),
+        Point3D(20, 30, -10),
+        Point3D(5, 30, -7),
+        Point3D(8, 16, 0),
+        Point3D(12, 16, 0),
+        Point3D(10, 16, -5),
+        Point3D(6.5, 12, -3),
+        name = "custom_hexagon"){
+        color("brown")
+   }
+   ```
+   ![](../docs/images/custom-hexagon.png)
+5) Cone
+   ```kotlin
+   cone(60, 80, name = "cone") {
+         x = 0
+         y = 0
+         z = 0
+         color("beige")
+   }
+   ```
+   ![](../docs/images/cone-1.png)
+   ![](../docs/images/cone-2.png)
+6) Cone Surface
+   ```kotlin
+   coneSurface(60, 50, 30, 10, 100, name = "cone_surface") {
+        x = 0
+        y = 0
+        z = 0
+        color("red")
+        rotation = Point3D(2, 50, -9)
+   }
+   ```
+   ![](../docs/images/cone-surface-1.png)
+   ![](../docs/images/cone-surface-2.png)
+7) Extruded
+