From 0e699be281c8dea53e589e08a5831837e0eae7ea Mon Sep 17 00:00:00 2001
From: David Thompson <dthompson2@worcester.edu>
Date: Thu, 7 Oct 2021 20:17:50 -0400
Subject: Updates for Chickadee 0.8.0 and Guile-SDL2 0.7.0.

---
 manuals/chickadee/Vector-Paths.html | 165 +++++++++++++++++++++++++++++++-----
 1 file changed, 144 insertions(+), 21 deletions(-)

(limited to 'manuals/chickadee/Vector-Paths.html')
diff --git a/manuals/chickadee/Vector-Paths.html b/manuals/chickadee/Vector-Paths.html
index 6f8987b..68af3d8 100644
--- a/manuals/chickadee/Vector-Paths.html
+++ b/manuals/chickadee/Vector-Paths.html
@@ -1,6 +1,6 @@
 <!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
+<!-- Copyright (C) 2017-2021  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
@@ -85,7 +85,7 @@ ul.no-bullet {list-style: none}
 Next: <a href="Particles.html" accesskey="n" rel="next">Particles</a>, Previous: <a href="Fonts.html" accesskey="p" rel="prev">Fonts</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.6 Vector Paths</h4>
+<span id="Vector-Paths-1"></span><h4 class="subsection">5.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
@@ -95,7 +95,7 @@ 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>
+features.</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
@@ -149,6 +149,14 @@ points: <var>control1</var> and <var>control2</var>.
 <var>ry</var> (set both to the same value for a circular arc.)
 </p></dd></dl>
 
+<dl>
+<dt id="index-arc_002dto">Procedure: <strong>arc-to</strong> <em>c1 c2 radius</em></dt>
+<dd><p>Draw a circular arc with radius <var>radius</var> that is tangential to the
+line segment formed by the current pen position and <var>c1</var>, as well
+as the line segment formed by <var>c1</var> and <var>c2</var>.  The result is a
+smooth corner.
+</p></dd></dl>
+
 <p>Included are some helpful procedures for generating common types of
 paths:
 </p>
@@ -162,6 +170,15 @@ paths:
 <dd><p>Return a path that draws a series of lines connecting <var>points</var>.
 </p></dd></dl>
 
+<dl>
+<dt id="index-bezier_002dpath-1">Procedure: <strong>bezier-path</strong> <em>p1 c1 c2 p2 . points</em></dt>
+<dd><p>Return a path that draws a series of bezier points starting at
+<var>p1</var>, moving to <var>p2</var> using control points <var>c1</var> and
+<var>c2</var>, and proceeding to draw additional bezier curves as defined
+by <var>points</var>.  Each additional curve requires 3 additional
+arguments: two control points and and an ending point.
+</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
@@ -225,9 +242,69 @@ combined together to form arbitrarily complex pictures.
 <dd><p>Apply a filled and stroked drawing style to <var>paths</var>.
 </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> <code>blend-mode</code>
