Edit documentation with illustrations

README.md

@@ -25,6 +25,7 @@ We recommend using [Visual Studio Code](https://code.visualstudio.com/download)
 The build and launch data is contained within the `.vscode` directory. Select the folder for your compiler and move `launch.json` and `tasks.json` up one level into the `.vscode` directory. To set commandline arguments, go to `launch.json` and add them within `args`. For example, to run the program with test 1, you would add `./basic/test1.svg`. You can build using <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd> and debug using <kbd>F5</kbd>. If you feel that your program is running slowly, you can also change the build mode to `Release` from `Debug`.
 
 Commonly used Hotkeys:
+
 - <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd> - Build
 - <kbd>F5</kbd> - Debug
   - <kbd>F9</kbd> - Toggle Breakpoint
@@ -73,7 +74,6 @@ Fill in Program arguments, say, `./svg/basic`, then click Apply and close the po
 
 Now you should be able to click on the green run button on top right to run the project.
 
-
 ### Using the Mini-SVG Viewer App
 
 When you have successfully built your code, you will get an executable named **drawsvg**. The **drawsvg** executable takes exactly one argument from the command line. You may load a single SVG file by specifying its path. For example, to load the example file `svg/basic/test1.svg` :
@@ -99,7 +99,7 @@ The application will load up to nine files from that path and each file will be
 A table of all the keyboard controls in the **draw** application is provided below.
 
 | Command                                           |  Key  |
-| ---------------------------------------- | :---: |
+| ------------------------------------------------- | :---: |
 | Go to tab                                         | 1 ~ 9 |
 | Switch to hw renderer                             |   H   |
 | Switch to sw renderer                             |   S   |
@@ -118,6 +118,12 @@ Other controls:
 - Panning the view: click and drag the cursor
 - Zooming in and out: scroll wheel (typically a two-finger drag on a trackpad)
 
+### Motivation
+
+![Motivation](misc/SVG-illustration-1.png)
+
+Before we dive into the specifics of the assignment, we want to provide a high-level motivation behind why writing a SVG rasterizer is interesting and worth your time. You might have not realized but SVG images are everywhere when you browse the internet. Rasterization is the process of converting vector graphic to raster graphic, and we can do lots of fancy editing with raster graphic.
+
 ### What You Need to Do
 
 ![Tasks](misc/tasks.png?raw=true)
@@ -160,7 +166,6 @@ Another important method on the `SoftwareRendererImp` class is `set_render_targe
 
 `set_render_target()` is called whenever the user resizes the application window.
 
-
 #### A Simple Example: Drawing Points
 
 You are given starter code that already implements drawing of 2D points. To see how this works, begin by taking a look at `draw_svg()` in `software_renderer.cpp`. The method accepts an SVG file, and draws all elements in the SVG file via a sequence of calls to `draw_element()`. For each element `draw_element()` inspects the type of the element, and then calls the appropriate draw function. In the case of points, that function is `draw_point()`.
@@ -202,8 +207,6 @@ At this time the starter code does not correctly handle transparent points. We'l
 
 **Now that you understand the basics of drawing elements, let's get to work actually drawing more interesting elements than points!**
 
-
-
 #### Task 1: Hardware Renderer
 
 In this task, you will finish implementing parts of the hardware renderer using OpenGL. In particular, you will be responsible for implementing `rasterize_point()`, `rasterize_line()`, and `rasterize_triangle()` in `hardware/hardware_renderer.cpp`. All other OpenGL context has been set up for you outside of these methods, so you only need to use `glBegin()`, `glEnd()`, and appropriate function calls in between those two functions. (You may be interested in `glColor4f()` and `glVertex2f()`, along with `GL_POINTS`, `GL_LINES`, and `GL_TRIANGLES`.) You can find an extensive guide to OpenGL [here](http://altanmesut.trakya.edu.tr/grafik/OpenGL_Programming_Guide.pdf), but feel free to google function names for quick documentation.
@@ -354,7 +357,7 @@ You can create an SVG file in popular design tools like Adobe Illustrator or Ink
 Be aware that our starter code and your renderer implementation only support a **subset** of the features defined in the SVG specification, and applications like Adobe Illustrator or Inkscape may not always encode shapes with the primitives we support. (You may need to convert complicated paths to the basic primitives in these tools. This [Path to Polygon Converter](https://betravis.github.io/shape-tools/path-to-polygon/) might be of use.)
 
 If you're using InkScape, and you save your drawing in InkScape as an `InkScape` svg or `Plain` svg, the entire drawing will appear black in DrawSVG.
-To work around this, you should instead save it as an `Optimized SVG`. In the resulting dialog, be sure to select `Convert CSS attributes to XML attributes`, and *deselect* `Shorten color values`.
+To work around this, you should instead save it as an `Optimized SVG`. In the resulting dialog, be sure to select `Convert CSS attributes to XML attributes`, and _deselect_ `Shorten color values`.
 
 If you're using Illustrator, and you get errors with opening your generated SVG file in DrawSVG, make sure your `<svg>` tag contains a `width` and `height` field, with set values. Look at the test case SVGs in the `svg/` folder for reference.
 
@@ -370,7 +373,7 @@ In addition to what you have implemented already, the [SVG Basic Shapes](http://
 
 ### Resources and Notes
 
-- [Rasterization Rules in Direct3D 11](https://msdn.microsoft.com/en-us/library/windows/desktop/cc627092(v=vs.85).aspx)
+- [Rasterization Rules in Direct3D 11](<https://msdn.microsoft.com/en-us/library/windows/desktop/cc627092(v=vs.85).aspx>)
 - [Rasterization in OpenGL 4.0](https://www.opengl.org/registry/doc/glspec40.core.20100311.pdf#page=156)
 - [Bryce Summer's C++ Programming Guide](https://github.com/Bryce-Summers/Writings/blob/master/Programming%20Guides/C_plus_plus_guide.pdf)
 - [NeHe OpenGL Tutorials Lessons 01~05](http://nehe.gamedev.net/tutorial/lessons_01__05/22004/)