CS40 Lab 3: Interactive Drawing

Due 11:59pm Wednesday, 26 September 2018
You may work with one partner on this assignment. For this lab, you will extend lab 02 to make your objects more interactive. The basic idea is to add functionality to your code to handle mouse events so users can add shapes, remove shapes, and move shapes interactively with the mouse. You will need to use some basic linear algebra and work with QT's event handlers mousePressEvent and mouseMoveEvent.

Table of Contents

Getting started
Since you are extending project2, you may continue to use the same git repo as last week. If for some reason, you are changing partners, you may submit your request through Teammaker. You may clone a new git repo and one partner should copy over their files from lab02
#only do this if you are changing partners
[~]$ cd ~/cs40/
[cs40]$ git clone git@github.swarthmore.edu:CS40-F18/lab03-YOURUSERNAME-YOURPARTNERNAME.git lab03
[cs40]$ cd lab02
[lab02]$ \cp *.cpp *.h *.ui *.txt *.md ../lab03
[lab02]$  cd ../lab03
[lab03]$ git status
File updates
For this project I have modified the mainwindow.ui to provide a set of radio buttons and a method for selecting colors. You can copy these new support files from my public folder and add it to your git repo.
[~]$ cd ~/cs40/lab02
[lab02]$ cp ~adanner/public/cs40/lab03/* ./

Only the mainwindow.ui should match an existing file. It is safe to overwrite your lab02 copy. You will need to add colorbox.h and colorbox.cpp to your CMakeLists.txt. Check that your code still compiles and runs after copying these files and making the CMakeLists.txt changes.

Frames in OpenGL
To change frames, you will set up a matrix transformation in QT/OpenGL. You will use a 4x4 matrix to represent the coordinate transform from screen/mouse coordinates to OpenGL GLSL clip coordinates. On the CPU/QT side, the matrix type is QMatrix4x4. On the GPU/GLSL the type is mat4

To use a matrix transform in your vertex shader, follow the steps below.

First modify your vertex shader vshader.glsl to take a uniform mat4 as input.

#version 410

in vec2 vPosition;
uniform mat4 mview;
uniform vec2 displacement;

    vec4 pos = vec4(vPosition+displacement, 0., 1.);
    gl_Position = mview*pos;

The third argument 1. to the first line in main explicitly sets the last component of the four-tuple pos to 1., indicating that pos is a point.

Next, add a private member variable QMatrix4x4 m_matrix; to your MyPanelOpenGL header file. Connect your matrix to the shader in paintGL()

m_gpuInfo->getProgram()->setUniformValue("mview", m_matrix);
Everything should compile and run at this point with no visible changes.

You can quickly test that your matrix is working by adding

ahead of the call to setUniformValue. The scene should shrink to half size. If this test works, you can remove the two scaling lines.

A real transformation

The real matrix transformation we want to convert from screen coordinates to clip coordinates is $$ \left[ {\begin{array}{cccr} 2/w & 0 & 0 & -1 \\ 0 & -2/h & 0 & 1 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} } \right]$$ Where w and h are the width and height (in screen coordinates) of the OpenGL context widget. The first and second columns will change whenever the GL window resizes. In the MyPanelOpenGL constructor add
In resizeGL(int w, int h) add

At this point, all previous shapes declared will have their vertices premultiplied by m_matrix, likely resulting in nothing showing up. Add a new shape specified in screen coordinates and verify that this shape appears on the screen. Note: if you tested culling faces without CCW orientation in lab 02, you will need to either turn this off or change add glFrontFace(GL_CW). Since the positive $\hat{y}$ direction is down in screen coordinates and up in clip coordinates, the CCW faces in screen coordinates are CW in clip coordinates. Don't worry, changing this one line for glFrontFace should fix most problems. Also, don't worry about changing your leftOf or orientation tests from lab02 to adjust for the fact that the window coordinates are left handed. The math will still work and be consistent with itself, although it will be mirrored from our initial explanation. This if fine for this lab.


To capture clicks from the user, add the method void mousePressEvent(QMouseEvent *event); to the list of protected methods in the MyPanelOpenGL header file. A sample implementation might start like this
void MyPanelOpenGL::mousePressEvent(QMouseEvent *event){
    vec2 click(event->localPos().x(),event->localPos().y());
    QVector4D worldPoint(click, 0, 1);
    QVector4D clipPoint=m_matrix*worldPoint;
    qDebug() << "world: " << worldPoint << " clip: " << clipPoint;

I encourage you to use qDebug() instead of cout or printf as it knows how to serialize/print many Qt types with little or no added effort.

Verify that your mouse handler is working by clicking on points in the GL canvas. You should see the coordinate output of your clicks in clip coordinates. Does this match your expectations? If so, proceed with the rest of the lab.

Drawing Modes
Your program should support the following modes: Adding objects (with a minimal support of lines, triangles, rectangles, and circles), Deleting objects, Moving objects, and changing colors. The QT UI has been modified to include radio buttons for these states. To keep track of which mode is set via the radio buttons, I recommend using a enumerated type to store the mode in a sane way that is easy to remember.
/* define a new type app_mode_t that stores the current mode*/
/* put this block in mypanelopengl.h but outside the class */
typedef enum CS40_APP_MODE{
  /* TODO: add more as needed */
} app_mode_t;

