summaryrefslogtreecommitdiff
path: root/manuals/chickadee/Vector-Paths.html
diff options
context:
space:
mode:
authorDavid Thompson <dthompson2@worcester.edu>2021-10-07 20:17:50 -0400
committerDavid Thompson <dthompson2@worcester.edu>2021-10-07 20:17:50 -0400
commit0e699be281c8dea53e589e08a5831837e0eae7ea (patch)
tree4266aebec927b13ca56410be1901e3ee78dff49e /manuals/chickadee/Vector-Paths.html
parent38daa330f2194de5f39cd41b270c89d7b2e94427 (diff)
Updates for Chickadee 0.8.0 and Guile-SDL2 0.7.0.
Diffstat (limited to 'manuals/chickadee/Vector-Paths.html')
-rw-r--r--manuals/chickadee/Vector-Paths.html165
1 files changed, 144 insertions, 21 deletions
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>
@@ -163,6 +171,15 @@ paths:
</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
<var>bottom-left</var> and whose size is defined by <var>width</var> and
@@ -226,8 +243,68 @@ 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>.
+</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>
@@ -246,6 +323,16 @@ combined together to form arbitrarily complex pictures.
</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
<var>painter</var>.
@@ -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.