In this exercise you will implement an interactive 2D editor for vector graphics. The editor will allow to draw simple shapes interactively.
In all exercises you will need to do operations with vectors and matrices. To simplify the code, you will use Eigen. Have a look at the Getting Started page of Eigen as well as the Quick Reference page for a reference of the basic matrix operations supported.
To handle input events (keyboard and mouse), we rely on the SDL2 library to abstract the low-level OS-specific details of the process. Please refer to the documentation of SDL2 for more details.
Follow the instructions on the general instructions page to set up what you need for the assignment.
Implement an interactive application that allows to add, edit, and delete triangles. The following operations should be supported:
- The key i will enable triangle insertion mode. When this mode is enabled, every triple of subsequent mouse clicks will create a triangle connecting the three locations where the mouse has been pressed. The first click will create the starting point of the segment, which will be immediately visualized. As the mouse is moved, a preview of a segment will appear. After the second mouse click, a preview of the triangle will appear. After the third click, the current preview will transform into the final triangle.
- The key o will enable triangle translation mode. Each mouse click will select the triangle below the cursor (which will be highlighted), and every movement of the mouse (while keeping the button pressed) will result in a corresponding translation of the triangle. Note that the triangle should move on screen by the same amount as the cursor.
- The key p will enable delete mode. When the mouse is pressed, the triangle below the cursor is deleted.
When triangle translation mode is enabled, keep the current primitive selected after the mouse is released. If a primitive is selected and you press the keys h and j, the triangle will rotate by 10 degree clockwise or counter-clockwise, respectively. The rotations should be done around its barycenter, i.e. the barycenter of the triangle should not change. When the keys k or l are pressed, the primitive should be scaled up or down by 25%. Similarly to before, the barycenter of the triangle should not move due to the scaling. For this task, you can directly edit the position of the vertices before calling the rasterization function, or you can add a transformation in the vertex shader.
Add the possibility to paint the color of each vertex in the scene. Color mode is enabled by the key c. In this mode, every mouse click will select the vertex closer to the current mouse position. After a vertex is selected, pressing a key from 1 to 9 will change its color (the colors that you use are not important, you can pick whatever colors you like). The color should be interpolated linearly inside the triangles.
Instead of changing the coordinates of the vertices passed to the rasterizer, do all spatial transformations inside the vertex shader. While this will not make any difference in performance when using the software rasterizer, this will have a major impact when an hardware rasterizer is used.
Add to the application the capability of changing the camera. The following actions should be supported:
-
+ should increase the zoom by 20% zooming in in the center of the screen.
-
- should decrease the zoom by 20% zooming out in the center of the screen.
-
w, a, s, and d should pan the view by 20% of the visible part of the scene, i.e. translate the entire scene, respectively down, right, up and left by 20% of the window size.
This should NOT be implemented by changing the coordinates of the objects in the scene. You must add a view matrix to the vertex shader (as a uniform) that is transforming the position of the vertices of the triangles before they are rendered. Note that you will also have to transform the screen coordinates using the inverse of the view matrix, to ensure that the user interaction will adapt to the current view. 
Add the possibility to keyframe one property of an object (size, position, or rotation) and create an animation using linear interpolation between the keyframes. You can use a timer to make the animation automatic, or you could move to the next frame at the press of a button.
For example, you can press a key K to create a new frame of your animation. Move your triangles to the desired location, then hit K again to create a new frame. Once this is done, you can press A to play the animation. You can also add a shortcut C to clear the frames of the animation, keeping only the first frame. This is only a suggestion, but the essential to not hardcode the frame properties in your C++ code: we should be able to create our own animations on the spot.
Add the option to use a Bézier curve instead of a linear interpolation to animate the desired property (e.g. position) between each keyframe. For example, pressing B instead of A will play/advance the animation using the Bézier curve instead of a linear interpolation.