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