<?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>Hazel McKendrick &#187; Texture Generation</title>
	<atom:link href="http://hazelmckendrick.com/journal/tag/texture-generation/feed" rel="self" type="application/rss+xml" />
	<link>http://hazelmckendrick.com</link>
	<description>Programming and Games Technology Portfolio</description>
	<lastBuildDate>Wed, 11 Aug 2010 10:00:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Coding Coder Art</title>
		<link>http://hazelmckendrick.com/journal/coding-coder-art</link>
		<comments>http://hazelmckendrick.com/journal/coding-coder-art#comments</comments>
		<pubDate>Fri, 22 Jan 2010 20:46:26 +0000</pubDate>
		<dc:creator>Hazel</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[C++]]></category>
		<category><![CDATA[ImageMagick]]></category>
		<category><![CDATA[Texture Generation]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://hazelmckendrick.com/?p=1775</guid>
		<description><![CDATA[Starting work on a 3D project as of yet lacking in assets, I was considering cracking open Paint.Net to create some default textures. However, being a programmer rather than an artist, I figured I&#8217;d better investigate some alternatives. I reduced my work, and made even more hideous coder art in the process! I ended up [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://hazelmckendrick.com/wp-content/uploads/2010/01/ca.bmp"><img src="http://hazelmckendrick.com/wp-content/uploads/2010/01/ca.bmp" alt="" title="art" width="150" height="150" class="alignleft size-full wp-image-1780" /></a> Starting work on a 3D project as of yet lacking in assets, I was considering cracking open Paint.Net to create some default textures.  However, being a programmer rather than an artist, I figured I&#8217;d better investigate some alternatives.  I reduced my work, and made even more hideous coder art in the process!</p>
<p>I ended up trying two options: .Net Graphics support (which uses GDI) and everyone&#8217;s favourite image manipulation tool <a href="http://www.imagemagick.org/script/index.php">ImageMagick</a>.  My aim was to create bright an horrible images, to ensure they don&#8217;t remain in the project by mistake, with text on them to show what object my many cubes and spheres represent. <span id="more-1775"></span></p>
<p>First up, my C# script.  It created the fantastic texture you see above, and can be run from a windows command line as<br />
<code> > DefaultTexGen.exe Text_To_Write FilenameToCreate.bmp</code></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF;">using</span> <span style="color: #008080;">System</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Text</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Drawing</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Drawing.Imaging</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Drawing.Text</span><span style="color: #008000;">;</span>
&nbsp;
<span style="color: #008080; font-style: italic;">//creates a default texture with text on it</span>
<span style="color: #0600FF;">namespace</span> DefaultTexGen
<span style="color: #000000;">&#123;</span>
    <span style="color: #FF0000;">class</span> Program
    <span style="color: #000000;">&#123;</span>
        <span style="color: #0600FF;">static</span> <span style="color: #0600FF;">void</span> Main<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">string</span><span style="color: #000000;">&#91;</span><span style="color: #000000;">&#93;</span> args<span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #008080; font-style: italic;">//check whether arguments were passed</span>
            <span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>args.<span style="color: #0000FF;">Length</span> <span style="color: #008000;">&lt;</span> <span style="color: #FF0000;">2</span><span style="color: #000000;">&#41;</span>
            <span style="color: #000000;">&#123;</span>
                Console.<span style="color: #0000FF;">WriteLine</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;Please run with arguments for image text and output file name.&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                return<span style="color: #008000;">;</span>
            <span style="color: #000000;">&#125;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//get name and output file from arguments</span>
            <span style="color: #FF0000;">string</span> name <span style="color: #008000;">=</span> args<span style="color: #000000;">&#91;</span><span style="color: #FF0000;">0</span><span style="color: #000000;">&#93;</span><span style="color: #008000;">;</span>
            <span style="color: #FF0000;">string</span> file <span style="color: #008000;">=</span> args<span style="color: #000000;">&#91;</span><span style="color: #FF0000;">1</span><span style="color: #000000;">&#93;</span><span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//set width and height (square), could get these from args too</span>
            <span style="color: #FF0000;">int</span> dimension <span style="color: #008000;">=</span> <span style="color: #FF0000;">256</span><span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//create the bitmap</span>
            Bitmap genmap <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Bitmap<span style="color: #000000;">&#40;</span>dimension, dimension<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//apply the colour and text</span>
            FillTexture<span style="color: #000000;">&#40;</span>genmap<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            WriteText<span style="color: #000000;">&#40;</span>name, genmap<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//output bitmap</span>
            genmap.<span style="color: #0000FF;">Save</span><span style="color: #000000;">&#40;</span>file<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            Console.<span style="color: #0000FF;">WriteLine</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;Image &quot;</span> <span style="color: #008000;">+</span> file <span style="color: #008000;">+</span> <span style="color: #666666;">&quot; created.&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
        <span style="color: #000000;">&#125;</span>
    <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>This relies on two further functions.  The first of these colours the image with a simple gradient, but could be replaced with any colouring function.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;">        <span style="color: #008080; font-style: italic;">//fill a bitmap with a random gradient</span>
        <span style="color: #008080; font-style: italic;">//could replace with other colouring function</span>
        <span style="color: #0600FF;">static</span> <span style="color: #0600FF;">void</span> FillTexture<span style="color: #000000;">&#40;</span>Bitmap _target<span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//set random r,g,b values between 0 and 1</span>
            Random rand <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Random<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            <span style="color: #FF0000;">float</span> rCol <span style="color: #008000;">=</span> <span style="color: #000000;">&#40;</span><span style="color: #FF0000;">float</span><span style="color: #000000;">&#41;</span>rand.<span style="color: #0000FF;">NextDouble</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            <span style="color: #FF0000;">float</span> gCol <span style="color: #008000;">=</span> <span style="color: #000000;">&#40;</span><span style="color: #FF0000;">float</span><span style="color: #000000;">&#41;</span>rand.<span style="color: #0000FF;">NextDouble</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            <span style="color: #FF0000;">float</span> bCol <span style="color: #008000;">=</span> <span style="color: #000000;">&#40;</span><span style="color: #FF0000;">float</span><span style="color: #000000;">&#41;</span>rand.<span style="color: #0000FF;">NextDouble</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//fill each pixel</span>
            <span style="color: #0600FF;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #FF0000;">int</span> x <span style="color: #008000;">=</span> <span style="color: #FF0000;">0</span><span style="color: #008000;">;</span> x <span style="color: #008000;">&lt;</span> _target.<span style="color: #0000FF;">Width</span><span style="color: #008000;">;</span> x<span style="color: #008000;">++</span><span style="color: #000000;">&#41;</span>
            <span style="color: #000000;">&#123;</span>
                <span style="color: #0600FF;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #FF0000;">int</span> y <span style="color: #008000;">=</span> <span style="color: #FF0000;">0</span><span style="color: #008000;">;</span> y <span style="color: #008000;">&lt;</span> _target.<span style="color: #0000FF;">Height</span><span style="color: #008000;">;</span> y<span style="color: #008000;">++</span><span style="color: #000000;">&#41;</span>
                <span style="color: #000000;">&#123;</span>
                    Color pixColour <span style="color: #008000;">=</span> Color.<span style="color: #0000FF;">FromArgb</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span><span style="color: #FF0000;">int</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#40;</span><span style="color: #FF0000;">255</span> <span style="color: #008000;">*</span> rCol<span style="color: #000000;">&#41;</span>, Math.<span style="color: #0000FF;">Min</span><span style="color: #000000;">&#40;</span><span style="color: #FF0000;">255</span>, <span style="color: #000000;">&#40;</span><span style="color: #FF0000;">int</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#40;</span>x <span style="color: #008000;">*</span> gCol<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>, Math.<span style="color: #0000FF;">Min</span><span style="color: #000000;">&#40;</span><span style="color: #FF0000;">255</span>, <span style="color: #000000;">&#40;</span><span style="color: #FF0000;">int</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#40;</span>y <span style="color: #008000;">*</span> bCol<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                    _target.<span style="color: #0000FF;">SetPixel</span><span style="color: #000000;">&#40;</span>x, y, pixColour<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                <span style="color: #000000;">&#125;</span>
            <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>The second actually writes the text to the image.  It calculates a font size to fit the given string onto the texture.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;">        <span style="color: #008080; font-style: italic;">//Fit and write text to a bitmap</span>
        <span style="color: #0600FF;">static</span> <span style="color: #0600FF;">void</span> WriteText<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">string</span> _text, Bitmap _target<span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #008080; font-style: italic;">//calculate the font size to fit the text to the image</span>
            <span style="color: #008080; font-style: italic;">//pixel width in monospaced Courier New = 0.833 point size</span>
            <span style="color: #0600FF;">const</span> <span style="color: #FF0000;">float</span> fontReduce <span style="color: #008000;">=</span> 0.833f<span style="color: #008000;">;</span>
            <span style="color: #0600FF;">const</span> <span style="color: #FF0000;">float</span> edgePadding <span style="color: #008000;">=</span> <span style="color: #FF0000;">20</span><span style="color: #008000;">;</span>
            <span style="color: #FF0000;">float</span> size <span style="color: #008000;">=</span> <span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span>_target.<span style="color: #0000FF;">Width</span> <span style="color: #008000;">-</span> edgePadding<span style="color: #000000;">&#41;</span> <span style="color: #008000;">/</span> _text.<span style="color: #0000FF;">Length</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">/</span> fontReduce<span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//set the max font size to 25</span>
            size <span style="color: #008000;">=</span> Math.<span style="color: #0000FF;">Min</span><span style="color: #000000;">&#40;</span>size, <span style="color: #FF0000;">35</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">//set up font and graphics</span>
            StringFormat format <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> StringFormat<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            format.<span style="color: #0000FF;">Alignment</span> <span style="color: #008000;">=</span> StringAlignment.<span style="color: #0000FF;">Center</span><span style="color: #008000;">;</span>
            Font font <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Font<span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;Courier New&quot;</span>, size<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            Graphics graphics <span style="color: #008000;">=</span> Graphics.<span style="color: #0000FF;">FromImage</span><span style="color: #000000;">&#40;</span>_target<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
            graphics.<span style="color: #0000FF;">DrawString</span><span style="color: #000000;">&#40;</span>_text, font, Brushes.<span style="color: #0000FF;">Black</span>, _target.<span style="color: #0000FF;">Width</span> <span style="color: #008000;">/</span> <span style="color: #FF0000;">2</span>, _target.<span style="color: #0000FF;">Height</span> <span style="color: #008000;">/</span> <span style="color: #FF0000;">3</span>, format<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
        <span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>I&#8217;ll be honest, the second solution (with Imagemagick) is simpler, more flexible, and creates better looking textures.<br />
As an example:<br />
<code>convert -size 256x256 plasma:tomato-steelblue -font Arial -pointsize 20 -draw "text 10,20 Default_Texture" TextureToCreate.jpg</code><br />
Produces the following image:<br />
<a href="http://hazelmckendrick.com/wp-content/uploads/2010/01/tex.jpg"><img src="http://hazelmckendrick.com/wp-content/uploads/2010/01/tex.jpg" alt="" title="tex" width="256" height="256" class="aligncenter size-full wp-image-1790" /></a></p>
<p>Creating a batch/shell script to calculate the correct font size and run this command should be trivial, leading to some disgusting, but useful, textures.</p>
]]></content:encoded>
			<wfw:commentRss>http://hazelmckendrick.com/journal/coding-coder-art/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
