Assignment 3 report

Tord Wiggo Mathiassen

Introduction

This document is a report on the task we were given in Assignment 3 of the inf-1100 course.
In the task we were given functions to complete. The functions together should provide
functionality to draw filled triangles on the screen, scale the size of triangles, and move the
triangles to a position on the screen, the outcome would be a teapot made out of these
triangles. Each triangle object has attributes, size, position, and colour.

The functions are as follows.

The ScaleTriangle function is supposed to scale the size of a triangle.

The TranslateTriangle function moves the triangle to a specific position,

The CalculateTriangleBoundingBox function will calculate the smallest box a triangle can
fit in.

The FillTriangle function will fill a triangle with its designated colour.

The DrawTriangle function will draw a scaled, translated, and filled triangle on the screen.

Design and implementation

scale_triangle() is supposed to scale the triangle by a given floating point number. If the
number is smaller than 1.0 it will be scaled smaller, if the value is higher than 1.0 it will be
scaled larger. For example, if the given number is 1.5, the triangle will be 50% larger.

To scale the triangle without deformation in scaling, I took the average of the triangles (3
different x and y values) moved the triangle to Origin (0,0) which is the top left corner. Then I
add the triangles original center value (position).
I got feedback from the first hand-in that I didn’t need to calculate the center for scaling, but I
didn’t quite understand what was meant by this, so I redid the formula so everything is on one
line, But it is not as easy to see what each line of code does now. But the function works, and
I kept the old code as comments.

translate_triangle()
Will move the triangle to its specific given position, I alter the on-screen coordinates and set
them to their given values

calculate_triangle_bounding_box()
To calculate the triangles bounding box, which is a rectangle exactly large enough to contain
the triangle. I compare the triangles x-values to find the x-coordinate to the box’s top left
corner and assign that value to rect.x. Them I do basically the same to find the y-coordinate of
the bounding box’s top left corner, compare the values, and assign the smallest value. To find
the width and height of the box I first find the bottom right corner of the box, I do this the
same way as I did to find the left corner. And then I find the width by subtracting the value of
the x-coordinate of the box’s top left corner, from the x-coordinate of the right corner, and
assign this value to rect.w. The same is done to find the height, but using the y-coordinates
instead.

fill_triangle()
To complete this function I used a Scan-line fill algorithm. This filling algorithm is used for
solid colour filling inside polygons. The algorithm works by intersecting scanline with the
polygons edges and fills the polygon between the intersections. First you find extremal points
of the given polygon. Then you scan for the edges of the polygon, in this program you scan
for the TRIANGLE_PENFILL colour and store those x-values. Then you fill these
intersections with the chosen colour.

To accomplish this I made a nested loop that iterates from the top of the triangles bounding
box to the bottom, and from the left of the box to the right.
Then I scan for the triangle using the get_pixel function and compare it to the colour of the
triangles outline, which is the same for every triangle. Then I draw a line from the left edge of
the triangle to the right edge with that triangles given colour, one line at a time.

draw_triangle()
This function will draw a scaled, translated, and filled triangle to the screen.
The function was mostly complete, to finish it I drew a line between all the triangles points
using the given colour of the triangles lines.

The last function to complete is to replace the testing triangles from the main file and draw a
teapot on the screen. The teapot is given as a dataset which contains an array of triangles.
So to do this there is a loop that iterates through the teapot array and draws every triangle to
the screen until there are no more triangles to draw.

Discussion

In this section I will go through some obstacles I met, and how I solved them.

In the bounding box function, I originally only designed something the would only find the
coordinates of the top left corner of the bounding box, but I had to find the width and height
of the box too, this was simple enough once you have all the extremal coordinates.

The fill triangle function was the one I had the most trouble with. But the mistake I made was
a really easy fix, I understood that I had to make a nested for-loop to iterate through the whole
bounding box at the same time. The outer iterates from top to bottom, and the inner one
iterates from left to right. My problem was that I had to store the value of the first pixel of the
line to create the intersection I could fill with colour, without overwriting it when I reach the
second pixel, which would be the end of the intersection. So when I originally tried the first
implementation

if (color == TRIANGLE_PENCOLOR)

that plainly didn’t work, no lines were drawn. Then I tried

if (color == TRIANGLE_PENCOLOR && firstX != 0)

I did this to try and make sure my else if was run to store the second x-coordinate. The result
was a horrible mess with lines of colour everywhere. To solve this, I first printed the values of
the two x values to the console. And saw that the first x-coordinate was always zero, so the
program drew a coloured line from the beginning of the first x-coordinate, did not stop at the
second, and then continued to the next line. I realized after a while and after asking a friend to
look at my code that the fix was only to make sure the first if statement only get run if the x-
value is zero, which it is at the start of every new vertical line. So the final code is:

If (color = TRIANGLE_PENCOLOR && firstX == 0)

Another problem I encountered was in the main() function of the main file. When I first run
the program, I could not see most of the teapot because the centre was in the Origin. To fix
this I translated the centre of the teapot to the centre of the screen by dividing the screens
height and width by 2 and storing those values in tx, ty. Where the centre of the teapot is.

Conclusion

So to sum up, the task was to through several different functions, draw a triangle on the
screen. And then after this was completed, using a given dataset draw the famous Utah Teapot
on the screen. I’ve completed the functions, encountered some difficulties, but I’ve learned to
use Google and look up documentation to gain a better understanding if there is something I
do not understand. For example if I have problem understanding how the draw_line function
works, and learned how to understand pointers which are used often in more complex c code.

Refrences

Yale N. Patt, Sanjay J. Patel, 2004, Introduction to computing systems from bits & gates to C
& beyond, McGraw-Hill, New York.

https://www.tutorialspoint.com/computer_graphics/polygon_filling_algorithm.htm