Vector Paths (The Chickadee Game Toolkit)

From 25c5eac5e6ca1035db1eddd7bea9ac78531da57e Mon Sep 17 00:00:00 2001 From: David Thompson Date: Thu, 28 Dec 2023 11:23:49 -0500 Subject: Delete manuals! Good riddance! These are hosted on files.dthompson.us now! --- manuals/chickadee/Vector-Paths.html | 462 ------------------------------------ 1 file changed, 462 deletions(-) delete mode 100644 manuals/chickadee/Vector-Paths.html (limited to 'manuals/chickadee/Vector-Paths.html') diff --git a/manuals/chickadee/Vector-Paths.html b/manuals/chickadee/Vector-Paths.html deleted file mode 100644 index 81d6307..0000000 --- a/manuals/chickadee/Vector-Paths.html +++ /dev/null @@ -1,462 +0,0 @@ - - - - - - -Vector Paths (The Chickadee Game Toolkit) - - - - - - - - - - - - - - - - - - - - -

5.3.5 Vector Paths

- -

The (chickadee graphics path) module can be used to draw lines, -curves, circles, rectangles, and more in a scalable, resolution -independent manner. It is not an SVG compliant renderer, nor -does it intend to be. However, those familiar with SVG and/or the -HTML5 Canvas API should find lots of similarities. -

This API is considered to be experimental and may change -substantially in future releases of Chickadee. There are many missing -features. -

The first step to rendering vector graphics is to create a -path: A series of commands that can be thought of as moving a -pen around a piece of paper. A path can be either open or closed. A -closed path draws a straight line from the last point in the path to -the first. -

Procedure: path . commands

Return a new path that follows commands. -

(path (move-to (vec2 50.0 50.0))
-      (line-to (vec2 500.0 50.0))
-      (line-to (vec2 400.0 200.0))
-      (bezier-to (vec2 500.0 250.0) (vec2 380.0 300.0) (vec2 400.0 400.0))
-      (line-to (vec2 300.0 400.0))
-      (close-path))
-

- -

Available drawing commands: -

Procedure: move-to point: Pick up the pen and move it to point. -

- -

Procedure: line-to point: Draw a line from the current pen position to point. -

- -

Procedure: bezier-to control1 control2 point: Draw a cubic bezier curve from the current pen position to -point. The shape of the curve is determined by the two control -points: control1 and control2. -

- -

Procedure: close-path: Draw a straight line back to the first point drawn in the path. -

- -

Procedure: arc center rx ry angle-start angle-end: Draw an elliptical arc spanning the angle range [angle-start, -angle-end], centered at center with radii rx and -ry (set both to the same value for a circular arc.) -

- -

Procedure: arc-to c1 c2 radius: Draw a circular arc with radius radius that is tangential to the -line segment formed by the current pen position and c1, as well -as the line segment formed by c1 and c2. The result is a -smooth corner. -

- -

Included are some helpful procedures for generating common types of -paths: -

Procedure: line start end: Return a path that draws a straight line from start to end. -

- -

Procedure: polyline . points: Return a path that draws a series of lines connecting points. -

- -

Procedure: bezier-path p1 c1 c2 p2 . points: Return a path that draws a series of bezier points starting at -p1, moving to p2 using control points c1 and -c2, and proceeding to draw additional bezier curves as defined -by points. Each additional curve requires 3 additional -arguments: two control points and and an ending point. -

- -

Procedure: rectangle bottom-left width height: Return a path that draws a rectangle whose bottom-left corner is at -bottom-left and whose size is defined by width and -height. -

- -

Procedure: square bottom-left size: Return a path draws a square whose bottom-left corner is at -bottom-left and whose size is defined by size. -

- -

