Scribd
Upload
6 views

Assignment Line Drawing

The assignment requires implementing Bresenham’s line drawing algorithm in JavaScript, with options for solid and dashed lines and variable line thickness. Students must use the fillRect function for drawing and cannot use built-in line functions. Deliverables include a zipped project directory submitted by the due date, with guidance available from the instructor for questions.

Uploaded by

chaymaau
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Assignment Line Drawing

The assignment requires implementing Bresenham’s line drawing algorithm in JavaScript, with options for solid and dashed lines and variable line thickness. Students must use the fillRect function for drawing and cannot use built-in line functions. Deliverables include a zipped project directory submitted by the due date, with guidance available from the instructor for questions.

Uploaded by

chaymaau
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Assignment 5: Line Drawing

Computer Graphics and Animation Lab Winter Semester 2024-25


Assignment Due: 28.1.2025 23:59:00

In this assignment you will be implementing Bresenham’s line drawing algorithm. For full credit
you must also implement a dashed line option and variable line thickness. JavaScript has a built-in
function for drawing lines but you are of course not allowed to use that for this assignment. To draw
on the canvas you are only allowed to use the fillRect function. It is possible to input decimal
coordinates (i.e. a sub-pixel coordinate) into this function, and it will in turn draw a rectangle that
partially colors all of the pixels adjacent to the given sub-pixel location. For this assignment, you
are not allowed to do this and should only input integers into the fillRect function.

1 Starter Code
In "a04 starter.zip" you will find an html file and a JavaScript file. To run the program you can
just double-click index.html to open it in your default browser. Since the scope of this assignment is
much smaller, you should not need to organize code into multiple files and as a result will not need
to open the web-page in a local server like in assignments 1-3.
index.html contains a basic html web-page shown above. There is a box with two options to
select, ”Solid” or ”Dashed” as well as a slider called ”Thickness”. Below these is an empty canvas
surrounded by a black border. If you click in the canvas a red square will appear at the position you
clicked. If you click a second time a green square will appear. You can then update the position of
the red square by clicking again, then update the green square by clicking again, then the red etc.
In main.js, the function clearAndDraw is called when the state of any of these elements changes.
This function collects some state information from the web-page and clears the canvas of any color.
To be specific, the variable thickness is set to the numeric value of the thickness slider and the
variable dashed is a boolean that is true if the dashed option is selected, and false if the solid option
is selected. Two variables pointA and pointB correspond to the coordinates of the red and green
boxes respectively.
2 Tasks
You must fill out the code stubs in main.js such that a solid line is formed between pointA and
pointB when the solid option is selected, and a dashed line when the dashed option is selected. Here
are examples showing what my implementation does when the thickness is maxed out. On the left
is the solid option, and on the right is the dashed option.

There is creative freedom in how you use the values and in how you implement the specifics. It
should look similar to the examples shown here, but the specifics of how thick the line is, how
variable line thickness is achieved and how far the space is between the dashes of the line are up to
you.

2.1 Bresenham’s
In main.js there is an empty function called bresenham which returns an empty list. You should
first fill this function out with Bresenham’s line algorithm using only integers (no decimal numbers).
For guidance you can refer to the slides or section 9.1.1 of the textbook available from the university
library catalog. In my implementation, this function returns a list of points that make up the line.
Then I loop through that list and draw each pixel one-by-one.
Here is an example of correct output:
2.2 Dashed Lines
For this part of the assignment you are tasked with generating a dashed line between pointA and
pointB. There are two approaches you could take: modify Bresenham’s algorithm to skip some
pixels (by not adding them to the list of points that will later be returned), or remove pixels from
the list of pixels after they are generated. Follow the method that sounds simplest to you.
It does not matter exactly how far each dash is from the previous one, but the dashes should not
overlap when the thickness is increased.

2.3 Variable Thickness


Finally, you are tasked with generating a line of any given thickness (using the slider) between
pointA and pointB. There are many ways to achieve this affect, for full credit there only needs to
be a noticeable difference in the thickness of the line with each step along the thickness slider.
One method would be to use the fillRect function to draw larger rectangles (the dimensions of
which are determined by the thickness variable) centered at each point returned by the bresenham
function. Another might be to draw multiple lines, one for each value of thickness.

3 Deliverables
Please zip your entire project directory and submit it to the assignment submission page on the VC.
There will be no extensions to the deadline so plan your time accordingly! Start early so you can ask
questions sooner rather than the day it’s due. As always, feel free to email me at jacob.justice@uni-
bamberg.de or come to my office hours Monday 10:30-11:30 at GU13 01.28 if you have any questions.

You might also like