forked from kscience/visionforge
Add files via upload
This commit is contained in:
parent
eb3786c5ca
commit
5bd6f98c6e
207
docs/tutorial.md
Normal file
207
docs/tutorial.md
Normal file
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user