From 4af2ed3fed16d31dac67cfb26cdb6e1c04a882e7 Mon Sep 17 00:00:00 2001 From: Abe Pazos Date: Sat, 22 Nov 2025 18:16:54 +0000 Subject: [PATCH] add demos to README.md --- orx-color/README.md | 56 +++++++++++++++++++++++++++++++++- orx-mesh-generators/README.md | 57 ++++++++++++++++++++++++++++++++--- orx-shapes/README.md | 56 ++++++++++++++++++++++++++++++++++ orx-timer/README.md | 22 +++++++++++++- 4 files changed, 185 insertions(+), 6 deletions(-) diff --git a/orx-color/README.md b/orx-color/README.md index 5896c50b..623c76d3 100644 --- a/orx-color/README.md +++ b/orx-color/README.md @@ -51,7 +51,12 @@ Two color spaces are added: `ColorHSLUVa` and `ColorHPLUVa`, they are an impleme ## Demos ### colormap/DemoSpectralZucconiColormap +This program demonstrates the `spectralZucconi6()` function, which +takes a normalized value and returns a `ColorRGBa` using the +accurate spectral colormap developed by Alan Zucconi. +It draws a varying number of vertical bands (between 16 and 48) +filled with various hues. ![colormap-DemoSpectralZucconiColormapKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colormap-DemoSpectralZucconiColormapKt.png) @@ -59,7 +64,13 @@ Two color spaces are added: `ColorHSLUVa` and `ColorHPLUVa`, they are an impleme ### colormap/DemoSpectralZucconiColormapPhrase +This program demonstrates how to use the shader-based version of +the `spectral_zucconi6()` function, which +takes a normalized value and returns an `rgb` color using the +accurate spectral colormap developed by Alan Zucconi. +It shades a full-window rectangle using its normalized `x` coordinate +in a `ShadeStyle` to choose pixel colors. ![colormap-DemoSpectralZucconiColormapPhraseKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colormap-DemoSpectralZucconiColormapPhraseKt.png) @@ -67,7 +78,11 @@ Two color spaces are added: `ColorHSLUVa` and `ColorHPLUVa`, they are an impleme ### colormap/DemoSpectralZucconiColormapPlot +This demo uses the shader based `spectral_zucconi6()` function to fill the background, +then visualizes the red, green and blue components of the colors used in the background +as red, green and blue line strips. +The Vector2 points for the line strips are calculated only once when the program starts. ![colormap-DemoSpectralZucconiColormapPlotKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colormap-DemoSpectralZucconiColormapPlotKt.png) @@ -75,7 +90,12 @@ Two color spaces are added: `ColorHSLUVa` and `ColorHPLUVa`, they are an impleme ### colormap/DemoTurboColormap +This program demonstrates the `turboColormap()` function, which +takes a normalized value and returns a `ColorRGBa` using the +Turbo colormap developed by Google. +It draws a varying number of vertical bands (between 16 and 48) +filled with various hues. ![colormap-DemoTurboColormapKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colormap-DemoTurboColormapKt.png) @@ -83,7 +103,13 @@ Two color spaces are added: `ColorHSLUVa` and `ColorHPLUVa`, they are an impleme ### colormap/DemoTurboColormapPhrase +This program demonstrates how to use the shader-based version of +the `turbo_colormap()` function, which +takes a normalized value and returns an `rgb` color using the +Turbo colormap developed by Google. +It shades a full-window rectangle using its normalized `x` coordinate +in a `ShadeStyle` to choose pixel colors. ![colormap-DemoTurboColormapPhraseKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colormap-DemoTurboColormapPhraseKt.png) @@ -91,7 +117,11 @@ Two color spaces are added: `ColorHSLUVa` and `ColorHPLUVa`, they are an impleme ### colormap/DemoTurboColormapPlot +This demo uses the shader based `turbo_colormap()` function to fill the background, +then visualizes the red, green and blue components of the colors used in the background +as red, green and blue line strips. +The Vector2 points for the line strips are calculated only once when the program starts. ![colormap-DemoTurboColormapPlotKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colormap-DemoTurboColormapPlotKt.png) @@ -171,7 +201,8 @@ to position the images dynamically based on their index within the grid. ### colorRange/DemoColorRange01 - +Comparison of color lists generated by interpolating from +`PINK` to `BLUE` in six different color spaces. ![colorRange-DemoColorRange01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colorRange-DemoColorRange01Kt.png) @@ -179,7 +210,13 @@ to position the images dynamically based on their index within the grid. ### colorRange/DemoColorRange02 +Demonstrates how to create a `ColorSequence` containing three colors, one of them in the HSLUV color space. +Each color in the sequence is assigned a normalized position: in this program, one at the start (0.0), +one in the middle (0.5) and one at the end (1.0). + +The `ColorSpace.blend()` method is used to get a list with 18 interpolated `ColorRGBa` colors, +then those colors are drawn as vertical rectangles covering the whole window. ![colorRange-DemoColorRange02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colorRange-DemoColorRange02Kt.png) @@ -187,7 +224,13 @@ to position the images dynamically based on their index within the grid. ### colorRange/DemoColorRange03 +This program creates color interpolations from `ColorRGBa.BLUE` to +`ColorRGBa.PINK` in 25 steps in multiple color spaces. +The window height is adjusted based on the number of interpolations to show. + +The resulting gradients differ in saturation and brightness and apparently include more +`BLUE` or more `PINK` depending on the chosen color space. ![colorRange-DemoColorRange03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colorRange-DemoColorRange03Kt.png) @@ -195,6 +238,17 @@ to position the images dynamically based on their index within the grid. ### colorRange/DemoColorRange04 +A visualization of color interpolations inside a 3D RGB cube with an interactive 3D `Orbital` camera. + +The hues of the source and target colors are animated over time. + +The color interpolations are shown simultaneously in nine different color spaces, revealing how in +each case they share common starting and ending points in 3D, but have unique paths going from +start to end. + +By rotating the cube 90 degrees towards the left and slightly zooming out, one can appreciate how +one of the points moves along the edges of the cube, while the other moves on the edges of a +smaller, invisible cube. ![colorRange-DemoColorRange04Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-color/images/colorRange-DemoColorRange04Kt.png) diff --git a/orx-mesh-generators/README.md b/orx-mesh-generators/README.md index 1b5ed903..489b8da4 100644 --- a/orx-mesh-generators/README.md +++ b/orx-mesh-generators/README.md @@ -105,7 +105,15 @@ Demonstrate decal generation and rendering ### DemoAll +Demonstrates how to create various types of 3D meshes: +box, sphere, dodecahedron, cylinder, plane, cap and resolve. +Two textures are used: one generative with gradients, and the second +one is an image loaded from disk. The horizontal mouse position is used +to select which of the two textures to use. + +The meshes are positioned in space using a 2D mesh, and displayed +rotating on the X and Y axes at different speeds. ![DemoAllKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoAllKt.png) @@ -113,6 +121,18 @@ Demonstrate decal generation and rendering ### DemoBox +Demonstrates how to create a 3D mesh box by specifying its width, height and depth. + +The `box` is a `VertexBuffer` and contains texture coordinates which can be +used to apply a texture to its faces. + +After creating the box, the program creates a texture with a gradient. +In it, the red component increases along the x-axis and the green component +along the y-axis. + +The scene is rendered with an interactive `Orbital` 3D camera. + +A shade style is used to apply the texture to the box. ![DemoBoxKt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoBoxKt.png) @@ -121,7 +141,15 @@ Demonstrate decal generation and rendering ### DemoComplex01 +Demonstrates how to use `buildTriangleMesh` to construct composite 3D meshes. +A DSL allows specifying the color and transformations of each mesh, in this case, +of a sphere and a box. + +An interactive 3D Orbital camera is defined, specifying the location of its `eye` and +`lookAt` properties. + +A minimal shade style is used to simulate a uni-directional light pointing along the view Z axis. ![DemoComplex01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoComplex01Kt.png) @@ -129,7 +157,7 @@ Demonstrate decal generation and rendering ### DemoComplex02 - +Demonstrates the creation of a 3D mesh composed of two hemispheres, a cylinder and 12 legs. ![DemoComplex02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoComplex02Kt.png) @@ -137,7 +165,14 @@ Demonstrate decal generation and rendering ### DemoComplex03 +Demonstrates the creation of a 3D mesh composed of two hemispheres, a cylinder and 12 legs. +Additionally, the body of the shape features 5 ridges on the sides +of the cylinder. +The code reveals DSL keywords under `buildTriangleMesh` +affecting transformation matrices, for instance `isolated`, `translate` and `rotate`, +and mesh generating keywords like +`hemisphere`, `taperedCylinder` and `cylinder`. ![DemoComplex03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoComplex03Kt.png) @@ -145,7 +180,9 @@ Demonstrate decal generation and rendering ### DemoComplex04 - +Demonstrates the use of `buildTriangleMesh` to create +a composite 3D mesh and introduces a new mesh generating keyword: +`cap`. ![DemoComplex04Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoComplex04Kt.png) @@ -153,6 +190,9 @@ Demonstrate decal generation and rendering ### DemoComplex05 +Demonstrates how to create a 3D grid of extruded shapes +(short cylinders), then applies three 3D twists to the +composition to deform it. ![DemoComplex05Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoComplex05Kt.png) @@ -161,8 +201,11 @@ Demonstrate decal generation and rendering ### DemoComplex06 -Generates a grid of grids of boxes. -Interactive orbital camera. +Generates a grid of grids of 3D boxes using `buildTriangleMesh` and +renders them using an interactive orbital camera. + +The cubes ar colorized using a shade style that sets colors based +on vertex positions in space, converting XYZ coordinates into RGB colors. ![DemoComplex06Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/DemoComplex06Kt.png) @@ -270,7 +313,13 @@ for a radial-symmetry effect. ### tangents/DemoTangents01 +Tangent and bitangent vectors are used in shader programs for tangent space normal mapping / lighting +and certain forms of displacement mapping. +This demo shows: +- how to create a triangulated `MeshData`. +- how to estimate the tangents of this MeshData. +- How to use the tangent and bitangent attributes in GLSL code. ![tangents-DemoTangents01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-mesh-generators/images/tangents-DemoTangents01Kt.png) diff --git a/orx-shapes/README.md b/orx-shapes/README.md index 8d770994..7d9122f1 100644 --- a/orx-shapes/README.md +++ b/orx-shapes/README.md @@ -465,6 +465,31 @@ to round contours with linear segments. [source code](src/jvmDemo/kotlin/hobbycurve/DemoHobbyCurve03.kt) +### hobbycurve/DemoHobbyCurve04 + +Demonstrates the use of the `tensions` argument when creating a Hobby curve. + +The program starts by creating a random set of scattered points with enough separation between them. +The points are sorted using `hilbertOrder` to minimize the travel distance when visiting all the points. +Finally, we draw a set of 40 hobby translucent curves using those same points but with varying tensions. + +![hobbycurve-DemoHobbyCurve04Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/hobbycurve-DemoHobbyCurve04Kt.png) + +[source code](src/jvmDemo/kotlin/hobbycurve/DemoHobbyCurve04.kt) + +### hobbycurve/DemoHobbyCurve05 + +Demonstrates the creation of a 40 hobby curves with 10 points each. +The control points in all hobby curves are almost identical, varying only +due to a slight increase in one of the arguments of a simplex noise call. + +The program shows that minor displacements in control points can have +a large impact in the resulting curve. + +![hobbycurve-DemoHobbyCurve05Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/hobbycurve-DemoHobbyCurve05Kt.png) + +[source code](src/jvmDemo/kotlin/hobbycurve/DemoHobbyCurve05.kt) + ### hobbycurve/DemoHobbyCurve3D01 Demonstrates how to use the 3D implementation of the `hobbyCurve` method, to draw a smooth curve passing @@ -678,6 +703,22 @@ Demonstrate rectangle-rectangle intersection [source code](src/jvmDemo/kotlin/primitives/DemoRectangleIntersection01.kt) +### primitives/DemoRectangleIrregularGrid02 + +Demonstrates how to use `Rectangle.irregularGrid()` to create a grid with varying column widths +and row heights. The widths and heights are specified as a list of 13 `Double` values, each +picked randomly between the values 1.0 and 4.0. This produces two types of columns and two +types of rows only: wide ones and narrow ones. + +The program also demonstrates how to query a `row()` and a `column()` from a `RectangleGrid` instance, +both of which return a `List`. Both `Rectangle` lists are rendered with translucent +colors, which makes the intersection of the column and the row slightly brighter. + + +![primitives-DemoRectangleIrregularGrid02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/primitives-DemoRectangleIrregularGrid02Kt.png) + +[source code](src/jvmDemo/kotlin/primitives/DemoRectangleIrregularGrid02.kt) + ### primitives/DemoRectangleIrregularGrid @@ -749,6 +790,21 @@ This serves as a demonstration of positioning and rendering shapes in a structur [source code](src/jvmDemo/kotlin/primitives/DemoTear01.kt) +### primitives/DemoTear02 + +Demonstrates the use of `Tear()` to create drop-like shapes out of a Vector2 point and a Circle. + +The tear locations are calculated using the `Rectangle.scatter()` function. Locations near the +center of the window are filtered out. + +The radii of each tear is randomly chosen between three values. The orientation of each tear +is calculated by getting the normalized difference between the tear and the center of the window, +making them look as being emitted at the center of the window. + +![primitives-DemoTear02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/primitives-DemoTear02Kt.png) + +[source code](src/jvmDemo/kotlin/primitives/DemoTear02.kt) + ### rectify/DemoRectifiedContour01 diff --git a/orx-timer/README.md b/orx-timer/README.md index 1176a503..4e9207b0 100644 --- a/orx-timer/README.md +++ b/orx-timer/README.md @@ -37,6 +37,11 @@ Note that drawing inside the `repeat` action has no effect. Have a look at the d ## Demos ### DemoRepeat01 +A simple demonstration on using the `repeat` method to execute a function +at regular intervals. + +Note that drawing inside the repeat action has no effect. +See DemoRepeat02.kt to learn how to trigger drawing. ![DemoRepeat01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-timer/images/DemoRepeat01Kt.png) @@ -45,14 +50,29 @@ Note that drawing inside the `repeat` action has no effect. Have a look at the d ### DemoRepeat02 -This demonstrates how to combine `repeat {}` with a postponed event to trigger drawing +This demonstrates how to combine `repeat {}` with a postponed event to trigger drawing. ![DemoRepeat02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-timer/images/DemoRepeat02Kt.png) [source code](src/demo/kotlin/DemoRepeat02.kt) +### DemoRepeat03 + +Shows how a `repeat` block can update a variable used +for rendering. In this demo, the `opacity` variable is +reduced on every animation frame, and increased to 1.0 +every 2 seconds, creating a pulsating animation effect. + +![DemoRepeat03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-timer/images/DemoRepeat03Kt.png) + +[source code](src/demo/kotlin/DemoRepeat03.kt) + ### DemoTimeOut01 +Demonstrates the `timeOut` function. + +It is similar to the `repeat` function, +but it runs only once after the specified delay in seconds. ![DemoTimeOut01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-timer/images/DemoTimeOut01Kt.png)