<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>HotCocoa::Graphics &#187; Color</title>
	<atom:link href="http://hcg.drtoast.com/category/examples/color/feed/" rel="self" type="application/rss+xml" />
	<link>http://hcg.drtoast.com</link>
	<description>A Ruby Library for Bitmap and Vector Graphics on Mac OS X</description>
	<lastBuildDate>Thu, 28 Apr 2011 18:45:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Image Color Adjustments</title>
		<link>http://hcg.drtoast.com/image-color-adjustments/</link>
		<comments>http://hcg.drtoast.com/image-color-adjustments/#comments</comments>
		<pubDate>Wed, 02 Jul 2008 07:42:42 +0000</pubDate>
		<dc:creator>drtoast</dc:creator>
				<category><![CDATA[Color]]></category>
		<category><![CDATA[Examples]]></category>
		<category><![CDATA[Images]]></category>

		<guid isPermaLink="false">http://rcg.drtoast.com/?p=22</guid>
		<description><![CDATA[You can apply various color adjustments to a loaded image, then render it to the canvas.  You can also grab colors from an image for use in a gradient or to paint objects on the canvas. #!/usr/local/bin/macruby framework 'cocoa' require 'rubygems' require 'hotcocoa/graphics' include HotCocoa include Graphics # set up the canvas and font canvas [...]]]></description>
			<content:encoded><![CDATA[<p><a style="text-decoration: none;" href="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-colors.png"><span style="color: #000000;"><br />
</span><img class="aligncenter size-full wp-image-21" style="text-decoration: underline;" title="image-colors" src="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-colors.png" alt="" width="400" height="400" /></a></p>
<p>You can apply various color adjustments to a loaded image, then render it to the canvas.  You can also grab colors from an image for use in a gradient or to paint objects on the canvas.</p>
<pre><span class="comment">#!/usr/local/bin/macruby</span>

<span class="ident">framework</span> <span class="punct">'</span><span class="string">cocoa</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">rubygems</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">hotcocoa/graphics</span><span class="punct">'</span>
<span class="ident">include</span> <span class="constant">HotCocoa</span>
<span class="ident">include</span> <span class="constant">Graphics</span>

<span class="comment"># set up the canvas and font</span>
<span class="ident">canvas</span> <span class="punct">=</span> <span class="constant">Canvas</span><span class="punct">.</span><span class="ident">new</span> <span class="symbol">:type</span> <span class="punct">=&gt;</span> <span class="symbol">:image</span><span class="punct">,</span> <span class="symbol">:filename</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">colors.png</span><span class="punct">',</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">400</span><span class="punct">,</span><span class="number">400</span><span class="punct">]</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">background</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">white</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">font</span><span class="punct">('</span><span class="string">Skia</span><span class="punct">')</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">fontsize</span><span class="punct">(</span><span class="number">14</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">fill</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">black</span><span class="punct">)</span>

<span class="comment"># LOAD IMAGE</span>
<span class="ident">img</span> <span class="punct">=</span> <span class="constant">Image</span><span class="punct">.</span><span class="ident">new</span><span class="punct">('</span><span class="string">v2.jpg</span><span class="punct">')</span>

<span class="ident">w</span><span class="punct">,</span><span class="ident">h</span> <span class="punct">=</span> <span class="punct">[</span><span class="number">100</span><span class="punct">,</span><span class="number">100</span><span class="punct">]</span>
<span class="ident">x</span><span class="punct">,</span><span class="ident">y</span> <span class="punct">=</span> <span class="punct">[</span><span class="number">0</span><span class="punct">,</span><span class="number">290</span><span class="punct">]</span>
<span class="ident">xoffset</span> <span class="punct">=</span> <span class="number">105</span>
<span class="ident">yoffset</span> <span class="punct">=</span> <span class="number">130</span>

<span class="comment"># ORIGINAL image, resized to fit within w,h:</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">original</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># HUE: rotate color wheel by degrees</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">hue</span><span class="punct">(</span><span class="number">45</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">hue</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># EXPOSURE: increase/decrease exposure by f-stops</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">exposure</span><span class="punct">(</span><span class="number">1.0</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">exposure</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># SATURATION: adjust saturation by multiplier</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">saturation</span><span class="punct">(</span><span class="number">2.0</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">saturation</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># (go to next row)</span>
<span class="ident">x</span> <span class="punct">=</span> <span class="number">0</span>
<span class="ident">y</span> <span class="punct">-=</span> <span class="ident">yoffset</span>

<span class="comment"># CONTRAST: adjust contrast by multiplier</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">contrast</span><span class="punct">(</span><span class="number">2.0</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">contrast</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># BRIGHTNESS: adjust brightness</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">brightness</span><span class="punct">(</span><span class="number">0.5</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">brightness</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># MONOCHROME: convert to a monochrome image</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">monochrome</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">orange</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">monochrome</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># WHITEPOINT: remap the white point</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">whitepoint</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">whiteish</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">white point</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># (go to next row)</span>
<span class="ident">x</span> <span class="punct">=</span> <span class="number">0</span>
<span class="ident">y</span> <span class="punct">-=</span> <span class="ident">yoffset</span>

<span class="comment"># CHAINING: apply multiple effects at once</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">hue</span><span class="punct">(</span><span class="number">60</span><span class="punct">).</span><span class="ident">saturation</span><span class="punct">(</span><span class="number">2.0</span><span class="punct">).</span><span class="ident">contrast</span><span class="punct">(</span><span class="number">2.5</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">img</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">multi effects</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="comment"># COLORS: sample random colors from the image and render as a gradient</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="ident">w</span><span class="punct">,</span><span class="ident">h</span><span class="punct">)</span>              <span class="comment"># reset the image and scale to fit within w,h</span>
<span class="ident">colors</span> <span class="punct">=</span> <span class="ident">img</span><span class="punct">.</span><span class="ident">colors</span><span class="punct">(</span><span class="number">10</span><span class="punct">).</span><span class="ident">sort!</span>   <span class="comment"># select 10 random colors and sort by brightness</span>
<span class="ident">gradient</span> <span class="punct">=</span> <span class="constant">Gradient</span><span class="punct">.</span><span class="ident">new</span><span class="punct">(</span><span class="ident">colors</span><span class="punct">)</span> <span class="comment"># create a new gradient using the selected colors</span>
<span class="ident">rect</span> <span class="punct">=</span> <span class="constant">Path</span><span class="punct">.</span><span class="ident">new</span><span class="punct">.</span><span class="ident">rect</span><span class="punct">(</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">,</span><span class="ident">img</span><span class="punct">.</span><span class="ident">width</span><span class="punct">,</span><span class="ident">img</span><span class="punct">.</span><span class="ident">height</span><span class="punct">)</span> <span class="comment"># create a rectangle the size of the image</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">beginclip</span><span class="punct">(</span><span class="ident">rect</span><span class="punct">)</span>          <span class="comment"># begin clipping so the gradient will only fill the rectangle</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">gradient</span><span class="punct">(</span><span class="ident">gradient</span><span class="punct">,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">,</span><span class="ident">x</span><span class="punct">+</span><span class="ident">img</span><span class="punct">.</span><span class="ident">width</span><span class="punct">,</span><span class="ident">y</span><span class="punct">+</span><span class="ident">img</span><span class="punct">.</span><span class="ident">height</span><span class="punct">)</span> <span class="comment"># draw the gradient between opposite corners of the rectangle</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">endclip</span>                  <span class="comment"># end clipping so we can draw on the rest of the canvas</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">get colors</span><span class="punct">&quot;,</span><span class="ident">x</span><span class="punct">,</span><span class="ident">y</span><span class="punct">-</span><span class="number">15</span><span class="punct">)</span>    <span class="comment"># add text label</span>
<span class="ident">x</span> <span class="punct">+=</span> <span class="ident">xoffset</span>

<span class="ident">canvas</span><span class="punct">.</span><span class="ident">save</span>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://hcg.drtoast.com/image-color-adjustments/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Gradients</title>
		<link>http://hcg.drtoast.com/gradients/</link>
		<comments>http://hcg.drtoast.com/gradients/#comments</comments>
		<pubDate>Mon, 30 Jun 2008 08:11:13 +0000</pubDate>
		<dc:creator>drtoast</dc:creator>
				<category><![CDATA[Color]]></category>
		<category><![CDATA[Examples]]></category>

		<guid isPermaLink="false">http://rcg.drtoast.com/?p=14</guid>
		<description><![CDATA[Radial or linear gradients may be drawn by first specifying their main constituent colors, then applying to the canvas with a start and endpoint. (warning: crashes in MacRuby 0.4) #!/usr/local/bin/macruby framework 'cocoa' require 'rubygems' require 'hotcocoa/graphics' include HotCocoa include Graphics # FIXME: SEGFAULT!! # set up the canvas and font canvas = Canvas.new :type =&#62; [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://hcg.drtoast.com/wp-content/uploads/2008/06/color-gradients.png"><img class="size-full wp-image-13" title="color-gradients" src="http://hcg.drtoast.com/wp-content/uploads/2008/06/color-gradients.png" alt="" width="400" height="400" /></a></p>
<p>Radial or linear gradients may be drawn by first specifying their main constituent colors, then applying to the canvas with a start and endpoint.  (warning: crashes in MacRuby 0.4)</p>
<pre><span class="comment">#!/usr/local/bin/macruby</span>

<span class="ident">framework</span> <span class="punct">'</span><span class="string">cocoa</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">rubygems</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">hotcocoa/graphics</span><span class="punct">'</span>
<span class="ident">include</span> <span class="constant">HotCocoa</span>
<span class="ident">include</span> <span class="constant">Graphics</span>

<span class="comment"># FIXME: SEGFAULT!!</span>

<span class="comment"># set up the canvas and font</span>
<span class="ident">canvas</span> <span class="punct">=</span> <span class="constant">Canvas</span><span class="punct">.</span><span class="ident">new</span> <span class="symbol">:type</span> <span class="punct">=&gt;</span> <span class="symbol">:image</span><span class="punct">,</span> <span class="symbol">:filename</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">gradients.png</span><span class="punct">',</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">400</span><span class="punct">,</span><span class="number">400</span><span class="punct">]</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">background</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">black</span><span class="punct">)</span>

<span class="comment"># create a new gradient</span>
<span class="ident">gradient</span> <span class="punct">=</span> <span class="constant">Gradient</span><span class="punct">.</span><span class="ident">new</span>

<span class="comment"># set the component colors of the gradient</span>
<span class="ident">gradient</span><span class="punct">.</span><span class="ident">set</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">black</span><span class="punct">,</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">blue</span><span class="punct">,</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">red</span><span class="punct">.</span><span class="ident">darken</span><span class="punct">,</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">orange</span><span class="punct">)</span>

<span class="comment"># draw a linear gradient starting at 50,50 and ending at 200,200</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">gradient</span><span class="punct">(</span><span class="ident">gradient</span><span class="punct">,</span> <span class="number">50</span><span class="punct">,</span><span class="number">50</span><span class="punct">,</span><span class="number">200</span><span class="punct">,</span><span class="number">200</span><span class="punct">)</span>

<span class="comment"># do not extend gradient beyond its start/endpoints</span>
<span class="ident">gradient</span><span class="punct">.</span><span class="ident">pre</span><span class="punct">(</span><span class="constant">false</span><span class="punct">)</span>
<span class="ident">gradient</span><span class="punct">.</span><span class="ident">post</span><span class="punct">(</span><span class="constant">false</span><span class="punct">)</span>

<span class="comment"># draw a radial gradient starting at 200,200 with radius 100</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">radial</span><span class="punct">(</span><span class="ident">gradient</span><span class="punct">,</span> <span class="number">200</span><span class="punct">,</span><span class="number">200</span><span class="punct">,</span><span class="number">100</span><span class="punct">)</span>

<span class="comment"># save the canvas</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">save</span></pre>
]]></content:encoded>
			<wfw:commentRss>http://hcg.drtoast.com/gradients/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Image Color Parsing</title>
		<link>http://hcg.drtoast.com/color-parsing/</link>
		<comments>http://hcg.drtoast.com/color-parsing/#comments</comments>
		<pubDate>Mon, 30 Jun 2008 07:37:18 +0000</pubDate>
		<dc:creator>drtoast</dc:creator>
				<category><![CDATA[Color]]></category>
		<category><![CDATA[Examples]]></category>

		<guid isPermaLink="false">http://rcg.drtoast.com/?p=6</guid>
		<description><![CDATA[You can load an image, grab an array of colors from it, and then apply those colors to other objects on the canvas. #!/usr/local/bin/macruby framework 'cocoa' require 'rubygems' require 'hotcocoa/graphics' include HotCocoa include Graphics # set up the canvas and font canvas = Canvas.new :type =&#62; :image, :filename =&#62; 'parsing.png', :size =&#62; [400,400] canvas.background(Color.black) canvas.shadow [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-16" title="color-parsing" src="http://hcg.drtoast.com/wp-content/uploads/2008/07/color-parsing.png" alt="" width="400" height="400" /></p>
<p style="text-align: left;">You can load an image, grab an array of colors from it, and then apply those colors to other objects on the canvas.</p>
<pre><span class="comment">#!/usr/local/bin/macruby</span>

<span class="ident">framework</span> <span class="punct">'</span><span class="string">cocoa</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">rubygems</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">hotcocoa/graphics</span><span class="punct">'</span>
<span class="ident">include</span> <span class="constant">HotCocoa</span>
<span class="ident">include</span> <span class="constant">Graphics</span>

<span class="comment"># set up the canvas and font</span>
<span class="ident">canvas</span> <span class="punct">=</span> <span class="constant">Canvas</span><span class="punct">.</span><span class="ident">new</span> <span class="symbol">:type</span> <span class="punct">=&gt;</span> <span class="symbol">:image</span><span class="punct">,</span> <span class="symbol">:filename</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">parsing.png</span><span class="punct">',</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">400</span><span class="punct">,</span><span class="number">400</span><span class="punct">]</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">background</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">black</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">shadow</span>

<span class="comment"># load an image and select 100 random colors</span>
<span class="ident">image</span> <span class="punct">=</span> <span class="constant">Image</span><span class="punct">.</span><span class="ident">new</span><span class="punct">('</span><span class="string">italy.jpg</span><span class="punct">')</span>
<span class="ident">randomcolors</span> <span class="punct">=</span> <span class="ident">image</span><span class="punct">.</span><span class="ident">colors</span><span class="punct">(</span><span class="number">100</span><span class="punct">)</span>

<span class="comment"># create a 20x20 square at 0,0</span>
<span class="ident">square</span> <span class="punct">=</span> <span class="constant">Path</span><span class="punct">.</span><span class="ident">new</span><span class="punct">.</span><span class="ident">rect</span><span class="punct">(</span><span class="number">0</span><span class="punct">,</span><span class="number">0</span><span class="punct">,</span><span class="number">20</span><span class="punct">,</span><span class="number">20</span><span class="punct">,</span><span class="symbol">:center</span><span class="punct">)</span>

<span class="comment"># randomize the color, scale, and rotation of the square</span>
<span class="ident">square</span><span class="punct">.</span><span class="ident">randomize</span><span class="punct">(</span><span class="symbol">:fill</span><span class="punct">,</span> <span class="ident">randomcolors</span><span class="punct">)</span>
<span class="ident">square</span><span class="punct">.</span><span class="ident">randomize</span><span class="punct">(</span><span class="symbol">:scale</span><span class="punct">,</span> <span class="number">1.0</span><span class="punct">..</span><span class="number">5.0</span><span class="punct">)</span>
<span class="ident">square</span><span class="punct">.</span><span class="ident">randomize</span><span class="punct">(</span><span class="symbol">:rotation</span><span class="punct">,</span> <span class="number">0</span><span class="punct">..</span><span class="number">360</span><span class="punct">)</span>

<span class="comment"># draw 100 squares and the original image</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">grid</span><span class="punct">(</span><span class="ident">square</span><span class="punct">,</span><span class="number">10</span><span class="punct">,</span><span class="number">10</span><span class="punct">)</span>
<span class="ident">image</span><span class="punct">.</span><span class="ident">fit</span><span class="punct">(</span><span class="number">120</span><span class="punct">,</span><span class="number">120</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">image</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">save</span></pre>
]]></content:encoded>
			<wfw:commentRss>http://hcg.drtoast.com/color-parsing/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Color Harmony Schemes</title>
		<link>http://hcg.drtoast.com/color-rules/</link>
		<comments>http://hcg.drtoast.com/color-rules/#comments</comments>
		<pubDate>Mon, 30 Jun 2008 06:55:23 +0000</pubDate>
		<dc:creator>drtoast</dc:creator>
				<category><![CDATA[Color]]></category>
		<category><![CDATA[Examples]]></category>

		<guid isPermaLink="false">http://rcg.drtoast.com/?p=3</guid>
		<description><![CDATA[Various sets of colors can be generated from a single starting color by using the various classical color harmony schemes.  For more information, see Color Theory on Wikipedia. #!/usr/local/bin/macruby framework 'cocoa' require 'rubygems' require 'hotcocoa/graphics' include HotCocoa include Graphics # set up the canvas and font canvas = Canvas.new :type =&#62; :image, :filename =&#62; 'harmony.png', [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><span style="color: #0000ee; text-decoration: underline;"><a href="http://hcg.drtoast.com/wp-content/uploads/2008/06/color-rules.png"></a><a href="http://hcg.drtoast.com/wp-content/uploads/2008/07/color-harmony.png"><img class="aligncenter size-full wp-image-18" title="color-harmony" src="http://hcg.drtoast.com/wp-content/uploads/2008/07/color-harmony.png" alt="" width="400" height="400" /></a><br />
</span></p>
<p style="text-align: left;">Various sets of colors can be generated from a single starting color by using the various classical color harmony schemes.  For more information, see <a href="http://en.wikipedia.org/wiki/Color_theory" target="_blank">Color Theory</a> on Wikipedia.</p>
<pre><span class="comment">#!/usr/local/bin/macruby</span>

<span class="ident">framework</span> <span class="punct">'</span><span class="string">cocoa</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">rubygems</span><span class="punct">'</span>
<span class="ident">require</span> <span class="punct">'</span><span class="string">hotcocoa/graphics</span><span class="punct">'</span>
<span class="ident">include</span> <span class="constant">HotCocoa</span>
<span class="ident">include</span> <span class="constant">Graphics</span>

<span class="comment"># set up the canvas and font</span>
<span class="ident">canvas</span> <span class="punct">=</span> <span class="constant">Canvas</span><span class="punct">.</span><span class="ident">new</span> <span class="symbol">:type</span> <span class="punct">=&gt;</span> <span class="symbol">:image</span><span class="punct">,</span> <span class="symbol">:filename</span> <span class="punct">=&gt;</span> <span class="punct">'</span><span class="string">harmony.png</span><span class="punct">',</span> <span class="symbol">:size</span> <span class="punct">=&gt;</span> <span class="punct">[</span><span class="number">400</span><span class="punct">,</span><span class="number">400</span><span class="punct">]</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">background</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">white</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">font</span><span class="punct">('</span><span class="string">Skia</span><span class="punct">')</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">fontsize</span><span class="punct">(</span><span class="number">12</span><span class="punct">)</span>

<span class="comment"># create a new color with the specified red, green, blue, and alpha values</span>
<span class="ident">blue</span> <span class="punct">=</span> <span class="constant">Color</span><span class="punct">.</span><span class="ident">new</span><span class="punct">(</span><span class="number">0.0</span><span class="punct">,</span><span class="number">0.4</span><span class="punct">,</span><span class="number">0.6</span><span class="punct">,</span><span class="number">1.0</span><span class="punct">)</span>

<span class="comment"># draw the original color</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">translate</span><span class="punct">(</span><span class="number">135</span><span class="punct">,</span><span class="number">350</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">original color</span><span class="punct">&quot;,-</span><span class="number">115</span><span class="punct">,</span><span class="number">10</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">fill</span><span class="punct">(</span><span class="ident">blue</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">rect</span><span class="punct">(</span><span class="number">0</span><span class="punct">,</span><span class="number">0</span><span class="punct">,</span><span class="number">255</span><span class="punct">,</span><span class="number">30</span><span class="punct">)</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">fill</span><span class="punct">(</span><span class="constant">Color</span><span class="punct">.</span><span class="ident">black</span><span class="punct">)</span>

<span class="comment"># create a rectangle to use as a color swatch</span>
<span class="ident">swatch</span> <span class="punct">=</span> <span class="constant">Path</span><span class="punct">.</span><span class="ident">new</span><span class="punct">.</span><span class="ident">rect</span><span class="punct">(</span><span class="number">0</span><span class="punct">,</span><span class="number">0</span><span class="punct">,</span><span class="number">15</span><span class="punct">,</span><span class="number">30</span><span class="punct">)</span>
<span class="ident">swatch</span><span class="punct">.</span><span class="ident">increment</span><span class="punct">(</span><span class="symbol">:x</span><span class="punct">,</span> <span class="number">15</span><span class="punct">)</span>

<span class="comment"># draw harmony schemes derived from this color</span>
<span class="keyword">for</span> <span class="ident">scheme</span> <span class="keyword">in</span> <span class="punct">[</span>
  <span class="symbol">:complementary</span><span class="punct">,</span><span class="symbol">:split_complementary</span><span class="punct">,</span><span class="symbol">:left_complement</span><span class="punct">,</span>
  <span class="symbol">:right_complement</span><span class="punct">,</span><span class="symbol">:monochrome</span><span class="punct">,</span><span class="symbol">:triad</span><span class="punct">,</span><span class="symbol">:tetrad</span><span class="punct">,</span><span class="symbol">:compound</span><span class="punct">,</span>
  <span class="symbol">:flipped_compound</span>
  <span class="punct">]</span> <span class="keyword">do</span>
  <span class="ident">canvas</span><span class="punct">.</span><span class="ident">translate</span><span class="punct">(</span><span class="number">0</span><span class="punct">,-</span><span class="number">38</span><span class="punct">)</span>
  <span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(</span><span class="ident">scheme</span><span class="punct">,-</span><span class="number">115</span><span class="punct">,</span><span class="number">10</span><span class="punct">)</span>
  <span class="ident">swatch</span><span class="punct">.</span><span class="ident">increment</span><span class="punct">(</span><span class="symbol">:fill</span><span class="punct">,</span> <span class="ident">blue</span><span class="punct">.</span><span class="ident">send</span><span class="punct">(</span><span class="ident">scheme</span><span class="punct">).</span><span class="ident">sort</span><span class="punct">)</span>
  <span class="ident">canvas</span><span class="punct">.</span><span class="ident">draw</span><span class="punct">(</span><span class="ident">swatch</span><span class="punct">,</span><span class="number">0</span><span class="punct">,</span><span class="number">0</span><span class="punct">,</span><span class="number">17</span><span class="punct">)</span>
<span class="keyword">end</span>

<span class="comment"># save the canvas</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">save</span>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://hcg.drtoast.com/color-rules/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

