From 31c647419546ee7a6af549aa94294c98f07e573a Mon Sep 17 00:00:00 2001 From: Abe Pazos Date: Wed, 22 May 2024 18:12:43 +0200 Subject: [PATCH] Update docs --- docs/ORX/quickUIs.markdown | 48 +----------- docs/useCases/liveCoding.markdown | 118 +++++++++++++++++++----------- 2 files changed, 77 insertions(+), 89 deletions(-) diff --git a/docs/ORX/quickUIs.markdown b/docs/ORX/quickUIs.markdown index 47b2106..18c3a10 100644 --- a/docs/ORX/quickUIs.markdown +++ b/docs/ORX/quickUIs.markdown @@ -4,7 +4,7 @@ layout: default title: Quick UIs parent: ORX -last_modified_at: 2024.05.22 14:14:10 +0200 +last_modified_at: 2024.05.22 16:04:58 +0200 nav_order: 180 has_children: false --- @@ -246,52 +246,6 @@ We now see that the sidebar is populated with a _settings_, _Multiply blend_, _Blue layer_, and an _Approximate gaussian blur_ compartment. This creates composites that are easy to tweak. -## Live-coding workflow - -`orx-gui` is built with the `orx-olive` environment in mind. -Its use is similar to the workflows described prior, however, in live -mode the ui comes with some extra features to make live-coding more fun. -Compartments can be added and removed from the .kts script. The best -part is that `orx-gui` can retain parameter settings between script -changes by default, so nothing jumps around. - -In the case of using `orx-gui` from an olive script (`live.kts`) it looks like this - -```kotlin -@file:Suppress("UNUSED_LAMBDA_EXPRESSION") -import org.openrndr.Program -import org.openrndr.color.ColorRGBa -import org.openrndr.draw.* -import org.openrndr.extra.compositor.compose -import org.openrndr.extra.compositor.draw -import org.openrndr.extra.compositor.layer -import org.openrndr.extra.compositor.post -import org.openrndr.extra.gui.GUI -import org.openrndr.extra.parameters.* - -{ program: Program -> - program.apply { - val gui = GUI() - val settings = @Description("User settings") object : Reloadable() { - @DoubleParameter("x", 0.0, 1000.0) - var x = 0.0 - } - val composite = compose { - draw { - drawer.clear(ColorRGBa.PINK) - drawer.circle(settings.x, height / 2.0, 100.0) - } - } - extend(gui) { - add(settings) - } - extend() { - composite.draw(drawer) - } - } -} -``` - ## Parameter annotations We have seen some of the annotations in the workflow descriptions diff --git a/docs/useCases/liveCoding.markdown b/docs/useCases/liveCoding.markdown index 05ffa7e..03ee287 100644 --- a/docs/useCases/liveCoding.markdown +++ b/docs/useCases/liveCoding.markdown @@ -4,7 +4,7 @@ layout: default title: Live coding parent: Use cases -last_modified_at: 2024.04.04 18:44:14 +0200 +last_modified_at: 2024.05.22 16:59:54 +0200 nav_order: 130 has_children: false --- @@ -21,8 +21,7 @@ and additional documentation for the library can be found in the Assuming you are working on an [`openrndr-template`](https://github.com/openrndr/openrndr-template) based -project, all you have to do is enable `orx-olive` in the `orxFeatures` -set in `build.gradle.kts` and reimport the gradle project. +project, `orx-olive` is enabled by default. ## Basic example @@ -32,69 +31,75 @@ fun main() = application { width = 768 height = 576 } - program { - extend(Olive()) + oliveProgram { + extend { + // drawer.fill = ColorRGBa.PINK + drawer.rectangle(0.0, 0.0, 100.0, 200.0) + } } } ``` -When running this script you will see a file called `live.kts` appear -in `src/main/kotlin`. When you edit -this file you will see that changes are automatically detected -(after save) and that the program reloads. +Try editing the source code to change the fill color of the rectangle +(or any other property) and save your changes. +The new color should appear instantly without having to re-run the +program. ## Interaction with extensions -The Olive extension works well together with other extensions, but only -those which are installed before the Olive extension. In the following -example we see the use of `Orbital` in combination with `Olive`. +The Olive extension works well together with other extensions. +In the following example we see the use of `Camera2D` in +combination with `Olive`. ```kotlin fun main() = application { - program { - extend(Orbital()) - extend(Olive()) + oliveProgram { + extend(Camera2D()) + extend { + drawer.rectangle(0.0, 0.0, 100.0, 200.0) + } } } ``` -## Adding script drag/drop support +## Adding persistent state +Sometimes you want to keep parts of your application persistent, that +means its state will survive a script reload. -A simple trick to turn your live coding host program into a versatile -live coding environment is to add file drop support. With this enabled -one can drag a .kts file onto the window and drop it to load the script file. +This is how we can make the `Camera2D` from the previous example +persistent: ```kotlin fun main() = application { - program { - extend(Olive()) { - this@program.window.drop.listen { - this.script = it.files.first() + oliveProgram { + val camera by Once { + persistent { + Camera2D() } } + extend(camera) + extend { + drawer.rectangle(0.0, 0.0, 100.0, 200.0) + } } } ``` -## Adding persistent state - -Sometimes you want to keep parts of your application persistent, that -means its state will survive a script reload. -In the following example we show how you can prepare the host program -to contain a persistent camera device. +The same approach can be used to maintain a persistent connection +to a webcam: ```kotlin fun main() = application { oliveProgram { - val camera by Once { + val webcam by Once { persistent { VideoPlayerFFMPEG.fromDevice() } } - camera.play() + webcam.play() extend { - camera.colorBuffer?.let { + webcam.colorBuffer?.let { drawer.image(it, 0.0, 0.0, 128.0, 96.0) } } @@ -102,24 +107,53 @@ fun main() = application { } ``` -Note that when you create a custom host program you also have to adjust -script files to include the program type. For example `live.kts` would -become like this. +## GUI workflow + +`orx-gui` is built with the `orx-olive` environment in mind. +Its use is similar to the workflows described prior, however, in live +mode the ui comes with some extra features to make live-coding more fun. +The best part is that `orx-gui` can retain parameter settings between script +changes by default, so nothing jumps around. + +Notice the use of `Reloadable()` in the `settings` object. ```kotlin @file:Suppress("UNUSED_LAMBDA_EXPRESSION") +import org.openrndr.Program import org.openrndr.color.ColorRGBa import org.openrndr.draw.* +import org.openrndr.extra.compositor.compose +import org.openrndr.extra.compositor.draw +import org.openrndr.extra.compositor.layer +import org.openrndr.extra.compositor.post +import org.openrndr.extra.gui.GUI +import org.openrndr.extra.parameters.* -{ program: PersistentProgram -> - program.apply { +fun main() = application { + configure { + width = 800 + height = 800 + } + oliveProgram { + val gui = GUI() + val settings = @Description("User settings") object : Reloadable() { + @DoubleParameter("x", 0.0, 1000.0) + var x = 0.0 + } + val composite = compose { + draw { + drawer.clear(ColorRGBa.PINK) + drawer.circle(settings.x, height / 2.0, 100.0) + } + } + extend(gui) { + add(settings) + } extend { - camera.next() - drawer.drawStyle.colorMatrix = tint(ColorRGBa.GREEN) * grayscale(0.0, 0.0, 1.0) - camera.draw(drawer) + composite.draw(drawer) } } -} -``` +} +``` [edit on GitHub](https://github.com/openrndr/openrndr-guide/blob/main/src/main/kotlin/docs/95_Use_cases/C130_Live_coding.kt){: .btn .btn-github } \ No newline at end of file