<?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; Images</title>
	<atom:link href="http://hcg.drtoast.com/category/examples/images/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 Moving and Scaling</title>
		<link>http://hcg.drtoast.com/image-moving-and-scaling/</link>
		<comments>http://hcg.drtoast.com/image-moving-and-scaling/#comments</comments>
		<pubDate>Wed, 02 Jul 2008 07:53:04 +0000</pubDate>
		<dc:creator>drtoast</dc:creator>
				<category><![CDATA[Examples]]></category>
		<category><![CDATA[Images]]></category>

		<guid isPermaLink="false">http://rcg.drtoast.com/?p=25</guid>
		<description><![CDATA[Various scaling and moving operations are available for images. You can scale an image proportionally by a percentage, scale it to fit proportionally within a bounding box, or scale width and height to fit exactly within a bounding box. #!/usr/local/bin/macruby framework 'cocoa' require 'rubygems' require 'hotcocoa/graphics' include HotCocoa include Graphics # set up the canvas [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-moving.png"><img class="aligncenter size-full wp-image-26" title="image-moving" src="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-moving.png" alt="" width="400" height="400" /></a></p>
<p>Various scaling and moving operations are available for images.  You can scale an image proportionally by a percentage, scale it to fit proportionally within a bounding box, or scale width and height to fit exactly within a bounding box.</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">moving.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="constant">Color</span><span class="punct">.</span><span class="ident">white</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="number">14</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">fill</span> <span class="constant">Color</span><span class="punct">.</span><span class="ident">black</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">stroke</span> <span class="constant">Color</span><span class="punct">.</span><span class="ident">red</span>

<span class="comment"># load an 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="comment"># SCALE (multiply both dimensions by a scaling factor)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">scale</span><span class="punct">(</span><span class="number">0.2</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="number">0</span><span class="punct">,</span><span class="number">240</span><span class="punct">)</span>  <span class="comment"># draw the image at the specified coordinates</span>
<span class="ident">canvas</span><span class="punct">.</span><span class="ident">text</span><span class="punct">(&quot;</span><span class="string">scale to 20%</span><span class="punct">&quot;,</span><span class="number">0</span><span class="punct">,</span><span class="number">220</span><span class="punct">)</span>

<span class="comment"># FIT (scale to fit within the given dimensions, maintaining original aspect ratio)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span>               <span class="comment"># first reset the image to its original size</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">fit</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">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">white</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">120</span><span class="punct">,</span><span class="number">240</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">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="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="number">133</span><span class="punct">,</span><span class="number">240</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">fit into 100x100</span><span class="punct">&quot;,</span><span class="number">120</span><span class="punct">,</span><span class="number">220</span><span class="punct">)</span>

<span class="comment"># RESIZE (scale to fit exactly within the given dimensions)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">resize</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">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="number">240</span><span class="punct">,</span><span class="number">240</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">resize to 100x100</span><span class="punct">&quot;,</span><span class="number">240</span><span class="punct">,</span><span class="number">220</span><span class="punct">)</span>

<span class="comment"># CROP (to the largest square containing image data)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">scale</span><span class="punct">(</span><span class="number">0.2</span><span class="punct">).</span><span class="ident">crop</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="number">0</span><span class="punct">,</span><span class="number">100</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">crop max square</span><span class="punct">&quot;,</span><span class="number">0</span><span class="punct">,</span><span class="number">80</span><span class="punct">)</span>

<span class="comment"># CROP (within a rectangle starting at x,y with width,height)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">reset</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">scale</span><span class="punct">(</span><span class="number">0.3</span><span class="punct">).</span><span class="ident">crop</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">100</span><span class="punct">,</span><span class="number">100</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="number">120</span><span class="punct">,</span><span class="number">100</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">crop to 100x100</span><span class="punct">&quot;,</span><span class="number">120</span><span class="punct">,</span><span class="number">80</span><span class="punct">)</span>

<span class="comment"># ROTATE</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">origin</span><span class="punct">(</span><span class="symbol">:center</span><span class="punct">)</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">rotate</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="number">300</span><span class="punct">,</span><span class="number">140</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">rotate 45 degrees</span><span class="punct">&quot;,</span><span class="number">250</span><span class="punct">,</span><span class="number">50</span><span class="punct">)</span>

<span class="comment">#img.origin(:center)   # center the image</span>
<span class="comment">#img.translate(0,-150)    # move the image</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-moving-and-scaling/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Image Effects</title>
		<link>http://hcg.drtoast.com/image-effects/</link>
		<comments>http://hcg.drtoast.com/image-effects/#comments</comments>
		<pubDate>Wed, 02 Jul 2008 07:47:52 +0000</pubDate>
		<dc:creator>drtoast</dc:creator>
				<category><![CDATA[Examples]]></category>
		<category><![CDATA[Images]]></category>

		<guid isPermaLink="false">http://rcg.drtoast.com/?p=23</guid>
		<description><![CDATA[You can apply various Photoshop-style filters to images, then render them to 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; 'effects.png', :size =&#62; [400,400] canvas.background(Color.white) canvas.font('Skia') canvas.fontsize(14) canvas.fill(Color.black) # load image file img = Image.new('v2.jpg') [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-effects.png"><img class="aligncenter size-full wp-image-24" title="image-effects" src="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-effects.png" alt="" width="400" height="400" /></a></p>
<p>You can apply various Photoshop-style filters to images, then render them to 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">effects.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 file</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="comment"># set image width/height, starting position, and increment position</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"># CRYSTALLIZE: apply a &quot;crystallize&quot; effect with the given radius</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">crystallize</span><span class="punct">(</span><span class="number">5.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">crystallize</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"># BLOOM: apply a &quot;bloom&quot; effect with the given radius and intensity</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">bloom</span><span class="punct">(</span><span class="number">10</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">bloom</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"># EDGES: detect edges</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">edges</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">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">edges</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"># POSTERIZE: reduce image to the specified number of colors</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">posterize</span><span class="punct">(</span><span class="number">8</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">posterize</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"># TWIRL: rotate around x,y with radius and angle</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">twirl</span><span class="punct">(</span><span class="number">35</span><span class="punct">,</span><span class="number">50</span><span class="punct">,</span><span class="number">40</span><span class="punct">,</span><span class="number">90</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">twirl</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"># EDGEWORK: simulate a woodcut print</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">canvas</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"># needs a black background</span>
<span class="ident">img</span><span class="punct">.</span><span class="ident">edgework</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">edgework</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"># DISPLACEMENT: use a second image as a displacement map</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">img2</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">resize</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="ident">img</span><span class="punct">.</span><span class="ident">displacement</span><span class="punct">(</span><span class="ident">img2</span><span class="punct">,</span> <span class="number">30.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">displacement</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"># DOTSCREEN: simulate a dot screen: center point, angle(0-360), width(1-50), and sharpness(0-1)</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">dotscreen</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">45</span><span class="punct">,</span><span class="number">5</span><span class="punct">,</span><span class="number">0.7</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">dotscreen</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"># SHARPEN: sharpen using the given radius and intensity</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">sharpen</span><span class="punct">(</span><span class="number">2.0</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">sharpen</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"># BLUR: apply a gaussian blur with the given radius</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">blur</span><span class="punct">(</span><span class="number">3.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">blur</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"># MOTION BLUR: apply a motion blur with the given radius and angle</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">motionblur</span><span class="punct">(</span><span class="number">10.0</span><span class="punct">,</span><span class="number">90</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">motion blur</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"># 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/image-effects/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>Image Blend Modes</title>
		<link>http://hcg.drtoast.com/image-blend-modes/</link>
		<comments>http://hcg.drtoast.com/image-blend-modes/#comments</comments>
		<pubDate>Wed, 02 Jul 2008 07:38:54 +0000</pubDate>
		<dc:creator>drtoast</dc:creator>
				<category><![CDATA[Examples]]></category>
		<category><![CDATA[Images]]></category>

		<guid isPermaLink="false">http://rcg.drtoast.com/?p=19</guid>
		<description><![CDATA[You can use various Photoshop-style blend modes to composite two or more images by applying the &#8220;blend&#8221; method to an Image object. #!/usr/local/bin/macruby require 'hotcocoa/graphics' include HotCocoa include Graphics # set up the canvas and font canvas = Canvas.new :type =&#62; :image, :filename =&#62; 'blend.png', :size =&#62; [400,730] canvas.background(Color.white) canvas.font('Skia') canvas.fontsize(14) # set image width,height [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-blendmodes.png"><img class="aligncenter size-full wp-image-20" title="image-blendmodes" src="http://hcg.drtoast.com/wp-content/uploads/2008/07/image-blendmodes.png" alt="" width="400" height="730" /></a></p>
<p>You can use various Photoshop-style blend modes to composite two or more images by applying the &#8220;blend&#8221; method to an Image object.</p>
<pre><span class="comment">#!/usr/local/bin/macruby</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">blend.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">730</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="comment"># set image width,height</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">95</span><span class="punct">,</span><span class="number">95</span><span class="punct">]</span>

<span class="comment"># set initial drawing position</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="ident">canvas</span><span class="punct">.</span><span class="ident">height</span> <span class="punct">-</span> <span class="ident">h</span> <span class="punct">-</span> <span class="number">10</span><span class="punct">]</span>

<span class="comment"># load and resize two images</span>
<span class="ident">imgA</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">resize</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">imgB</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">resize</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"># add image B to image A using each blending mode, and draw to canvas</span>
<span class="keyword">for</span> <span class="ident">blendmode</span> <span class="keyword">in</span> <span class="punct">[</span><span class="symbol">:normal</span><span class="punct">,</span><span class="symbol">:multiply</span><span class="punct">,</span><span class="symbol">:screen</span><span class="punct">,</span><span class="symbol">:overlay</span><span class="punct">,</span><span class="symbol">:darken</span><span class="punct">,</span><span class="symbol">:lighten</span><span class="punct">,</span>
  <span class="symbol">:colordodge</span><span class="punct">,</span><span class="symbol">:colorburn</span><span class="punct">,</span><span class="symbol">:softlight</span><span class="punct">,</span><span class="symbol">:hardlight</span><span class="punct">,</span><span class="symbol">:difference</span><span class="punct">,</span><span class="symbol">:exclusion</span><span class="punct">,</span>
  <span class="symbol">:hue</span><span class="punct">,</span><span class="symbol">:saturation</span><span class="punct">,</span><span class="symbol">:color</span><span class="punct">,</span><span class="symbol">:luminosity</span><span class="punct">,</span><span class="symbol">:maximum</span><span class="punct">,</span><span class="symbol">:minimum</span><span class="punct">,</span><span class="symbol">:add</span><span class="punct">,</span><span class="symbol">:atop</span><span class="punct">,</span>
  <span class="symbol">:in</span><span class="punct">,</span><span class="symbol">:out</span><span class="punct">,</span><span class="symbol">:over</span><span class="punct">]</span> <span class="keyword">do</span>
  <span class="ident">imgA</span><span class="punct">.</span><span class="ident">reset</span><span class="punct">.</span><span class="ident">resize</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">imgA</span><span class="punct">.</span><span class="ident">blend</span><span class="punct">(</span><span class="ident">imgB</span><span class="punct">,</span> <span class="ident">blendmode</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">imgA</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">(</span><span class="ident">blendmode</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="number">15</span><span class="punct">)</span>
  <span class="ident">x</span> <span class="punct">+=</span> <span class="ident">w</span> <span class="punct">+</span> <span class="number">5</span>
  <span class="keyword">if</span> <span class="punct">(</span><span class="ident">x</span> <span class="punct">&gt;</span> <span class="ident">canvas</span><span class="punct">.</span><span class="ident">width</span> <span class="punct">-</span> <span class="ident">w</span> <span class="punct">+</span> <span class="number">5</span><span class="punct">)</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">h</span> <span class="punct">+</span> <span class="number">25</span>
  <span class="keyword">end</span>
<span class="keyword">end</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-blend-modes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