+</li><li> <code>fill-color</code>
+</li><li> <code>stroke-color</code>
+</li><li> <code>stroke-width</code>
+</li><li> <code>stroke-feather</code>
+</li><li> <code>stroke-cap</code>
+</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>Fill colors may be either solid colors (see <a href="Colors.html">Colors</a>) or gradients.
+For gradient fills, there are two styles: linear or radial.
+</p>
+<dl>
+<dt id="index-linear_002dgradient">Procedure: <strong>linear-gradient</strong> <em>[#:origin (vec2 0 0)] [#:start-color white]        [#:end-color black] [#:rotation 0] [#:offset 0] [#:length 100]</em></dt>
+<dd>
+<p>Return a new linear gradient that transitions from <var>start-color</var>
+on the left to <var>end-color</var> on the right over <var>length</var> pixels.
+<var>offset</var> may be used to push the gradient start point to the
+right, creating a solid block of <var>start-color</var> on the right hand
+side of the painter.  The line&rsquo;s direction may be changed by
+specifying a <var>rotation</var> value.  The starting point for the
+gradient is determined by <var>origin</var> and defaults to the lower left
+corner of the painter&rsquo;s bounding box.
+</p></dd></dl>
+
+<dl>
+<dt id="index-radial_002dgradient">Procedure: <strong>radial-gradient</strong> <em>[#:origin (vec2 0 0)] [#:start-color white]        [#:end-color black] [#:radius 50.0] [#:radius-x] [#:radius-y]        [#:rotation 0] [#:offset 0]</em></dt>
+<dd>
+<p>Return a new radial gradient that transitions from <var>start-color</var>
+at the point <var>origin</var> to <var>end-color</var> at <var>radius</var> pixels
+away.  <var>offset</var> specifies the distance from the origin where
+<var>start-color</var> 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
+<var>radius-x</var> and <var>radius-y</var> values.  When the gradient shape is
+elliptical, <var>rotation</var> can be used to rotate it.
+</p></dd></dl>
+
+<dl>
+<dt id="index-gradient_003f">Procedure: <strong>gradient?</strong> <em>obj</em></dt>
+<dd><p>Return <code>#t</code> when <var>obj</var> is a gradient object.
+</p></dd></dl>
+
+<p>Painters can also be transformed and combined to form new painters.
+</p>
 <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>.
+<dd><p>Apply <var>matrix</var>, a 3x3 transformation matrix (see <a href="Matrices.html">Matrices</a>), to
+<var>painter</var>.
 </p></dd></dl>
 
 <dl>
@@ -245,6 +322,16 @@ combined together to form arbitrarily complex pictures.
 <dd><p>Scale <var>painter</var> by the scalar <var>x</var>.
 </p></dd></dl>
 
+<dl>
+<dt id="index-horizontal_002dflip">Procedure: <strong>horizontal-flip</strong> <em>painter</em></dt>
+<dd><p>Flip <var>painter</var> horizontally.
+</p></dd></dl>
+
+<dl>
+<dt id="index-vertical_002dflip">Procedure: <strong>vertical-flip</strong> <em>painter</em></dt>
+<dd><p>Flip <var>painter</var> vertically.
+</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
@@ -256,6 +343,10 @@ combined together to form arbitrarily complex pictures.
 <dd><p>Stack <var>painters</var> on top of each other.
 </p></dd></dl>
 
+<p>The next batch of procedures is taken straight out of the picture
+language described in
+<a href="https://mitpress.mit.edu/sites/default/files/sicp/full-text/book/book-Z-H-15.html#%_sec_2.2.4">Structure and Interpretation of Computer Programs</a> section 2.2.4.
+</p>
 <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.
@@ -267,28 +358,60 @@ combined together to form arbitrarily complex pictures.
 </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>.
+<dt id="index-right_002dsplit">Procedure: <strong>right-split</strong> <em>painter n</em></dt>
+<dd><p>Subdivide <var>painter</var> into 3 sections, recursively, like so:
 </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>
+<pre class="verbatim">*----------------*----------------*
+|                |                |
+|                |  right-split   |
+|                |     n - 1      |
+|                |                |
+|    painter     *----------------*
+|                |                |
+|                |  right-split   |
+|                |     n - 1      |
+|                |                |
+*----------------*----------------*
+</pre>
+</dd></dl>
 
-<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>
+<dl>
+<dt id="index-up_002dsplit">Procedure: <strong>up-split</strong> <em>painter n</em></dt>
+<dd><p>Subdivide <var>painter</var> into 3 sections, recursively, like so:
+</p>
+<pre class="verbatim">*----------------*----------------*
+|                |                |
+|    up-split    |    up-split    |
+|     n - 1      |     n - 1      |
+|                |                |
+*----------------*----------------*
+|                                 |
+|             painter             |
+|                                 |
+|                                 |
+*----------------*----------------*
+</pre>
+</dd></dl>
 
+<dl>
+<dt id="index-corner_002dsplit">Procedure: <strong>corner-split</strong> <em>painter n</em></dt>
+<dd><p>Subdivide <var>painter</var> into 4 sections, recursively, like so:
+</p>
+<pre class="verbatim">*----------------*----------------*
+|                |                |
+|    up-split    |  corner-split  |
+|     n - 1      |     n - 1      |
+|                |                |
+*----------------*----------------*
+|                |                |
+|    painter     |  right-split   |
+|                |     n - 1      |
+|                |                |
+*----------------*----------------*
+</pre>
 </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.
-- 
cgit v1.2.3

