1 files changed, 339 insertions, 0 deletions
diff --git a/manuals/chickadee/Vector-Paths.html b/manuals/chickadee/Vector-Paths.html
new file mode 100644
index 0000000..e83d849
--- /dev/null
+++ b/manuals/chickadee/Vector-Paths.html
@@ -0,0 +1,339 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<!-- Copyright (C) 2017-2020  David Thompson davet@gnu.org
+
+Permission is granted to copy, distribute and/or modify this document
+under the terms of the GNU Free Documentation License, Version 1.3
+or any later version published by the Free Software Foundation;
+with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
+A copy of the license is included in the section entitled "GNU
+Free Documentation License".
+
+A copy of the license is also available from the Free Software
+Foundation Web site at http://www.gnu.org/licenses/fdl.html.
+
+
+* Chickadee: (chickadee).     Game programming toolkit for Guile.
+
+The document was typeset with
+http://www.texinfo.org/ (GNU Texinfo).
+ -->
+<!-- Created by GNU Texinfo 6.7, http://www.gnu.org/software/texinfo/ -->
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Vector Paths (The Chickadee Game Toolkit)</title>
+
+<meta name="description" content="Vector Paths (The Chickadee Game Toolkit)">
+<meta name="keywords" content="Vector Paths (The Chickadee Game Toolkit)">
+<meta name="resource-type" content="document">
+<meta name="distribution" content="global">
+<meta name="Generator" content="makeinfo">
+<link href="index.html" rel="start" title="Top">
+<link href="Index.html" rel="index" title="Index">
+<link href="index.html#SEC_Contents" rel="contents" title="Table of Contents">
+<link href="Graphics.html" rel="up" title="Graphics">
+<link href="Fonts.html" rel="next" title="Fonts">
+<link href="Tile-Maps.html" rel="prev" title="Tile Maps">
+<style type="text/css">
+<!--
+a.summary-letter {text-decoration: none}
+blockquote.indentedblock {margin-right: 0em}
+div.display {margin-left: 3.2em}
+div.example {margin-left: 3.2em}
+div.lisp {margin-left: 3.2em}
+kbd {font-style: oblique}
+pre.display {font-family: inherit}
+pre.format {font-family: inherit}
+pre.menu-comment {font-family: serif}
+pre.menu-preformatted {font-family: serif}
+span.nolinebreak {white-space: nowrap}
+span.roman {font-family: initial; font-weight: normal}
+span.sansserif {font-family: sans-serif; font-weight: normal}
+ul.no-bullet {list-style: none}
+@media (min-width: 1140px) {
+    body {
+        margin-left: 14rem;
+        margin-right: 4rem;
+        max-width: 52rem;
+    }
+}
+
+@media (min-width: 800px) and (max-width: 1140px) {
+    body {
+        margin-left: 6rem;
+        margin-right: 4rem;
+        max-width: 52rem;
+    }
+}
+
+@media (max-width: 800px) {
+    body {
+        margin: 1rem;
+    }
+}
+
+-->
+</style>
+<link rel="stylesheet" type="text/css" href="https://dthompson.us/css/dthompson.css">
+
+
+</head>
+
+<body lang="en">
+<span id="Vector-Paths"></span><div class="header">
+<p>
+Next: <a href="Fonts.html" accesskey="n" rel="next">Fonts</a>, Previous: <a href="Tile-Maps.html" accesskey="p" rel="prev">Tile Maps</a>, Up: <a href="Graphics.html" accesskey="u" rel="up">Graphics</a> &nbsp; [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html" title="Index" rel="index">Index</a>]</p>
+</div>
+<hr>
+<span id="Vector-Paths-1"></span><h4 class="subsection">2.3.5 Vector Paths</h4>
+
+<p>The <code>(chickadee graphics path)</code> module can be used to draw lines,
+curves, circles, rectangles, and more in a scalable, resolution
+independent manner.  It is <em>not</em> 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.
+</p>
+<p><em>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.</em>
+</p>
+<p>The first step to rendering vector graphics is to create a
+<em>path</em>: 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.
+</p>
+<dl>
+<dt id="index-path">Procedure: <strong>path</strong> <em>. commands</em></dt>
+<dd><p>Return a new path that follows <var>commands</var>.
+</p>
+<div class="example">
+<pre class="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))
+</pre></div>
+
+</dd></dl>
+
+<p>Available drawing commands:
+</p>
+<dl>
+<dt id="index-move_002dto">Procedure: <strong>move-to</strong> <em>point</em></dt>
+<dd><p>Pick up the pen and move it to <var>point</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-line_002dto">Procedure: <strong>line-to</strong> <em>point</em></dt>
+<dd><p>Draw a line from the current pen position to <var>point</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-bezier_002dto">Procedure: <strong>bezier-to</strong> <em>control1 control2 point</em></dt>
+<dd><p>Draw a cubic bezier curve from the current pen position to
+<var>point</var>.  The shape of the curve is determined by the two control
+points: <var>control1</var> and <var>control2</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-close_002dpath">Procedure: <strong>close-path</strong></dt>
+<dd><p>Draw a straight line back to the first point drawn in the path.
+</p></dd></dl>
+
+<dl>
+<dt id="index-arc">Procedure: <strong>arc</strong> <em>center rx ry angle-start angle-end</em></dt>
+<dd><p>Draw an elliptical arc spanning the angle range [<var>angle-start</var>,
+<var>angle-end</var>], centered at <var>center</var> with radii <var>rx</var> and
+<var>ry</var> (set both to the same value for a circular arc.)
+</p></dd></dl>
+
+<p>Included are some helpful procedures for generating common types of
+paths:
+</p>
+<dl>
+<dt id="index-line">Procedure: <strong>line</strong> <em>start end</em></dt>
+<dd><p>Return a path that draws a straight line from <var>start</var> to <var>end</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-polyline">Procedure: <strong>polyline</strong> <em>. points</em></dt>
+<dd><p>Return a path that draws a series of lines connecting <var>points</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-rectangle">Procedure: <strong>rectangle</strong> <em>bottom-left width height</em></dt>
+<dd><p>Return a path that draws a rectangle whose bottom-left corner is at
+<var>bottom-left</var> and whose size is defined by <var>width</var> and
+<var>height</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-square">Procedure: <strong>square</strong> <em>bottom-left size</em></dt>
+<dd><p>Return a path draws a square whose bottom-left corner is at
+<var>bottom-left</var> and whose size is defined by <var>size</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-rounded_002drectangle">Procedure: <strong>rounded-rectangle</strong> <em>bottom-left width height                    [#:radius 4.0] [#:radius-bottom-left]                    [#:radius-bottom-right] [#:radius-top-left]                    [#:radius-top-right]</em></dt>
+<dd>
+<p>Return a path that draws a rectangle with rounded corners whose
+bottom-left corner is at <var>bottom-left</var> and whose size is defined
+by <var>width</var> and <var>height</var>.  The argument <var>radius</var> 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>,
+<var>radius-bottom-right</var>, <var>radius-top-left</var>, and/or
+<var>radius-top-right</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-regular_002dpolygon">Procedure: <strong>regular-polygon</strong> <em>center num-sides radius</em></dt>
+<dd><p>Return a path that draws a regular polygon with <var>num-sides</var> sides
+centered on the point <var>center</var> with each vertex <var>radius</var> units
+away from the center.
+</p></dd></dl>
+
+<dl>
+<dt id="index-ellipse">Procedure: <strong>ellipse</strong> <em>center rx ry</em></dt>
+<dd><p>Return a path that draws an ellipsed centered on the point
+<var>center</var> with radii <var>rx</var> and <var>ry</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-circle">Procedure: <strong>circle</strong> <em>center r</em></dt>
+<dd><p>Return a path that draws a circle centered on the point <var>center</var>
+with radius <var>r</var>.
+</p></dd></dl>
+
+<p>With one or more paths created, a <em>painter</em> is needed to give the
+path its style and placement in the final picture.  Painters can be
+combined together to form arbitrarily complex pictures.
+</p>
+<dl>
+<dt id="index-stroke">Procedure: <strong>stroke</strong> <em>. paths</em></dt>
+<dd><p>Apply a stroked drawing style to <var>paths</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-fill">Procedure: <strong>fill</strong> <em>. paths</em></dt>
+<dd><p>Apply a filled drawing style to <var>paths</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-fill_002dand_002dstroke">Procedure: <strong>fill-and-stroke</strong> <em>. paths</em></dt>
+<dd><p>Apply a filled and stroked drawing style to <var>paths</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-transform">Procedure: <strong>transform</strong> <em>matrix painter</em></dt>
+<dd><p>Apply <var>matrix</var>, a 3x3 transformation matrix, to <var>painter</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-translate">Procedure: <strong>translate</strong> <em>v painter</em></dt>
+<dd><p>Translate <var>painter</var> by the 2D vector <var>v</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-rotate">Procedure: <strong>rotate</strong> <em>angle painter</em></dt>
+<dd><p>Rotate <var>painter</var> by <var>angle</var> radians.
+</p></dd></dl>
+
+<dl>
+<dt id="index-scale">Procedure: <strong>scale</strong> <em>x painter</em></dt>
+<dd><p>Scale <var>painter</var> by the scalar <var>x</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-pad">Procedure: <strong>pad</strong> <em>pad-x pad-y painter</em></dt>
+<dd><p>Add <var>pad-x</var> and <var>pad-y</var> amount of empty space around
+<var>painter</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-superimpose">Procedure: <strong>superimpose</strong> <em>. painters</em></dt>
+<dd><p>Stack <var>painters</var> on top of each other.
+</p></dd></dl>
+
+<dl>
+<dt id="index-beside">Procedure: <strong>beside</strong> <em>. painters</em></dt>
+<dd><p>Place <var>painters</var> next to each other in a row.
+</p></dd></dl>
+
+<dl>
+<dt id="index-below">Procedure: <strong>below</strong> <em>. painters</em></dt>
+<dd><p>Place <var>painters</var> next to each other in a column.
+</p></dd></dl>
+
+<dl>
+<dt id="index-with_002dstyle">Syntax: <strong>with-style</strong> <em>((style-name value) ...) painter</em></dt>
+<dd><p>Apply all the given style settings to <var>painter</var>.
+</p>
+<p>Possible style attributes are:
+</p>
+<ul>
+<li> blend-mode
+</li><li> fill-color
+</li><li> stroke-color
+</li><li> stroke-width
+</li><li> stroke-feather
+</li><li> stroke-cap
+</li></ul>
+
+<div class="example">
+<pre class="example">(with-style ((stroke-color green)
+             (stroke-width 4.0))
+  (stroke (circle (vec2 100.0 100.0) 50.0)))
+</pre></div>
+
+</dd></dl>
+
+<p>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.
+</p>
+<dl>
+<dt id="index-make_002dcanvas">Procedure: <strong>make-canvas</strong> <em>painter [#:matrix]</em></dt>
+<dd><p>Return a new canvas that will <var>painter</var> will draw on.  Optionally,
+a 3x3 <var>matrix</var> may be specified to apply an arbitrary
+transformation to the resulting image.
+</p></dd></dl>
+
+<dl>
+<dt id="index-make_002dempty_002dcanvas">Procedure: <strong>make-empty-canvas</strong> <em>[#:matrix]</em></dt>
+<dd><p>Return a new canvas that no painter is using. Optionally, a 3x3
+<var>matrix</var> may be specified to apply an arbitrary transformation to
+the image, should a painter later be associated with this canvas.
+</p></dd></dl>
+
+<dl>
+<dt id="index-canvas_003f">Procedure: <strong>canvas?</strong> <em>obj</em></dt>
+<dd><p>Return <code>#t</code> is <var>obj</var> is a canvas.
+</p></dd></dl>
+
+<dl>
+<dt id="index-set_002dcanvas_002dpainter_0021">Procedure: <strong>set-canvas-painter!</strong> <em>canvas painter</em></dt>
+<dd><p>Associate <var>painter</var> with <var>canvas</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-set_002dcanvas_002dmatrix_0021">Procedure: <strong>set-canvas-matrix!</strong> <em>canvas matrix</em></dt>
+<dd><p>Set the 3x3 transformation matrix of <var>canvas</var> to <var>matrix</var>.
+</p></dd></dl>
+
+<dl>
+<dt id="index-draw_002dcanvas">Procedure: <strong>draw-canvas</strong> <em>canvas</em></dt>
+<dd><p>Render <var>canvas</var> to the screen.
+</p></dd></dl>
+
+<hr>
+<div class="header">
+<p>
+Next: <a href="Fonts.html" accesskey="n" rel="next">Fonts</a>, Previous: <a href="Tile-Maps.html" accesskey="p" rel="prev">Tile Maps</a>, Up: <a href="Graphics.html" accesskey="u" rel="up">Graphics</a> &nbsp; [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html" title="Index" rel="index">Index</a>]</p>
+</div>
+
+
+
+</body>
+</html>