summaryrefslogtreecommitdiff
path: root/doc
diff options
context:
space:
mode:
authorDavid Thompson <dthompson2@worcester.edu>2020-08-28 07:16:51 -0400
committerDavid Thompson <dthompson2@worcester.edu>2020-11-18 15:05:25 -0500
commit9a5ef19d5971488de18539eaf68e35bf590a4c5e (patch)
tree564512b78a8acca80c9840e6057e5a8e75feb123 /doc
parent6de9470ff9a9ac87b391c7b51fa9986faf566d2d (diff)
render: Add vector path rendering module.
Diffstat (limited to 'doc')
-rw-r--r--doc/api.texi273
1 files changed, 213 insertions, 60 deletions
diff --git a/doc/api.texi b/doc/api.texi
index a8bac69..e93263e 100644
--- a/doc/api.texi
+++ b/doc/api.texi
@@ -1365,10 +1365,6 @@ Bezier curves become particularly interesting when they are chained
together to form a Bezier ``path'', where the end point of one curve
becomes the starting point of the next.
-Currently, the rendering of Bezier curves is rather crude and provided
-mostly for visualizing and debugging curves that would be unseen in
-the final game. See @xref{Lines and Shapes} for more information.
-
@deffn {Procedure} make-bezier-curve p0 p1 p2 p3
Return a new Bezier curve object whose starting point is @var{p0},
ending point is @var{p3}, and control points are @var{p1} and
@@ -1502,7 +1498,7 @@ blocks to implement additional rendering techniques.
* Textures:: 2D images.
* Sprites:: Draw 2D images.
* Tile Maps:: Draw 2D tile maps.
-* Lines and Shapes:: Draw line segments and polygons.
+* Vector Paths:: Draw filled and stroked paths.
* Fonts:: Drawing text.
* Particles:: Pretty little flying pieces!
* 3D Models:: Spinning teapots everywhere.
@@ -2214,61 +2210,218 @@ Return @code{#t} if @var{obj} is a polygon.
Return the list of points that form @var{polygon}.
@end deffn
-@node Lines and Shapes
-@subsection Lines and Shapes
-
-Sprites are fun, but sometimes simple, untextured lines and polygons
-are desired. That's where the @code{(chickadee graphics shapes)} module
-comes in!
-
-@deffn {Procedure} draw-line start end @
- [#:thickness 0.5] [#:feather 1.0] [#:cap round] [#:color] @
- [#:shader]
-
-Draw a line segment from @var{start} to @var{end}. The line will be
-@var{thickness} pixels thick with an antialiased border @var{feather}
-pixels wide. The line will be colored @var{color}. @var{cap}
-specifies the type of end cap that should be used to terminate the
-lines, either @code{none}, @code{butt}, @code{square}, @code{round},
-@code{triangle-in}, or @code{triangle-out}. Advanced users may use
-the @var{shader} argument to override the built-in line segment
-shader.
-@end deffn
-
-@deffn {Procedure} draw-bezier-curve bezier [#:segments 32] @
- [#:control-points?] [#:tangents?] @
- [#:control-point-size 8] @
- [#:control-point-color yellow] @
- [#:tangent-color yellow] @
- [#:thickness 0.5] [#:feather 1.0] @
- [#:matrix]
-
-Draw the curve defined by @var{bezier} using a resolution of N
-@var{segments}. When @var{control-points?} is @code{#t}, the control
-points are rendered as squares of size @var{control-point-size} pixels
-and a color of @var{control-point-color}. When @var{tangents?} is
-@code{#t}, the tangent lines from terminal point to control point are
-rendered using the color @var{tangent-color}.
-
-All line segments rendered use @code{draw-line}, and thus the
-arguments @var{thickness} and @var{feather} have the same effect as in
-that procedure.
-
-A custom @var{matrix} may be passed for applications that require more
-control over the final output.
-@end deffn
-
-@deffn {Procedure} draw-bezier-path path [#:segments 32] @
- [#:control-points?] [#:tangents?] @
- [#:control-point-size 8] @
- [#:control-point-color yellow] @
- [#:tangent-color yellow] @
- [#:thickness 0.5] [#:feather 1.0] @
- [#:matrix]
-
-Render @var{path}, a list of bezier curves. See the documentation for
-@code{draw-bezier-curve} for an explanation of all the keyword
-arguments.
+@node Vector Paths
+@subsection Vector Paths
+
+The @code{(chickadee graphics path)} module can be used to draw lines,
+curves, circles, rectangles, and more in a scalable, resolution
+independent manner. It is @emph{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.
+
+@emph{This API is considered to be experimental and may change
+substantially in future releases of Chickadee. There are many missing
+features such as gradient fills and dashed strokes.}
+
+The first step to rendering vector graphics is to create a
+@emph{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.
+
+@deffn {Procedure} path . commands
+Return a new path that follows @var{commands}.
+
+@example
+(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))
+@end example
+
+@end deffn
+
+Available drawing commands:
+
+@deffn {Procedure} move-to point
+Pick up the pen and move it to @var{point}.
+@end deffn
+
+@deffn {Procedure} line-to point
+Draw a line from the current pen position to @var{point}.
+@end deffn
+
+@deffn {Procedure} bezier-to control1 control2 point
+Draw a cubic bezier curve from the current pen position to
+@var{point}. The shape of the curve is determined by the two control
+points: @var{control1} and @var{control2}.
+@end deffn
+
+@deffn {Procedure} close-path
+Draw a straight line back to the first point drawn in the path.
+@end deffn
+
+@deffn {Procedure} arc center rx ry angle-start angle-end
+Draw an elliptical arc spanning the angle range [@var{angle-start},
+@var{angle-end}], centered at @var{center} with radii @var{rx} and
+@var{ry} (set both to the same value for a circular arc.)
+@end deffn
+
+Included are some helpful procedures for generating common types of
+paths:
+
+@deffn {Procedure} line start end
+Return a path that draws a straight line from @var{start} to @var{end}.
+@end deffn
+
+@deffn {Procedure} polyline . points
+Return a path that draws a series of lines connecting @var{points}.
+@end deffn
+
+@deffn {Procedure} rectangle bottom-left width height
+Return a path that draws a rectangle whose bottom-left corner is at
+@var{bottom-left} and whose size is defined by @var{width} and
+@var{height}.
+@end deffn
+
+@deffn {Procedure} square bottom-left size
+Return a path draws a square whose bottom-left corner is at
+@var{bottom-left} and whose size is defined by @var{size}.
+@end deffn
+
+@deffn {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 @var{bottom-left} and whose size is defined
+by @var{width} and @var{height}. The argument @var{radius} is used to
+define the corner radius for all corners. To use a different radius
+value for a corner, use @var{radius-bottom-left},
+@var{radius-bottom-right}, @var{radius-top-left}, and/or
+@var{radius-top-right}.
+@end deffn
+
+@deffn {Procedure} regular-polygon center num-sides radius
+Return a path that draws a regular polygon with @var{num-sides} sides
+centered on the point @var{center} with each vertex @var{radius} units
+away from the center.
+@end deffn
+
+@deffn {Procedure} ellipse center rx ry
+Return a path that draws an ellipsed centered on the point
+@var{center} with radii @var{rx} and @var{ry}.
+@end deffn
+
+@deffn {Procedure} circle center r
+Return a path that draws a circle centered on the point @var{center}
+with radius @var{r}.
+@end deffn
+
+With one or more paths created, a @emph{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.
+
+@deffn {Procedure} stroke . paths
+Apply a stroked drawing style to @var{paths}.
+@end deffn
+
+@deffn {Procedure} fill . paths
+Apply a filled drawing style to @var{paths}.
+@end deffn
+
+@deffn {Procedure} fill-and-stroke . paths
+Apply a filled and stroked drawing style to @var{paths}.
+@end deffn
+
+@deffn {Procedure} transform matrix painter
+Apply @var{matrix}, a 3x3 transformation matrix, to @var{painter}.
+@end deffn
+
+@deffn {Procedure} translate v painter
+Translate @var{painter} by the 2D vector @var{v}.
+@end deffn
+
+@deffn {Procedure} rotate angle painter
+Rotate @var{painter} by @var{angle} radians.
+@end deffn
+
+@deffn {Procedure} scale x painter
+Scale @var{painter} by the scalar @var{x}.
+@end deffn
+
+@deffn {Procedure} pad pad-x pad-y painter
+Add @var{pad-x} and @var{pad-y} amount of empty space around
+@var{painter}.
+@end deffn
+
+@deffn {Procedure} superimpose . painters
+Stack @var{painters} on top of each other.
+@end deffn
+
+@deffn {Procedure} beside . painters
+Place @var{painters} next to each other in a row.
+@end deffn
+
+@deffn {Procedure} below . painters
+Place @var{painters} next to each other in a column.
+@end deffn
+
+@deffn {Syntax} with-style ((style-name value) ...) painter
+Apply all the given style settings to @var{painter}.
+
+Possible style attributes are:
+
+@itemize
+@item blend-mode
+@item fill-color
+@item stroke-color
+@item stroke-width
+@item stroke-feather
+@item stroke-cap
+@end itemize
+
+@example
+(with-style ((stroke-color green)
+ (stroke-width 4.0))
+ (stroke (circle (vec2 100.0 100.0) 50.0)))
+@end example
+
+@end deffn
+
+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.
+
+@deffn {Procedure} make-canvas painter [#:matrix]
+Return a new canvas that will @var{painter} will draw on. Optionally,
+a 3x3 @var{matrix} may be specified to apply an arbitrary
+transformation to the resulting image.
+@end deffn
+
+@deffn {Procedure} make-empty-canvas [#:matrix]
+Return a new canvas that no painter is using. Optionally, a 3x3
+@var{matrix} may be specified to apply an arbitrary transformation to
+the image, should a painter later be associated with this canvas.
+@end deffn
+
+@deffn {Procedure} canvas? obj
+Return @code{#t} is @var{obj} is a canvas.
+@end deffn
+
+@deffn {Procedure} set-canvas-painter! canvas painter
+Associate @var{painter} with @var{canvas}.
+@end deffn
+
+@deffn {Procedure} set-canvas-matrix! canvas matrix
+Set the 3x3 transformation matrix of @var{canvas} to @var{matrix}.
+@end deffn
+
+@deffn {Procedure} draw-canvas canvas
+Render @var{canvas} to the screen.
@end deffn
@node Fonts