add demos to README.md
This commit is contained in:
Abe Pazos
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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`.
|
||||
|
||||
|
||||
|
||||
@@ -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)`.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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).
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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`.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
@@ -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()`.
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user