<?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>PixelStation &#187; graphics</title>
	<atom:link href="http://pixelstation.ca/tag/graphics/feed/" rel="self" type="application/rss+xml" />
	<link>http://pixelstation.ca</link>
	<description>Development and Design</description>
	<lastBuildDate>Mon, 21 Dec 2009 19:51:59 +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>Vectors &#8211; Part 1</title>
		<link>http://pixelstation.ca/2009/12/2d-and-3d-math-part-1-vectors/</link>
		<comments>http://pixelstation.ca/2009/12/2d-and-3d-math-part-1-vectors/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 06:23:26 +0000</pubDate>
		<dc:creator>Jordan</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[c++]]></category>
		<category><![CDATA[graphics]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[vectors]]></category>

		<guid isPermaLink="false">http://pixelstation.ca/?p=56</guid>
		<description><![CDATA[One of the biggest challenges for a game programmer is understanding how to represent position and movement in 2D and 3D space. In this tutorial I will teach you the basics of understanding vectors in 2D and 3D space. Vectors For the most part, we use vectors. In math and physics, vectors are usually represented [...]]]></description>
			<content:encoded><![CDATA[<p>One of the biggest challenges for a game programmer is understanding how to represent position and movement in 2D and 3D space. In this tutorial I will teach you the basics of understanding vectors in 2D and 3D space.</p>
<h1>Vectors</h1>
<p>For the most part, we use <a title="Euclidean vector - Wikipedia" href="http://en.wikipedia.org/wiki/Euclidean_vector" target="_blank">vectors</a>. In math and physics, vectors are usually represented by a <strong>direction (angle)</strong> and a <strong>magnitude (length)</strong>.<br />
See the diagram below (imagine the hypotenuse as an arrow):</p>
<p><img class="alignnone size-medium wp-image-64" title="Triangle" src="http://pixelstation.ca/wp-content/uploads/2009/12/triangle-300x160.GIF" alt="Triangle" width="300" height="160" /></p>
<p><strong>Theta</strong> (displayed as θ) is your angle in either degrees or radians (I will always talk about angles in degrees). The <strong>hypotenuse</strong> is the longest side of the triangle (your length or magnitude). The <strong>adjacent</strong> side is the side that touches the angle you&#8217;re working with, the <strong>opposite</strong> side is the side across from the angle. The adjacent and opposite sides are often your <strong>X and Y components</strong>, respectively.</p>
<p><span id="more-56"></span>In programming, we use the X and Y components so often that we just store and use them instead of the angle and magnitude.</p>
<p>Say we have a triangle with and angle and a magnitude, but we want the components. Here&#8217;s how to get them:</p>
<p>To get the components we use <strong><em>SOH CAH TOA</em></strong>, meaning this</p>
<p><img class="alignnone size-full wp-image-66" title="sohcahtoa" src="http://pixelstation.ca/wp-content/uploads/2009/12/sohcahtoa.gif" alt="sohcahtoa" width="161" height="117" /></p>
<p>so,<br />
<em>sine(θ)=O/H<br />
cosine(θ)=A/H<br />
tangent(θ)=O/A</em><br />
*(θ just represents the angle)</p>
<p>keeping in mind that opposite will be our Y component and adjacent will be our X component, we come up with this</p>
<p><em>sine(theta) = Y/H<br />
cosine(theta) = X/H</em><br />
(we don&#8217;t need tangent at the moment)</p>
<p>and finally, this can be rearranged to make</p>
<p><em>Y = H × sine(theta)<br />
X = H × cosine(theta)</em></p>
<h1>Finally, Time for Some Code</h1>
<p>We&#8217;ve got a good grasp on vectors now, so we need to make some code. How do we represent a vector in C++? Easy, like this:</p>

<div class="wp_syntax"><div class="code"><pre class="cpp" style="font-family:monospace;"><span style="color: #0000ff;">struct</span> Vector2D
<span style="color: #008000;">&#123;</span>
    <span style="color: #0000ff;">double</span> x, y<span style="color: #008080;">;</span>
<span style="color: #008000;">&#125;</span><span style="color: #008080;">;</span></pre></div></div>

<p>There, we now have a type Vector2D with the inner components &#8216;x&#8217; and &#8216;y&#8217;.</p>
<p>Next, we have a vector. What can we use it for? The answer to that is &#8220;just about anything you want.&#8221; Vectors are used for so many applications that it&#8217;s nearly impossible to tell you what to use it for. The main things (in game programming) are position, direction and velocity.</p>
<h1>2D Is So Old. I Need 3D.</h1>
<p>So just add the Z component. It&#8217;s that easy (for now).</p>

<div class="wp_syntax"><div class="code"><pre class="cpp" style="font-family:monospace;"><span style="color: #0000ff;">struct</span> Vector3D
<span style="color: #008000;">&#123;</span>
    <span style="color: #0000ff;">double</span> x, y, z<span style="color: #008080;">;</span>
<span style="color: #008000;">&#125;</span><span style="color: #008080;">;</span></pre></div></div>

<p>Later, things won&#8217;t be so simple.</p>
<h1>Coming Up Next&#8230;</h1>
<p>We&#8217;ll be working with adding, subtracting vectors and multiplying and dividing scalars (magnitudes with no direction, aka regular numbers).</p>
]]></content:encoded>
			<wfw:commentRss>http://pixelstation.ca/2009/12/2d-and-3d-math-part-1-vectors/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Still alive and working.</title>
		<link>http://pixelstation.ca/2009/12/still-alive-and-working/</link>
		<comments>http://pixelstation.ca/2009/12/still-alive-and-working/#comments</comments>
		<pubDate>Mon, 07 Dec 2009 04:52:51 +0000</pubDate>
		<dc:creator>Jordan</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[c++]]></category>
		<category><![CDATA[devil]]></category>
		<category><![CDATA[graphics]]></category>
		<category><![CDATA[ilut]]></category>
		<category><![CDATA[opengl]]></category>

		<guid isPermaLink="false">http://pixelstation.ca/?p=50</guid>
		<description><![CDATA[I&#8217;m still here, just been busy with life. I&#8217;ve mostly been busy programming with OpenGL. I&#8217;m hoping to write a few simple tutorials using GLUT to get rid of the nasty Windows code. I&#8217;ll also be posting a DevIL image loading tutorial, because there are so painfully few on the internet. Basically, anything I struggle [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m still here, just been busy with life.</p>
<p>I&#8217;ve mostly been busy programming with OpenGL. I&#8217;m hoping to write a few simple tutorials using GLUT to get rid of the nasty Windows code. I&#8217;ll also be posting a DevIL image loading tutorial, because there are so painfully few on the internet. Basically, anything I struggle with finding information on, I will post a tutorial for when I get it figured out.</p>
<p>Planned so far:</p>
<ul>
<li>Making an OpenGL window with GLUT (Windows)</li>
<li>Drawing primitives</li>
<li>Changing view and using a &#8216;camera&#8217;</li>
<li>Light</li>
<li>Materials</li>
<li>Loading textures with DevIL and displaying with OpenGL</li>
<li>Mixing materials and texturing</li>
<li>Putting it all together (Light, materials and textures)</li>
</ul>
<p>Some extra tutorials</p>
<ul>
<li>Tips and tricks (skyboxes, skydomes, skyspheres)</li>
<li>Collisions and 3D Vector math (probably split in two tutorials)</li>
<li>Screenshots with OpenGL and DevIL</li>
</ul>
<p>That&#8217;s quite a bit of code to write, so it&#8217;ll take me a while. I&#8217;ll likely end up writing some over the Christmas break, and during work (working at the IT lab at Humber is boring, but it gives me lots of time to code!).</p>
<p>Anyway, heres a couple screenies of my program!</p>

<div class="ngg-galleryoverview" id="ngg-gallery-4-50">


	<!-- Piclense link -->
	<div class="piclenselink">
		<a class="piclenselink" href="javascript:PicLensLite.start({feedUrl:'http://pixelstation.ca/wp-content/plugins/nextgen-gallery/xml/media-rss.php?gid=4&amp;mode=gallery'});">
			[View with PicLens]		</a>
	</div>
	
	<!-- Thumbnails -->
		
	<div id="ngg-image-33" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160488.png" title="A good look at the particles." class="shutterset_set_4" >
								<img title="screenshot_1260160488" alt="screenshot_1260160488" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160488.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-34" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160627.png" title="A particle fountain." class="shutterset_set_4" >
								<img title="screenshot_1260160627" alt="screenshot_1260160627" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160627.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-35" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160638.png" title="Wider view of the fountain and a bit of terrain." class="shutterset_set_4" >
								<img title="screenshot_1260160638" alt="screenshot_1260160638" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160638.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-36" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160705.png" title="Lighting tests." class="shutterset_set_4" >
								<img title="screenshot_1260160705" alt="screenshot_1260160705" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160705.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-37" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160707.png" title="More lighting tests." class="shutterset_set_4" >
								<img title="screenshot_1260160707" alt="screenshot_1260160707" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160707.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-38" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160715.png" title="Spotlight lighting on terrain." class="shutterset_set_4" >
								<img title="screenshot_1260160715" alt="screenshot_1260160715" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160715.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-39" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160768.png" title="Wide view of how the world is set up. Terrain + Skydome" class="shutterset_set_4" >
								<img title="screenshot_1260160768" alt="screenshot_1260160768" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160768.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-40" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/screenshot_1260160790.png" title="Pretty particles." class="shutterset_set_4" >
								<img title="screenshot_1260160790" alt="screenshot_1260160790" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_screenshot_1260160790.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-41" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://pixelstation.ca/wp-content/gallery/programming/copy_0_net_pong.jpg" title="The in-game view of NetPong
Download it here: http://pixelstation.ca/wp-content/uploads/2010/04/NetPong.zip" class="shutterset_set_4" >
								<img title="net_pong" alt="net_pong" src="http://pixelstation.ca/wp-content/gallery/programming/thumbs/thumbs_copy_0_net_pong.jpg" width="95" height="75" />
							</a>
		</div>
	</div>
	
		
 	 	
	<!-- Pagination -->
 	<div class='ngg-clear'></div>
 	
</div>


]]></content:encoded>
			<wfw:commentRss>http://pixelstation.ca/2009/12/still-alive-and-working/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
