Tutorial and images #49

Merged
kiruma524 merged 13 commits from dev into master 2021-07-29 17:08:05 +03:00
32 changed files with 218 additions and 12 deletions

View File

@ -19,7 +19,7 @@
* [visionforge-gdml](#visionforge-gdml)
* [Visualization for External Systems](#visualization-for-external-systems)
* [Demonstrations](#demonstrations)
* [Simple Example - Spatial Showcase](#simple-example---spatial-showcase)
* [Simple Example - Solid Showcase](#simple-example---solid-showcase)
* [Full-Stack Application Example - Muon Monitor](#full-stack-application-example---muon-monitor-visualization)
* [GDML Example](#gdml-example)
@ -118,16 +118,16 @@ The `demo` module contains several example projects (demonstrations) of using th
They are briefly described in this section, for more details please consult the corresponding per-project
README file.
### Simple Example - Spatial Showcase
### Simple Example - Solid Showcase
Contains a simple demonstration with a grid including a few shapes that you can rotate, move camera, and so on.
Some shapes will also periodically change their color and visibility.
[More details](demo/spatial-showcase/README.md)
[More details](demo/solid-showcase/README.md)
**Example view:**
![](docs/images/spatial-showcase.png)
![](docs/images/solid-showcase.png)
### Full-Stack Application Example - Muon Monitor Visualization
@ -156,4 +156,4 @@ Visualization example for geometry defined as GDML file.
## Thanks and references
The original three.js bindings were made by [Lars Ivar Hatledal](https://github.com/markaren), but the project is discontinued right now.
All other libraries are explicitly shown as dependencies. We would like to express specific thanks to JetBrains Kotlin-JS team for consulting us during the work.
All other libraries are explicitly shown as dependencies. We would like to express specific thanks to JetBrains Kotlin-JS team for consulting us during the work.

View File

@ -1,12 +1,10 @@
### GDML Example
Visualization example for geometry defined as GDML file.
##### Building project
To build the app, run `demo/gdml/Tasks/distribution/jsBrowserDistribution` Gradle task, then open
`demo/gdml/build/distribuions/gdml-js-0.1.3-dev/index.html` file in your browser, and
To build the app, run `demo/gdml/Tasks/kotlin browser/jsBrowserDistribution` Gradle task, then
drag-and-drop GDML file to the window to see visualization. For an example file, you can use
`demo/gdml/src/jsMain/resources/cubes.gdml`.

View File

@ -26,9 +26,8 @@ with it.
##### Building project
To run full-stack Muon Monitor Visualization application (both JVM server and Web browser front-end),
run `demo/muon-monitor/application/run` task.
run `demo/muon-monitor/Tasks/application/run` task.
##### Example view:
![](../../docs/images/muon-monitor.png)

View File

@ -5,8 +5,8 @@ Some shapes will also periodically change their color and visibility.
##### Building project
To see the JS demo: run `demo/spatial-showcase/Tasks/distribution/jsBrowserDistribution` Gradle task, then open
`build/distribuions/spatial-showcase-js-0.1.3-dev/index.html` file in your browser.
To see the JS demo: run `demo/solid-showcase/Tasks/kotlin browser/jsBrowserRun` Gradle task, then open
`build/distribuions/solid-showcase-js-0.1.3-dev/index.html` file in your browser.
To see Java FX demo, run `demo/spatial-showcase/Tasks/application/run` Gradle task, or `main()` from `FXDemoApp.kt`.

BIN
docs/images/all-solids.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
docs/images/box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
docs/images/cone-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
docs/images/cone-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
docs/images/cylinder-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
docs/images/cylinder-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
docs/images/cylinder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
docs/images/high-box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
docs/images/scheme.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
docs/images/small-box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
docs/images/sphere.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docs/images/tube.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
docs/images/two-boxes-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
docs/images/two-boxes-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
docs/images/wide-box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

209
docs/tutorial.md Normal file
View File

@ -0,0 +1,209 @@
#Tutorial
CommanderTvis commented 2021-07-29 03:07:21 +03:00 (Migrated from github.com)
Review

The markdown syntax requires after hash symbol to make header.

# Tutorial
The markdown syntax requires ` ` after hash symbol to make header. ```suggestion # Tutorial ```
kiruma524 commented 2021-07-29 14:16:57 +03:00 (Migrated from github.com)
Review

Thank you, I'll fix

Thank you, I'll fix
###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