summaryrefslogtreecommitdiff
path: root/manuals/chickadee/Vector-Paths.html
diff options
context:
space:
mode:
Diffstat (limited to 'manuals/chickadee/Vector-Paths.html')
-rw-r--r--manuals/chickadee/Vector-Paths.html462
1 files changed, 0 insertions, 462 deletions
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 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<!-- Copyright (C) 2017-2023 David Thompson dthompson2@worcester.edu
-
-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="Particles.html" rel="next" title="Particles" />
-<link href="Fonts.html" rel="prev" title="Fonts" />
-<style type="text/css">
-&lt;!--
-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;
- }
-}
-
---&gt;
-</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="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">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
-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.</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="lisp">
-<pre class="lisp"><span class="syntax-open">(</span><span class="syntax-symbol">path</span> <span class="syntax-open">(</span><span class="syntax-symbol">move-to</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">50.0</span> <span class="syntax-symbol">50.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
- <span class="syntax-open">(</span><span class="syntax-symbol">line-to</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">500.0</span> <span class="syntax-symbol">50.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
- <span class="syntax-open">(</span><span class="syntax-symbol">line-to</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">400.0</span> <span class="syntax-symbol">200.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
- <span class="syntax-open">(</span><span class="syntax-symbol">bezier-to</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">500.0</span> <span class="syntax-symbol">250.0</span><span class="syntax-close">)</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">380.0</span> <span class="syntax-symbol">300.0</span><span class="syntax-close">)</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">400.0</span> <span class="syntax-symbol">400.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
- <span class="syntax-open">(</span><span class="syntax-symbol">line-to</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">300.0</span> <span class="syntax-symbol">400.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
- <span class="syntax-open">(</span><span class="syntax-symbol">close-path</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
-</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>
-
-<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>
-<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-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
-<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-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="lisp">
-<pre class="lisp"><span class="syntax-open">(</span><span class="syntax-symbol">with-style</span> <span class="syntax-open">(</span><span class="syntax-open">(</span><span class="syntax-symbol">stroke-color</span> <span class="syntax-symbol">green</span><span class="syntax-close">)</span>
- <span class="syntax-open">(</span><span class="syntax-symbol">stroke-width</span> <span class="syntax-symbol">4.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
- <span class="syntax-open">(</span><span class="syntax-symbol">stroke</span> <span class="syntax-open">(</span><span class="syntax-symbol">circle</span> <span class="syntax-open">(</span><span class="syntax-symbol">vec2</span> <span class="syntax-symbol">100.0</span> <span class="syntax-symbol">100.0</span><span class="syntax-close">)</span> <span class="syntax-symbol">50.0</span><span class="syntax-close">)</span><span class="syntax-close">)</span><span class="syntax-close">)</span>
-</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 (see <a href="Matrices.html">Matrices</a>), 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-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>.
-</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>
-
-<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.
-</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-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>
-<pre class="verbatim">*----------------*----------------*
-| | |
-| | right-split |
-| | n - 1 |
-| | |
-| painter *----------------*
-| | |
-| | right-split |
-| | n - 1 |
-| | |
-*----------------*----------------*
-</pre>
-</dd></dl>
-
-<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.
-</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="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>
-
-
-
-</body>
-</html>