diff --git a/README.md b/README.md index c9312320..621f474f 100644 --- a/README.md +++ b/README.md @@ -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. \ No newline at end of file +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. diff --git a/demo/gdml/README.md b/demo/gdml/README.md index 6ad546f1..5c2a5abe 100644 --- a/demo/gdml/README.md +++ b/demo/gdml/README.md @@ -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`. diff --git a/demo/muon-monitor/README.md b/demo/muon-monitor/README.md index 87b3cf43..df95c968 100644 --- a/demo/muon-monitor/README.md +++ b/demo/muon-monitor/README.md @@ -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) - diff --git a/demo/solid-showcase/README.md b/demo/solid-showcase/README.md index 20866220..f8771e13 100644 --- a/demo/solid-showcase/README.md +++ b/demo/solid-showcase/README.md @@ -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`. diff --git a/docs/images/all-solids.png b/docs/images/all-solids.png new file mode 100644 index 00000000..9be7b40e Binary files /dev/null and b/docs/images/all-solids.png differ diff --git a/docs/images/big-rotated-box.png b/docs/images/big-rotated-box.png new file mode 100644 index 00000000..7b7cdc14 Binary files /dev/null and b/docs/images/big-rotated-box.png differ diff --git a/docs/images/box.png b/docs/images/box.png new file mode 100644 index 00000000..6824b2d3 Binary files /dev/null and b/docs/images/box.png differ diff --git a/docs/images/classic-hexagon.png b/docs/images/classic-hexagon.png new file mode 100644 index 00000000..f0053ae4 Binary files /dev/null and b/docs/images/classic-hexagon.png differ diff --git a/docs/images/cone-1.png b/docs/images/cone-1.png new file mode 100644 index 00000000..47272f24 Binary files /dev/null and b/docs/images/cone-1.png differ diff --git a/docs/images/cone-2.png b/docs/images/cone-2.png new file mode 100644 index 00000000..1f552182 Binary files /dev/null and b/docs/images/cone-2.png differ diff --git a/docs/images/cone-segment-1.png b/docs/images/cone-segment-1.png new file mode 100644 index 00000000..b5900555 Binary files /dev/null and b/docs/images/cone-segment-1.png differ diff --git a/docs/images/cone-segment-2.png b/docs/images/cone-segment-2.png new file mode 100644 index 00000000..033c1c73 Binary files /dev/null and b/docs/images/cone-segment-2.png differ diff --git a/docs/images/cone-surface-1.png b/docs/images/cone-surface-1.png new file mode 100644 index 00000000..dad20dda Binary files /dev/null and b/docs/images/cone-surface-1.png differ diff --git a/docs/images/cone-surface-2.png b/docs/images/cone-surface-2.png new file mode 100644 index 00000000..7ec66315 Binary files /dev/null and b/docs/images/cone-surface-2.png differ diff --git a/docs/images/cone-surface-fragment-2.png b/docs/images/cone-surface-fragment-2.png new file mode 100644 index 00000000..2d8eaa99 Binary files /dev/null and b/docs/images/cone-surface-fragment-2.png differ diff --git a/docs/images/cone-surface-fragment.png b/docs/images/cone-surface-fragment.png new file mode 100644 index 00000000..2d82835f Binary files /dev/null and b/docs/images/cone-surface-fragment.png differ diff --git a/docs/images/custom-hexagon.png b/docs/images/custom-hexagon.png new file mode 100644 index 00000000..5245fa9f Binary files /dev/null and b/docs/images/custom-hexagon.png differ diff --git a/docs/images/cylinder-1.png b/docs/images/cylinder-1.png new file mode 100644 index 00000000..2e5869bc Binary files /dev/null and b/docs/images/cylinder-1.png differ diff --git a/docs/images/cylinder-2.png b/docs/images/cylinder-2.png new file mode 100644 index 00000000..88c406bf Binary files /dev/null and b/docs/images/cylinder-2.png differ diff --git a/docs/images/cylinder.png b/docs/images/cylinder.png new file mode 100644 index 00000000..fef58bf5 Binary files /dev/null and b/docs/images/cylinder.png differ diff --git a/docs/images/frustum-cone-segment.png b/docs/images/frustum-cone-segment.png new file mode 100644 index 00000000..96e4170f Binary files /dev/null and b/docs/images/frustum-cone-segment.png differ diff --git a/docs/images/frustum-cone.png b/docs/images/frustum-cone.png new file mode 100644 index 00000000..e5f6786c Binary files /dev/null and b/docs/images/frustum-cone.png differ diff --git a/docs/images/high-box.png b/docs/images/high-box.png new file mode 100644 index 00000000..a3da5384 Binary files /dev/null and b/docs/images/high-box.png differ diff --git a/docs/images/scheme.png b/docs/images/scheme.png new file mode 100644 index 00000000..baa6a877 Binary files /dev/null and b/docs/images/scheme.png differ diff --git a/docs/images/small-box.png b/docs/images/small-box.png new file mode 100644 index 00000000..4ebc0cb3 Binary files /dev/null and b/docs/images/small-box.png differ diff --git a/docs/images/sphere.png b/docs/images/sphere.png new file mode 100644 index 00000000..63caacae Binary files /dev/null and b/docs/images/sphere.png differ diff --git a/docs/images/tube-fragment.png b/docs/images/tube-fragment.png new file mode 100644 index 00000000..e2a20ebe Binary files /dev/null and b/docs/images/tube-fragment.png differ diff --git a/docs/images/tube.png b/docs/images/tube.png new file mode 100644 index 00000000..3664be34 Binary files /dev/null and b/docs/images/tube.png differ diff --git a/docs/images/two-boxes-1.png b/docs/images/two-boxes-1.png new file mode 100644 index 00000000..58544e58 Binary files /dev/null and b/docs/images/two-boxes-1.png differ diff --git a/docs/images/two-boxes-2.png b/docs/images/two-boxes-2.png new file mode 100644 index 00000000..8acaaea5 Binary files /dev/null and b/docs/images/two-boxes-2.png differ diff --git a/docs/images/wide-box.png b/docs/images/wide-box.png new file mode 100644 index 00000000..762a76ac Binary files /dev/null and b/docs/images/wide-box.png differ diff --git a/docs/tutorial.md b/docs/tutorial.md new file mode 100644 index 00000000..9de1432b --- /dev/null +++ b/docs/tutorial.md @@ -0,0 +1,209 @@ +#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 +