add demos to README.md

This commit is contained in:
Abe Pazos
2025-08-27 18:32:18 +00:00
parent 1489b503d2
commit 700b666e5c
35 changed files with 1430 additions and 356 deletions

View File

@@ -17,26 +17,61 @@ _The code in `orx-composition` was previously found under `openrndr-draw` in the
<!-- __demos__ -->
## Demos
### DemoCompositionDrawer01
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer01.kt)
Demonstrates how to
- Create a Composition
- Draw it on the program window
- Save it to an SVG file
- Print the SVG content as text
![DemoCompositionDrawer01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-composition/images/DemoCompositionDrawer01Kt.png)
### DemoCompositionDrawer02
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer02.kt)
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer01.kt)
### DemoCompositionDrawer02
Demonstrates how to draw a Composition and how to use
`ClipMode.REVERSE_DIFFERENCE` to clip shapes.
The first shape clips part of the second one away,
producing a shape that seems to be behind the first one.
Without clipping, the second circle would cover part of the first one.
![DemoCompositionDrawer02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-composition/images/DemoCompositionDrawer02Kt.png)
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer02.kt)
### DemoCompositionDrawer03
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer03.kt)
Draws a composition using 3 circles and `ClipMode.REVERSE_DIFFERENCE`.
A println() demonstrates that the result contains 3 shapes:
a complete circle, a moon-like shape, and a shape with two small black areas.
One way to verify this is by saving the design as an SVG file and opening
it in vector editing software.
![DemoCompositionDrawer03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-composition/images/DemoCompositionDrawer03Kt.png)
### DemoCompositionDrawer04
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer04.kt)
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer03.kt)
### DemoCompositionDrawer04
Demonstrates how to add content to and how to clear an existing Composition.
A number of circles are added when the program starts.
Dragging the mouse button adds more circles.
Right-clicking the mouse clears the Composition.
![DemoCompositionDrawer04Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-composition/images/DemoCompositionDrawer04Kt.png)
### DemoCompositionDrawer05
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer05.kt)
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer04.kt)
### DemoCompositionDrawer05
Demonstrates how to
- Create a Composition with a group
- Add XML attributes so the group appears as a layer in Inkscape
![DemoCompositionDrawer05Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-composition/images/DemoCompositionDrawer05Kt.png)
[source code](src/jvmDemo/kotlin/DemoCompositionDrawer05.kt)