• Home
  • Textbooks
  • Mathematics for Game Programming and Computer Graphics: Explore the essential mathematics for creating, rendering, and manipulating 3D virtual environments
  • Line Plotting Pixel by Pixel

Mathematics for Game Programming and Computer Graphics: Explore the essential mathematics for creating, rendering, and manipulating 3D virtual environments

Penny de Byl

Chapter 3

Line Plotting Pixel by Pixel - all with Video Answers

Educators


Section 1

The NaĂ¯ve Way: Drawing a line with brute force

Problem 1

Create a new Python script called LinePlot.py in PyCharm and try the following code:
import pygame
pygame.init()
screen_width = 1000
screen_height = 800
screen = pygame.display.set_mode((screen_width,
screen_height))
done = False
white = pygame.Color(255, 255, 255)
green = pygame.Color(0, 255, 0)
xoriginoffset = int(screen.get_width() / 2)
yoriginoffset = int(screen.get_height() / 2)
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
# x axis
for x in range(-500, 500):
screen.set_at((x + xoriginoffset, yoriginoffset),
green)
# y axis
for y in range(-400, 400):
screen.set_at((xoriginoffset, y + yoriginoffset),
green)
for x in range(-500, 500):
y = 2 * x + 4 #LINE EQUATION
screen.set_at((x + xoriginoffset, y +
yoriginoffset), white)
pygame.display.update()
pygame.quit()
This is plotting the same original line equation we used in the DESMOS exercise in Chapter 2, Let's Start Drawing (you can see it in Figure 2.3, albeit upside down because y is flipped). The xoriginoffset and yoriginoffset values are used to place the origin in the center of the window. You will notice that there are also green pixels drawn to show the $\mathrm{x}$ and $\mathrm{y}$ axes. The result is shown in Figure 3.2:
(Figure can't copy)
Besides the image being upside down in the Python render, the line is the same as the one drawn in DESMOS. Or is it? With high-resolution monitors, it can be difficult to see the issue that arises from plotting a line in this way. So, let's try something else.

Check back soon!
00:21

Problem 2

Change the equation of the line (indicated by the LINE EQUATION comment in the previous code) to the following:
$$
y=\operatorname{int}(0.05 * x)-100
$$

The value of 100 at the end is the $y$ intercept and as such (because the $y$ axis is flipped), the line will cross the $y$ axis further up the screen.
But what of int $(0.05 * x)$ ? Well, 0.05 is the slope, which in this case is very flat. The typecast to an integer by wrapping the value with brackets and typing int at the front are to appease the set_at ( ) method. Why? Well, let's consider something. The window is 1,000 pixels wide by 800 pixels high. If you wanted to plot a point at pixel $(10,10)$, I'm sure you can determine where that would appear. However, what if you wanted to plot a point at $(10.5,10)$ ?

Kristen Karbon
Kristen Karbon
Numerade Educator

Problem 3

Now try $y=(10 * x)-100$. It reveals the gaps that are left after integer pixel plotting with a steep slope in the y direction, as shown in Figure 3.3 (b).

Check back soon!