/* put this in the private member block of the class */
app_mode_t m_currentMode;

/* put this in the constructor */
You will probably want to add a private member variable m_currentMode which tracks the current mode. By default, Moving is set in the radio box, so you may initialize m_currentMode to MOVING in the OpenGL panel constructor.

You may also need to go into the UI slots/signals editor and drag clicked() signals from each radio button in the mode box to the GLWidget panel, and connect each signal to an appropriate slot, e.g., void modeDrag(). Note you may need to manually add the slot in the slot/signal editor for the GLWidget class.

For each slot, add the appropriate method name under the public slots: section in mypanelopengl.h and implement the method in mypanelopengl.cpp. The implementation could be something as simple as:

void MyPanelOpenGL::modeMoving(){ m_currentMode=MOVING; }
Setting Color state
Another handy state variable in mypanelopengl.h would be the active color as indicated by the current color swatch shown on the UI. You should store this as a QVector3D object. Add and additional slot to change the color, e.g.,
void MyPanelOpenGL::updateColor(QColor clr){
  /* convert clr to QVector3D and store in active color */

Note, you can change the color of the swatch in the UI by clicking the change color button. This will pop up a small dialog asking you to select a color. This color will then be used to update the swatch. The swatch will then emit a signal indicating it has changed color to the updateColor(QColor clr) slot. This has already been configured in colorbox.* and mainwindow.ui. You should not need to modify these files.

Adding shapes
If a user is in an Adding shapes mode, left mouse clicks should add shapes to the screen. For example, if the user is in add circle mode, the first mouse click will set the center of the circle and the second mouse click will define a point on the perimeter of the circle. At this point, your code should create a Circle object using your project 02 code, add it to a QList of current objects on the screen and draw the object using the current color. A similar pattern should be followed for other shapes. In the case of triangles and rectangles, you must orient your shapes in a counter clockwise direction regardless of how the user clicks on the points. Your constructors should arrange the points to achieve the correct orientation. After creating the shape, you can call update() to trigger paintGL() and redraw the scene.
Implementing contains

To implement changing colors, deleting shapes, and moving shapes, you will need to check if a point is inside a shape. The Drawable method virtual bool contains(const vec2& pt)=0; must be implemented appropriately in each of the derived classes.

You should implement leftOf and distToSegment functions in your geomfun.h files as mentioned in lab2. With these helper methods, writing the inside method for Line and Triangle should be easier. Note that the QVector2D class has a built in length method which may be helpful at times. You can also directly add/subtract QVector2D objects, e.g., myvec = pt1-pt2;

It is very difficult to click inside a line. For this project, implement contains for a line by checking if the minimum distance from the user click to the line segment is within an acceptable tolerance. You can choose a tolerance that works best for your application.

Note: You will be implementing contains on the CPU, so you will need to know the vertices of the shape on the CPU. You might think that the m_pts array that you set up in the constructor contains the coordinates of these points, but that's only true if the m_displacement is zero. You can temporarily add m_displacement to each point when doing a contains check, or incrementally update the geometry when you call move by overriding the move method, or something else of your choosing.

Changing colors
In change color mode, clicking on a shape should change its color. This is fairly easy once you have the slots set up and the contains method for each shape implemented properly. Don't forget to call update() to ensure the changes take effect.
Deleting Shapes
In Delete mode, clicking on a shape should remove it from the screen. You do not need to actually call delete on the actual Drawable* corresponding to the object. Just set a flag in the object indicating that the object should not be drawn. This is typically called lazy deletions where we just mark things as deleted and actually delete them later. If you are obsessed with cleaning, you may occasionally scan the vector, removing hidden objects, freeing memory, and repacking the vector, but this is a fair amount of unnecessary work at this point. You should however free all the dynamically allocated memory before the program exits. The helper methods hide and isVisible in the Drawable class are helpful here. Remember to modify your shape constructors (both the default and copy constructors) to set a default value for m_visible. Modify draw to simply return without drawing if the shape is not visible. When selecting items for moving, dragging, or changing colors, do not select objects which are currently invisible.
Moving shapes
In moving shapes mode, a mouse click should determine if the click is within a shape and if so, the shape containing the point can be moved by dragging the mouse to a new location for the shape. To track the mouse, you can add a mouseMoveEvent method that is triggered when the mouse is moving across the display and the mouse button is pressed. If multiple shapes overlap and contain the mouse pointer click, your code should move the object that was most recently added to the screen, which should appear on top.

You shape should interactively follow the mouse while you are dragging the shape and stop moving only when you release the mouse button or the mouse goes outside the openGL window.

Test that all the radio button features work as expected.
Complete the README3.md questionnaire including answering the concept questions and the lab survey.
You should regularly commit your changes and occasionally push to your shared remote. Note you must push to your remote to share updates with your partner. Ideally you should commit changes at the end of every session of working on the project. You will be graded on work that appears in your remote by the project deadline.
Optional: Pan/Zoom
This section is entirely optional and will not be graded. Do not attempt this unless the required features are working.

The idea behind panning and zooming is that you will be working with three coordinate frames: 1) the window frame used by mouse events 2) the world frame used by the coordinates of the shapes, and 3) the clip frame used by the fragment shader. You will need one matrix to transform from window coordinates to world coordinates, and a second matrix to transform from world to clip coordinates.

Start by representing the bounding box of visible scene in world coordinates using a struct.

typedef struct {
  float xmin, xmax, ymin, ymax;
} boundingBox;

boundingBox worldBox;
You can choose the initial size of your world. Initialize the mouse to world matrix to transform from the OpenGL window size in mouse coordinates, to coordinate in the world frame. Note you will need to update this matrix if either the window resizes or you pan/zoom the world.

Initialize the world to clip matrix to map the current worldBox onto the clip square from (-1,-1) to (1,1). Pass only this matrix as a uniform to your vertex shader. By storing a global bounding box representing the projection, it is fairly easy to add support of zooming in, zooming out, and panning around the display. Add support to your code to allow users to zoom in and out using the 'z'/'Z' keys, respectively and to pan around the scene using up, down, left and right arrow keys. You may find the keyPressEvent method helpful.

Alternatively, you could add QT widgets to your UI to allow zooming panning with the mouse. A zoom or pan would update the bounding box of your current view of the world and require updates to the change of frame matrices. Modify as needed. When adding a shape, convert mouse clicks to world coordinates and add you shapes using world coordinates, not mouse coordinates.