Due on Moodle: Monday, 18 Sept. at 11:59 PM EDT
Please review the restriction on sharing of work done for homework assignments. You may pair program on this assignment if you choose.
Fork the Starter Code
Fork the starter code and open it for editing. (Here is a copy of the starter file for those not using replit.) The file contains some boiler-plate code and two methods that you'll implement, as indicated by comments. Fill in the comment block at the top of the script section with your name and other details.
A Line Function
You will write a function to draw lines. Start with the simple algorithm we discussed first. This is enough to pass the homework (bronze standard). If you have time and desire you can also implement one or both of the more advanced line algorithms (incremental midpoint and antialiased lines).
First think about what arguments the line function should take in. What information do you need to have in order to know which line is supposed to be drawn? Add these to your function. Then implement the body of the method, using the simple line algorithm from the lecture videos. Your method should not use any built-in line drawing functions provided by the graphics environment. (We'll use those later, but for now the idea is to understand how they work by implementing them ourselves.) Instead, we will simulate "pixel graphics" by coloring 1x1 rectangles:
graphics.fillRect(x,y,1,1) // fill a 1x1 rectangle with an upper-left corner at (x,y)
You can get a colored line by selecting the desired color before calling your line function. We practiced using colors in labs. Remember, setting the color is like picking up a marker of the desired color -- it affects everything you draw next, but nothing that is already drawn. This page of HTML Color Names is useful for pre-defined colors.
Testing
As you are implementing the line method, make sure to test it out by calling it from the draw method. Your draw method will end up consisting of several calls to your line method. To facilitate testing, you can create something like the rainbow star shown below, or some other shape that uses lines with different slopes.
The exact shape doesn't matter so much, except that it is important to test a variety of slopes, including 0 or ∞. Coloring is a matter of taste -- just make sure that you use more than one color in your drawing.
Does your line function work well at all different slopes? Does it work with the endpoints switched? Make sure that you demonstrate a sufficient variety of lines with the image you create. If you've done so, you're in really good shape (silver standard, enough for an A on this assignment).
Reminders
Here are some reminders of pertinent content that was in the video lectures and may be useful on this homework.
- To round down a variable x, the Javascript syntax is Math.floor(x)
- The general equation for a line specified by two points is (y1-y2)x + (x2-x1)y + x1y2 - x2y1 = 0
- When solved for y, the above gives an equation in slope-intercept form y = (y2-y1)/(x2-x1)x + (x1y2 - x2y1) / (x2-x1)
- Similarly, you can solve for x to get another form of the line equation useful for high-slope lines
Extras
(Note: not for extra credit this time, just for more practice with JavaScript functions and HTML Canvas.)
- Use your line function to create an artistic image.
- Experiment with your shape: different line slopes, different pattern, different color, different background color, different size.
- Going further: automate your star/snowflake drawing in a separate method, maybe something that takes as arguments the center position of the star and/or the radius, or the number of rays. Use this method to draw multiple stars or randomly positioned stars.
- Augment your line drawing method to include a line width argument.
- Gold standard: Implement and test one or both of the advanced line drawing algorithms we've studied.
Throughout the semester I'll often demo examples of excellent student work and share them with the class. If you prefer that I not show your work, please indicate that with a comment at the top of your file.
Submit
Take a screenshot of your end result (save as hw1.png). Submit both files (hw1.html and hw1.png) on Moodle.