diff options
Diffstat (limited to 'manuals/chickadee/Colors.html')
| -rw-r--r-- | manuals/chickadee/Colors.html | 377 |
1 files changed, 377 insertions, 0 deletions
diff --git a/manuals/chickadee/Colors.html b/manuals/chickadee/Colors.html new file mode 100644 index 0000000..3c62439 --- /dev/null +++ b/manuals/chickadee/Colors.html @@ -0,0 +1,377 @@ +<!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 + +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.6, http://www.gnu.org/software/texinfo/ --> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> +<title>Colors (The Chickadee Game Toolkit)</title> + +<meta name="description" content="Colors (The Chickadee Game Toolkit)"> +<meta name="keywords" content="Colors (The Chickadee Game Toolkit)"> +<meta name="resource-type" content="document"> +<meta name="distribution" content="global"> +<meta name="Generator" content="makeinfo"> +<link href="index.html#Top" rel="start" title="Top"> +<link href="Index.html#Index" rel="index" title="Index"> +<link href="index.html#SEC_Contents" rel="contents" title="Table of Contents"> +<link href="Graphics.html#Graphics" rel="up" title="Graphics"> +<link href="Textures.html#Textures" rel="next" title="Textures"> +<link href="Graphics.html#Graphics" rel="prev" title="Graphics"> +<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="Colors"></span><div class="header"> +<p> +Next: <a href="Textures.html#Textures" accesskey="n" rel="next">Textures</a>, Up: <a href="Graphics.html#Graphics" accesskey="u" rel="up">Graphics</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html#Index" title="Index" rel="index">Index</a>]</p> +</div> +<hr> +<span id="Colors-1"></span><h4 class="subsection">2.3.1 Colors</h4> + +<p>Merriam-Webster defines color as “a phenomenon of light (such as red, +brown, pink, or gray) or visual perception that enables one to +differentiate otherwise identical objects.” In this essay, I +will… +</p> +<p>Okay, okay. We all know what colors are. Chickadee provides a data +type to represent color and some convenient procedures to work with +them in the <code>(chickadee render color)</code> module. Colors are made +up of four components, or channels: red, green, blue, and alpha +(transparency.) Each of these values is expressed as a uniform +floating point value in the range [0, 1]. 0 means that color channel +is unrepresented in the resulting color, whereas 1 means that color +channel is at full intensity. +</p> +<p>Making a color object is easy, and there’s a few ways to do it +depending on what’s most convenient. The first is <code>make-color</code>, +where you specify each channel exactly as described above. This is +fully opaque magenta: +</p> +<div class="example"> +<pre class="example">(make-color 1.0 0.0 1.0 1.0) +</pre></div> + +<p>Many people are used to representing colors as 6 or 8 digit +hexadecimal numbers, so Chickadee also allows that. Here’s magenta, +again: +</p> +<div class="example"> +<pre class="example">(rgba #xFF00FFFF) +(rgb #xFF00FF) ; equivalent to the above +</pre></div> + +<dl> +<dt id="index-make_002dcolor">Procedure: <strong>make-color</strong> <em>r g b a</em></dt> +<dd><p>Return a new color object with a red value of <var>r</var>, a green value +of <var>g</var>, a blue value of <var>b</var>, and an alpha (transparency) value +of <var>a</var>. All values are clamped to the range [0, 1]. +</p></dd></dl> + +<dl> +<dt id="index-rgba">Procedure: <strong>rgba</strong> <em>color-code</em></dt> +<dd><p>Return a new color object using the values of the first 32 bits of +<var>color-code</var>. Each channel occupies 8 bits. Starting from the +most significant bit, red is first, followed by green, then blue, then +alpha. Color codes are often represented as 6 or 8 digit hexadecimal +numbers in various other programs. +</p></dd></dl> + +<dl> +<dt id="index-rgb">Procedure: <strong>rgb</strong> <em>color-code</em></dt> +<dd><p>Like <code>rgba</code>, but <var>color-code</var> is a 24 bit code with no alpha +channel. +</p></dd></dl> + +<dl> +<dt id="index-color_003f">Procedure: <strong>color?</strong> <em>obj</em></dt> +<dd><p>Return <code>#t</code> if <var>obj</var> is a color object. +</p></dd></dl> + +<dl> +<dt id="index-color_002dr">Procedure: <strong>color-r</strong> <em>color</em></dt> +<dd><p>Return the red channel of <var>color</var>. +</p></dd></dl> + +<dl> +<dt id="index-color_002dg">Procedure: <strong>color-g</strong> <em>color</em></dt> +<dd><p>Return the green channel of <var>color</var>. +</p></dd></dl> + +<dl> +<dt id="index-color_002db">Procedure: <strong>color-b</strong> <em>color</em></dt> +<dd><p>Return the blue channel of <var>color</var>. +</p></dd></dl> + +<dl> +<dt id="index-color_002da">Procedure: <strong>color-a</strong> <em>color</em></dt> +<dd><p>Return the alpha channel of <var>color</var>. +</p></dd></dl> + +<dl> +<dt id="index-transparency">Procedure: <strong>transparency</strong> <em>alpha</em></dt> +<dd><p>Return a new color that is white (RGB channels set to 1) with an alpha +channel value of <var>alpha</var>. This can be useful for creating a color +that can be multiplied against another color to make it more +transparent. +</p></dd></dl> + +<dl> +<dt id="index-string_002d_003ecolor">Procedure: <strong>string->color</strong> <em>s</em></dt> +<dd><p>Convert the hexadecimal color code in the string <var>s</var> to a color +object. The following string formats are supported: +</p> +<div class="example"> +<pre class="example">(string->color "#FF00FFFF") +(string->color "FF00FFFF") +(string->color "#FF00FF") +(string->color "FF00FF") +</pre></div> + +</dd></dl> + +<dl> +<dt id="index-color_002a">Procedure: <strong>color*</strong> <em>a b</em></dt> +<dd><p>Multiply the color <var>a</var> with the color or number <var>b</var> and return +a new color with the result. +</p></dd></dl> + +<dl> +<dt id="index-color_002b">Procedure: <strong>color+</strong> <em>a b</em></dt> +<dd><p>Add the color <var>a</var> to the color <var>b</var> and return a new color with +the result. +</p></dd></dl> + +<dl> +<dt id="index-color_002d">Procedure: <strong>color-</strong> <em>a b</em></dt> +<dd><p>Subtract the color <var>b</var> from the color <var>a</var> and return a new +color with the result. +</p></dd></dl> + +<dl> +<dt id="index-color_002dinverse">Procedure: <strong>color-inverse</strong> <em>color</em></dt> +<dd><p>Invert the red, green, and blue channels of <var>color</var> and return a +new color with the result. +</p></dd></dl> + +<dl> +<dt id="index-color_002dlerp">Procedure: <strong>color-lerp</strong> <em>start end alpha</em></dt> +<dd><p>Linearly interpolate the colors <var>start</var> and <var>end</var> using the +factor <var>alpha</var>, a number in the range [0, 1]. +</p></dd></dl> + +<span id="Stock-Colors"></span><h4 class="subsubsection">2.3.1.1 Stock Colors</h4> + +<p>For convenience, Chickadee comes with some basic colors predefined: +</p> +<dl> +<dt id="index-white">Variable: <strong>white</strong></dt> +</dl> + +<dl> +<dt id="index-black">Variable: <strong>black</strong></dt> +</dl> + +<dl> +<dt id="index-red">Variable: <strong>red</strong></dt> +</dl> + +<dl> +<dt id="index-green">Variable: <strong>green</strong></dt> +</dl> + +<dl> +<dt id="index-blue">Variable: <strong>blue</strong></dt> +</dl> + +<dl> +<dt id="index-yellow">Variable: <strong>yellow</strong></dt> +</dl> + +<dl> +<dt id="index-magenta">Variable: <strong>magenta</strong></dt> +</dl> + +<dl> +<dt id="index-cyan">Variable: <strong>cyan</strong></dt> +</dl> + +<p>For fun, there are also predefined colors for the classic +<a href="https://en.wikipedia.org/wiki/Tango_Desktop_Project#Palette">Tango color palette</a>. +</p> +<dl> +<dt id="index-tango_002dlight_002dbutter">Variable: <strong>tango-light-butter</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dbutter">Variable: <strong>tango-butter</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002ddark_002dbutter">Variable: <strong>tango-dark-butter</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dlight_002dorange">Variable: <strong>tango-light-orange</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dorange">Variable: <strong>tango-orange</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002ddark_002dorange">Variable: <strong>tango-dark-orange</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dlight_002dchocolate">Variable: <strong>tango-light-chocolate</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dchocolate">Variable: <strong>tango-chocolate</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002ddark_002dchocolate">Variable: <strong>tango-dark-chocolate</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dlight_002dchameleon">Variable: <strong>tango-light-chameleon</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dchameleon">Variable: <strong>tango-chameleon</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002ddark_002dchameleon">Variable: <strong>tango-dark-chameleon</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dlight_002dsky_002dblue">Variable: <strong>tango-light-sky-blue</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dsky_002dblue">Variable: <strong>tango-sky-blue</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002ddark_002dsky_002dblue">Variable: <strong>tango-dark-sky-blue</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dlight_002dplum">Variable: <strong>tango-light-plum</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dplum">Variable: <strong>tango-plum</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002ddark_002dplum">Variable: <strong>tango-dark-plum</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dlight_002dscarlet_002dred">Variable: <strong>tango-light-scarlet-red</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002dscarlet_002dred">Variable: <strong>tango-scarlet-red</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002ddark_002dscarlet_002dred">Variable: <strong>tango-dark-scarlet-red</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002daluminium_002d1">Variable: <strong>tango-aluminium-1</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002daluminium_002d2">Variable: <strong>tango-aluminium-2</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002daluminium_002d3">Variable: <strong>tango-aluminium-3</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002daluminium_002d4">Variable: <strong>tango-aluminium-4</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002daluminium_002d5">Variable: <strong>tango-aluminium-5</strong></dt> +</dl> + +<dl> +<dt id="index-tango_002daluminium_002d6">Variable: <strong>tango-aluminium-6</strong></dt> +</dl> + +<hr> +<div class="header"> +<p> +Next: <a href="Textures.html#Textures" accesskey="n" rel="next">Textures</a>, Up: <a href="Graphics.html#Graphics" accesskey="u" rel="up">Graphics</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html#Index" title="Index" rel="index">Index</a>]</p> +</div> + + + +</body> +</html> |