Procedure: rounded-rectangle bottom-left width height [#:radius 4.0] [#:radius-bottom-left] [#:radius-bottom-right] [#:radius-top-left] [#:radius-top-right]: -
Return a path that draws a rectangle with rounded corners whose -bottom-left corner is at bottom-left and whose size is defined -by width and height. The argument radius is used to -define the corner radius for all corners. To use a different radius -value for a corner, use radius-bottom-left, -radius-bottom-right, radius-top-left, and/or -radius-top-right. -

- -

Procedure: regular-polygon center num-sides radius: Return a path that draws a regular polygon with num-sides sides -centered on the point center with each vertex radius units -away from the center. -

- -

Procedure: ellipse center rx ry: Return a path that draws an ellipsed centered on the point -center with radii rx and ry. -

- -

Procedure: circle center r: Return a path that draws a circle centered on the point center -with radius r. -

- -

With one or more paths created, a painter is needed to give the -path its style and placement in the final picture. Painters can be -combined together to form arbitrarily complex pictures. -

Procedure: stroke . paths: Apply a stroked drawing style to paths. -

- -

Procedure: fill . paths: Apply a filled drawing style to paths. -

- -

Procedure: fill-and-stroke . paths: Apply a filled and stroked drawing style to paths. -

- -

Syntax: with-style ((style-name value) ...) painter

Apply all the given style settings to painter. -

Possible style attributes are: -

blend-mode -
fill-color -
stroke-color -
stroke-width -
stroke-feather -
stroke-cap -

- -

(with-style ((stroke-color green)
-             (stroke-width 4.0))
-  (stroke (circle (vec2 100.0 100.0) 50.0)))
-

- -

Fill colors may be either solid colors (see Colors) or gradients. -For gradient fills, there are two styles: linear or radial. -

Procedure: linear-gradient [#:origin (vec2 0 0)] [#:start-color white] [#:end-color black] [#:rotation 0] [#:offset 0] [#:length 100]: -
Return a new linear gradient that transitions from start-color -on the left to end-color on the right over length pixels. -offset may be used to push the gradient start point to the -right, creating a solid block of start-color on the right hand -side of the painter. The line’s direction may be changed by -specifying a rotation value. The starting point for the -gradient is determined by origin and defaults to the lower left -corner of the painter’s bounding box. -

- -

Procedure: radial-gradient [#:origin (vec2 0 0)] [#:start-color white] [#:end-color black] [#:radius 50.0] [#:radius-x] [#:radius-y] [#:rotation 0] [#:offset 0]: -
Return a new radial gradient that transitions from start-color -at the point origin to end-color at radius pixels -away. offset specifies the distance from the origin where -start-color begins to transition. The default is to immediately -start transitioning. The default shape of this type of gradient is a -circle, but it can also be made elliptical by specifying different -radius-x and radius-y values. When the gradient shape is -elliptical, rotation can be used to rotate it. -

- -

Procedure: gradient? obj: Return #t when obj is a gradient object. -

- -

Painters can also be transformed and combined to form new painters. -

Procedure: transform matrix painter: Apply matrix, a 3x3 transformation matrix (see Matrices), to -painter. -

- -

Procedure: translate v painter: Translate painter by the 2D vector v. -

- -

Procedure: rotate angle painter: Rotate painter by angle radians. -

- -

Procedure: scale x painter: Scale painter by the scalar x. -

- -

Procedure: horizontal-flip painter: Flip painter horizontally. -

- -

Procedure: vertical-flip painter: Flip painter vertically. -

- -

Procedure: pad pad-x pad-y painter: Add pad-x and pad-y amount of empty space around -painter. -

- -

Procedure: superimpose . painters: Stack painters on top of each other. -

- -

The next batch of procedures is taken straight out of the picture -language described in -Structure and Interpretation of Computer Programs section 2.2.4. -

Procedure: beside . painters: Place painters next to each other in a row. -

- -

Procedure: below . painters: Place painters next to each other in a column. -

- -

Procedure: right-split painter n

Subdivide painter into 3 sections, recursively, like so: -

*----------------*----------------*
-|                |                |
-|                |  right-split   |
-|                |     n - 1      |
-|                |                |
-|    painter     *----------------*
-|                |                |
-|                |  right-split   |
-|                |     n - 1      |
-|                |                |
-*----------------*----------------*
-

- -

Procedure: up-split painter n

Subdivide painter into 3 sections, recursively, like so: -

*----------------*----------------*
-|                |                |
-|    up-split    |    up-split    |
-|     n - 1      |     n - 1      |
-|                |                |
-*----------------*----------------*
-|                                 |
-|             painter             |
-|                                 |
-|                                 |
-*----------------*----------------*
-

- -

Procedure: corner-split painter n

Subdivide painter into 4 sections, recursively, like so: -

*----------------*----------------*
-|                |                |
-|    up-split    |  corner-split  |
-|     n - 1      |     n - 1      |
-|                |                |
-*----------------*----------------*
-|                |                |
-|    painter     |  right-split   |
-|                |     n - 1      |
-|                |                |
-*----------------*----------------*
-

- - -

As in real life, a painter cannot paint anything without a canvas. -Once a painter has been associated with a canvas, it can finally be -rendered to the screen. -

Procedure: make-canvas painter [#:matrix]: Return a new canvas that will painter will draw on. Optionally, -a 3x3 matrix may be specified to apply an arbitrary -transformation to the resulting image. -

- -

Procedure: make-empty-canvas [#:matrix]: Return a new canvas that no painter is using. Optionally, a 3x3 -matrix may be specified to apply an arbitrary transformation to -the image, should a painter later be associated with this canvas. -

- -

Procedure: canvas? obj: Return #t is obj is a canvas. -

- -

Procedure: set-canvas-painter! canvas painter: Associate painter with canvas. -

- -

Procedure: set-canvas-matrix! canvas matrix: Set the 3x3 transformation matrix of canvas to matrix. -

- -

Procedure: draw-canvas canvas: Render canvas to the screen. -

- -

- - - - - - -- cgit v1.2.3