diff --git a/orx-shade-styles/README.md b/orx-shade-styles/README.md index 327589fe..407bff04 100644 --- a/orx-shade-styles/README.md +++ b/orx-shade-styles/README.md @@ -10,7 +10,14 @@ Shader based fills and strokes, including various types of gradient fills. ## Demos ### clip/DemoClip01 +Animated demonstration on how to use the `clip` shade style to mask-out +part of an image (or anything else drawn while the shade style is active). +The clipping uses the `CONTAIN` fit mode. +This example uses a rotating `star`-shaped clipping with 24 sides. +Other available clipping shapes are `circle`, `rectangle`, `line` and `ellipse`. + +Press a mouse button to toggle the `feather` property between 0.0 and 0.5. ![clip-DemoClip01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/clip-DemoClip01Kt.png) @@ -18,7 +25,15 @@ Shader based fills and strokes, including various types of gradient fills. ### clip/DemoClip02 +Animated demonstration on how to use the `clip` shade style to mask-out +part of an image (or anything else drawn while the shade style is active). +The clipping uses different fit modes on each row, and different aspect +ratios in each column. +This example uses a rotating `star`-shaped clipping with 24 sides. +Other available clipping shapes are `circle`, `rectangle`, `line` and `ellipse`. + +Press a mouse button to toggle the `feather` property between 0.0 and 0.5. ![clip-DemoClip02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/clip-DemoClip02Kt.png) @@ -26,7 +41,15 @@ Shader based fills and strokes, including various types of gradient fills. ### clip/DemoClip03 +Animated demonstration on how to use the `clip` shade style to mask-out +part of an image (or anything else drawn while the shade style is active). +The clipping uses different fit modes on each row, and different aspect +ratios in each column. +This example uses a rotating `ellipse`-shaped clipping. +Other available clipping shapes are `circle`, `rectangle`, `line` and `star`. + +Press a mouse button to toggle the `feather` property between 0.0 and 0.5. ![clip-DemoClip03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/clip-DemoClip03Kt.png) @@ -34,19 +57,12 @@ Shader based fills and strokes, including various types of gradient fills. ### composed/DemoComposed01 -The main entry point of the application that sets up the visual program. +Demonstrates how to combine two shade styles +(a conic gradient and a rounded star clipping) +by using the `+` operator. -This method creates a graphical program with a 720x720 window and uses a rotating -gradient-shaded rectangle as the primary visual element. It demonstrates the use -of gradient shading and clipping through a compositional approach. - -The method performs the following actions: -1. Configures the application window size. -2. Constructs a conic gradient with a rotation of 54 degrees and full circular coverage. -3. Creates a star-shaped clip with configurable sharpness, radius, and number of sides. -4. Combines the gradient and clip into a composite shading style. -5. Defines a program loop where the rectangle with the gradient and clip combination -rotates around the center of the canvas while being redrawn continuously. +The design is animated by applying a rotation transformation matrix +based in the `seconds` variable. ![composed-DemoComposed01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/composed-DemoComposed01Kt.png) @@ -54,7 +70,12 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient01 - +Demonstrates how to create 4 animated gradient shade-styles with 5 colors: +- a linear gradient +- a stellar gradient +- a radial gradient +- a linear gradient with `SpreadMethod.REPEAT` +Each gradient style has different adjustable attributes. ![gradients-DemoGradient01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient01Kt.png) @@ -62,7 +83,16 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient02 +An application with two animated layers of slightly different stellar shade styles. +The bottom layer features a rectangle, while the top layer includes a large text +repeated 5 times. + +The only different between the two shade styles is a minor change in the `levelWarp` +function, which is used to alter the gradient's level (its normalized `t` value) +based on the current coordinates being processed, and the original level at this location. + +Without this difference, the shader would look identical, and the text would be invisible. ![gradients-DemoGradient02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient02Kt.png) @@ -70,7 +100,9 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient03 - +Demonstrates how to create a rainbow-like rotating `conic` gradient in `OKHSV` color space. +The gradient consists of ten evenly spaced colors, achieved by shifting the hue of a base color. +Since the conic gradient covers 360 degrees, changing the `spreadMethod` does not affect the result. ![gradients-DemoGradient03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient03Kt.png) @@ -78,7 +110,13 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient04 +Creates a 3x3 grid of gradients demonstrating how the same gradient can look different depending on +the aspect ratio of the target shape and the fit method used. +The first column features a vertical rectangle. +The second one, a square, and the third one a horizontal rectangle. + +The rows feature the different fit methods: `FillFit.STRETCH`, `FillFit.COVER` and `FillFit.CONTAIN`. ![gradients-DemoGradient04Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient04Kt.png) @@ -86,6 +124,13 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient05 +Reveals the effect of using quantization on a `conic` gradient. +By using a `quantization` of 10 we get 9 color bands. + +Notice how the center of the `conic` gradient is specified in +screen coordinates. To make this possible, we need to set the +`fillUnits` to `FillUnits.WORLD`. By default, the center of +the gradient coordinates is `Vector2(0.5, 0.5)`. ![gradients-DemoGradient05Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient05Kt.png) @@ -94,6 +139,12 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient06 +Demonstrates how to animate the `radiusX` and `radiusY` elliptic gradient arguments separately. +They are animated in a circular fashion, making the ellipse transition between a thin vertical shape, +a round shape, and a thin horizontal shape. + +The `SpreadMethod.REPEAT` setting makes the gradient cover the available space repeating the gradient +as many times as needed. ![gradients-DemoGradient06Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient06Kt.png) @@ -102,7 +153,12 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient07 +A design with 48 vertical bands with gradients. Each one has a unique `quantization` +value based on the index of the band. All bands have 2 color `stops`: +`WHITE` at the top (position 0.0), and `BLACK` near the bottom (near position 1.0), +with the exact value depending on the `quantization` value. +Demonstrates how to produce a quantized gradient with a specific number of equal color bands. ![gradients-DemoGradient07Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient07Kt.png) @@ -110,6 +166,10 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient08 +Demonstrates the creation of a grid-based design with 13x13 cells, each with an elliptic gradient +pointing towards the center of the window. The center cell features a circular gradient (by having +`radiusX` equal to `radiusY`). The farther a cell is from the center, the higher the aspect ratio +of the ellipse is, becoming closer to a line than to a circle near the corners. ![gradients-DemoGradient08Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient08Kt.png) @@ -118,6 +178,14 @@ rotates around the center of the canvas while being redrawn continuously. ### gradients/DemoGradient09 +Demonstrates two types of shade styles: `pattern` and `luma`. + +The `pattern` shade style is used to generate a checkers-pattern. + +This example also loads and draws an image using the `luma` shade style +to map pixel brightnesses to gradient colors. Dark colors are +mapped to transparent, revealing the checkers-pattern behind it +in parts of the image. ![gradients-DemoGradient09Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/gradients-DemoGradient09Kt.png) @@ -126,6 +194,8 @@ rotates around the center of the canvas while being redrawn continuously. ### image/DemoImageFill01 +A minimal demonstration of the `imageFill` shade style, used to texture +shapes using a loaded image (or generated color buffer). ![image-DemoImageFill01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/image-DemoImageFill01Kt.png) @@ -134,7 +204,9 @@ rotates around the center of the canvas while being redrawn continuously. ### image/DemoImageFill02 - +Demonstrates the use of the `imageFill` shade style, applied to 10 concentric +circles. The rotation of each circle depends on the cosine of time, with +a varying time offset applied per circle, for a fun wavy effect. ![image-DemoImageFill02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/image-DemoImageFill02Kt.png) @@ -142,7 +214,9 @@ rotates around the center of the canvas while being redrawn continuously. ### image/DemoImageFill03 - +Demonstrates the use of the `domainWarpFunction` in an `imageFill` shade style, used to deform +the coordinate system of the shader. A `time` parameter is passed to the shader and used +to alter the deformation in real time. ![image-DemoImageFill03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/image-DemoImageFill03Kt.png) @@ -150,7 +224,10 @@ rotates around the center of the canvas while being redrawn continuously. ### noise/DemoBlueNoise01 +Demonstrates the use of the `blueNois` variant of the `noise` shade style +to render an image as black and white with a pointillist luma-based effect. +More computationally heavy than other shade styles. ![noise-DemoBlueNoise01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/noise-DemoBlueNoise01Kt.png) @@ -158,7 +235,9 @@ rotates around the center of the canvas while being redrawn continuously. ### noise/DemoSimplex01 - +Demonstrates the use of the `simplex` variant of the `noise` shade style. +It generates a gray-scale pattern, which is then colorized by using a `luma` +`gradient` shade style. ![noise-DemoSimplex01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/noise-DemoSimplex01Kt.png) @@ -166,7 +245,11 @@ rotates around the center of the canvas while being redrawn continuously. ### noise/DemoWhiteNoise01 +Demonstrates how to render a color image as black and white +using the `whiteNoise` variant of the `noise` shade style. +A custom `blendFunction` is used to control how pixel colors are +transformed. ![noise-DemoWhiteNoise01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/noise-DemoWhiteNoise01Kt.png) @@ -174,7 +257,15 @@ rotates around the center of the canvas while being redrawn continuously. ### patterns/DemoPatterns01 +Demonstrates the use of the `checkers` variant of the `pattern` shade style. +The style is used twice with different parameters: once for a background image +and then for a text displayed on top of it. + +The text shade style features a `domainWarpFunction`, which is used to deform +the coordinate system of the shade style. + +Try reducing the `scale` parameter to make the checkers more obvious. ![patterns-DemoPatterns01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/patterns-DemoPatterns01Kt.png) @@ -182,7 +273,8 @@ rotates around the center of the canvas while being redrawn continuously. ### patterns/DemoPatterns02 - +Demonstrates the use of the `xorMod2` variant of the `pattern` shade style; +an algorithmic and intricate pattern. ![patterns-DemoPatterns02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/patterns-DemoPatterns02Kt.png) @@ -190,7 +282,8 @@ rotates around the center of the canvas while being redrawn continuously. ### patterns/DemoPatterns03 - +Demonstrates the use of a complex shade style made by combining an +animated `pattern`, a `gradient` and a `clip`. ![patterns-DemoPatterns03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/patterns-DemoPatterns03Kt.png) @@ -198,6 +291,8 @@ rotates around the center of the canvas while being redrawn continuously. ### spatial/DemoHemisphere01 +Demonstrates the [HemisphereLight] shade style, a simple shader +that can be used for simple illumination of 3D meshes. ![spatial-DemoHemisphere01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/spatial-DemoHemisphere01Kt.png) @@ -206,6 +301,8 @@ rotates around the center of the canvas while being redrawn continuously. ### spatial/DemoVisualizeNormals01 +Demonstrates the use of the [visualizeNormals] shade style, which can help +debug the normals of a 3D mesh. ![spatial-DemoVisualizeNormals01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shade-styles/images/spatial-DemoVisualizeNormals01Kt.png) diff --git a/orx-shapes/README.md b/orx-shapes/README.md index 31dc66b0..377481e9 100644 --- a/orx-shapes/README.md +++ b/orx-shapes/README.md @@ -419,7 +419,18 @@ This demo shows a grid of 9 contours which are part circle and part 5-point star ### frames/DemoFrames01 +Demonstrates how to create a 3D path and attach cylinders to it at regular intervals with the correct orientation. +- The path is constructed using the `path3D` builder. +- A rectified copy is created to be able to sample it at equal-length intervals. +- We call the `frames` method on the rectified contour to generate a list with 100 transformation matrices which +make it possible to attach oriented 3D objects at specific locations in the curve. +- We finally use the transformation matrices to draw cylinders along the 3D path. + +The orbital camera extension enables interactive 3D view manipulation. + +A fixed random seed is used to make sure this demo outputs a specific output. We can delete the +`random` arguments to get a unique result each time the program runs. ![frames-DemoFrames01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/frames-DemoFrames01Kt.png) @@ -427,7 +438,8 @@ This demo shows a grid of 9 contours which are part circle and part 5-point star ### hobbycurve/DemoHobbyCurve01 - +Demonstrates how to use the hobbyCurve function to render a smooth closed contour +passing through a predefined set of points. ![hobbycurve-DemoHobbyCurve01Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/hobbycurve-DemoHobbyCurve01Kt.png) @@ -435,7 +447,8 @@ This demo shows a grid of 9 contours which are part circle and part 5-point star ### hobbycurve/DemoHobbyCurve02 - +This demo creates a list of random 2D points, finds the alpha shape contour for those points, +and finally makes that contour smooth by calling `hobbyCurve()`. ![hobbycurve-DemoHobbyCurve02Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/hobbycurve-DemoHobbyCurve02Kt.png) @@ -443,7 +456,8 @@ This demo shows a grid of 9 contours which are part circle and part 5-point star ### hobbycurve/DemoHobbyCurve03 - +This demo shows how the [org.openrndr.shape.ShapeContour]'s method `hobbyCurve()` can be used +to round contours with linear segments. ![hobbycurve-DemoHobbyCurve03Kt](https://raw.githubusercontent.com/openrndr/orx/media/orx-shapes/images/hobbycurve-DemoHobbyCurve03Kt.png)