diff options
Diffstat (limited to 'manuals/chickadee/Vector-Paths.html')
| -rw-r--r-- | manuals/chickadee/Vector-Paths.html | 462 |
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"> -<!-- -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="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> [<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’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’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> [<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> |