📄 line01.shtml
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dan's Tutorials: Line Drawing</title>
<LINK REL="stylesheet" HREF="tutorial_styles.css">
</head>
<BODY BGCOLOR="white">
<a name="top"></a>
<BR>
<CENTER>
<!--
<br>
<DIV CLASS="main1">DAN'S</div><div class="main2">Programming Tutorials</DIV>
<br>
<TABLE WIDTH="700" BORDER="0" CELLPADDING="5" CELLSPACING="0">
<TR><TD BGCOLOR="black" ALIGN="center" VALIGN="center"><FONT FACE="arial" COLOR="white"><B>
[</B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center" WIDTH="100"><FONT FACE="arial" COLOR="white"><B>
<A HREF="index.shtml">news</A></B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center"><FONT FACE="arial" COLOR="white"><B>
|</B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center" WIDTH="100"><FONT FACE="arial" COLOR="white"><B>
tutorials</B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center"><FONT FACE="arial" COLOR="white"><B>
|</B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center" WIDTH="100"><FONT FACE="arial" COLOR="white"><B>
<!--A HREF="Files.shtml"--><!--files</a></B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center"><FONT FACE="arial" COLOR="white"><B>
|</B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center" WIDTH="100"><FONT FACE="arial" COLOR="white"><B>
<a href="ResourcesWeb.shtml">links</a></B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center"><FONT FACE="arial" COLOR="white"><B>
|</B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center" WIDTH="100"><FONT FACE="arial" COLOR="white"><B>
<A HREF="Contact.shtml">contact</A></B></FONT>
</TD><TD BGCOLOR="black" ALIGN="center" VALIGN="center"><FONT FACE="arial" COLOR="white"><B>
]</B></FONT>
</TD></TR>
</TABLE>
-->
<BR>
<TABLE WIDTH="700" BORDER="0" CELLSPACING="0" CELLPADDING="0" ALIGN="CENTER" VALIGN="TOP">
<TR>
<TD VALIGN="top" ALIGN="left" WIDTH="200">
<TABLE WIDTH="200" BORDER="1" CELLPADDING="3" CELLSPACING="0">
<TR><TD BGCOLOR="silver" ALIGN="center">
<FONT FACE="arial" COLOR="black"><B>Table of Contents</B></FONT>
</TD></TR>
</TABLE>
<TABLE WIDTH="200" BORDER="0" CELLPADDING="3" CELLSPACING="0"><TR><TD>
<FONT FACE="arial" SIZE="-1">
<BR>
<CENTER><B>3D</B></CENTER>
Creating a cutting-edge engine<BR>
<A HREF="Engine01.shtml">01 - Design document</A><BR>
<A HREF="Engine02.shtml">02 - Overall structure</A><BR>
<BR>
<A HREF="Engine03.shtml">03 - Binary Space Partitioning</A><BR>
<A HREF="Engine04.shtml">04 - Constrctive Solid Geometry</A><BR>
<A HREF="Engine05.shtml">05 - Portals</A><BR>
<A HREF="Engine06.shtml">06 - Possible Visible Set</A><BR>
<A HREF="Engine07.shtml">07 - Radiosity lighting</A><BR>
<!--A HREF="Engine08.shtml"-->08 - Mirrors</A><BR>
<BR>
<!--A HREF="Dictionary.shtml"-->Dictionary of 3D terms</A><BR>
<BR>
<CENTER><B>OTHER</B></CENTER>
<!--A HREF="GeneticAlgorithm.shtml"-->A Genetic Algorithm</A><BR>
<A HREF="Line01.shtml">Line drawing</a><BR>
<!--A HREF="Line02.shtml"-->Line clipping</a><BR>
<!--A HREF="Line03.shtml"-->Line antialiasing</a><BR>
<!--A HREF="Line04.shtml"-->Line thickening</a><BR>
<!--A HREF="Line05.shtml"-->Line curving</a><BR>
<br>
<A HREF="ResourcesPrint.shtml">Resources in print</A><BR>
<A HREF="ResourcesWeb.shtml">Resources on the web</A><BR>
<!--A HREF="ResourcesFiles.shtml"-->Resources to download</A><BR>
<BR>
</FONT>
</TD></TR></TABLE>
<TABLE WIDTH="200" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR><TD HEIGHT="3160"></TD></TR>
<TR><TD ALIGN="left"><FONT FACE="arial" SIZE="-2">Test data results:</FONT><br>
<img src="line0103.jpg" width="110" height="210" alt="I can see the music!" border="0">
</TD></TR>
</TABLE>
</TD>
<TD VALIGN="top" ALIGN="right" WIDTH="500">
<TABLE WIDTH="475" BORDER="0" CELLPADDING="3" CELLSPACING="0">
<TR><TD BGCOLOR="silver">
<FONT FACE="arial"><B>Line Drawing</B></FONT>
</TD></TR>
<TR><TD><FONT FACE="arial" SIZE="-1">
Funny thing, every time I have been interviewed for a game programming job, I've been asked to write
out <i>longhand</i> a line drawing algo. I've watched the people I was being tested with fumble over
this one for a while and then quietly asked "do you want me to write all the special cases, too?" The
point I'm making is that line drawing is one of those things you're going to need to learn just so
you can say you know it. Thought that you could avoid that kind of thing by being a coder, eh? HAR
HAR HAR! *actually falls down he's laughing so hard*<br>
<br>
<hr>
Note: For the remainder of this tutorial the following values will be used:<br>
<ul>
<li><b>pBuf</b>: a pointer to the buffer to write to
<li><b>bWidth</b>: the buffer width, in pixels
<li><b>bHeight</b>: the buffer height, in pixels
<li><b>Ax, Ay</b>: the starting coordinates of the line (whole numbers)
<li><b>Bx, By</b>: the ending coordinates of the line (whole numbers)
</ul>
It is also assumed that the buffer is a single contiguous block of memory begining in the top left
corner and moving left to right, top to bottom.
<hr>
<br>
Line drawing can be as simple or as complicated as you want it to be. Let's start with a few
fundamentals. The first thing we can do is simplify our problem by only drawing from left to right.<br>
</font>
<pre>
<font color="Blue">if</font><font color="Navy">(</font> Ax <font color="Navy">></font> Bx <font color="Navy">) {</font>
<font color="Blue">int</font> c<font color="Navy">;</font>
c <font color="Navy">=</font> Ax<font color="Navy">;</font>
Ax <font color="Navy">=</font> Bx<font color="Navy">;</font>
Bx <font color="Navy">=</font> c<font color="Navy">;</font>
c <font color="Navy">=</font> Ay<font color="Navy">;</font>
Ay <font color="Navy">=</font> By<font color="Navy">;</font>
By <font color="Navy">=</font> c<font color="Navy">;</font>
<font color="Navy">}</font>
</pre>
<font face="arial" size="-1">
Not to hard and it means we only need to consider a few cases.<br>
<br>
<center><img src="line0101.jpg" width="200" height="200" alt="the cases" border="0"></center>
<br>
So the cases are:<br>
<ul>
<li>y=0 (horizontal line)
<li>x=0, y=+/-n (vertical lines)
<li>x=y, x=-y (diagonal lines)
<li>x > | y | (between x=y and x=-y)
<li>| y | > x (everything else, duh)
</ul>
Do you see why there are 4 special cases? It all has to do with the slope of the line. As long as you
remember "slope of the line, slope of the line" (if you build it, they will come) you can derive all of
this stuff over again.<br>
<hr>
<b>Case 1:</b> y = 0<br>
</font>
<pre>
pBuf <font color="Navy">+=</font> Ay <font color="Navy">*</font> bWidth <font color="Navy">+</font> Ax<font color="Navy">;</font>
<font color="Blue">for</font><font color="Navy">(</font> <font color="Blue">int</font> i <font color="Navy">=</font> Ax<font color="Navy">;</font> i <font color="Navy"><=</font> Bx<font color="Navy">;</font> i<font color="Navy">++ )</font> <font color="Navy">*</font>pBuf<font color="Navy">++ =</font> pixelColor<font color="Navy">;</font>
</pre>
<font face="arial" size="-1">
<i>OOH</i>, that was so big and <i>scary</i>, wasn't it boys and girls? (Wallace, stop poking Suzie.
And while you're at it, stop touching her, too.)<br>
<hr>
<b>Case 2:</b> x = 0<br>
</font>
<pre>
int dir;
<font color="Blue">if</font><font color="Navy">(</font> Ay <font color="Navy">></font> By <font color="Navy">) {</font>
<font color="Blue">int</font> c<font color="Navy">;</font>
c <font color="Navy">=</font> Ay<font color="Navy">;</font>
Ay <font color="Navy">=</font> By<font color="Navy">;</font>
By <font color="Navy">=</font> c<font color="Navy">;</font>
dir <font color="Navy">=</font> -bWidth<font color="Navy">;</font>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -