You may work with one partner on this assignment. Note that the lab is due before the start of lab next Wednesday. For this lab, you will extend Project 02 to make your objects more interactive. The basic idea is to add functionality to your code to handle mouse events so that 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. Since you are extending project2, create a local and remote project3 branch by following these steps.

git checkout project2
git checkout -b project3
git push -u private project3

The above commands assume that your personal remote is named private. Furthermore, your working directory must be clean (no uncommitted changes to files under version control), before checking out a new branch. If this is not the case, add and commit you changes locally before switching to a project3 branch.

Once you and your partner have pushed the project3 branches, you can each checkout a shared3 branch to follow your partner's changes

git fetch partner
git checkout -b shared3 partner/project3

Note you should not merge into either the master, shared, or shared3 branches as you will later be unable to push your changes. Make sure you are on either the working or project3 branch before merging.

There are a few minor edits to drawable.h, triangle.h, main.cpp, and mainwindow.ui that I would like you to merge into your project3 branch. Most should auto-merge with mainwindow.ui possibly giving a conflict.

git fetch origin
git checkout project3
git merge origin/master
#if mainwindow.ui conflicts
git checkout --theirs mainwindow.ui
#if other files conflict, merge by hand and add/commit the result

To get started with development, consult the wiki for tips on how to set up matrix transformations in QT/OpenGL 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*/
typedef enum CS40_APP_MODE{
  NONE=0,
  MOVING,
  DELETING,
  CHANGE_COLOR,
  ADD_CIRCLE
} app_mode_t;

app_mode_t m_currentMode=ADD_CIRCLE;

You will probably want to add a private member variable m_currentMode which tracks the current mode. By default, Dragging is set in the radio box, so you may initialize m_currentMode to MOVING in the OpenGL panel constructor. You will want 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 modeMoving(). 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; }

Another handy state variable in mypanelopengl.h would be the active color as indicated by the radio button. You can store this as a QVector3D object. Add additional slots to change the color. Connect e.g., the Red radio button clicked() signal to a setRed() slot in the OpenGL panel. An implementation might be:

void MyPanelOpenGL::setRed(){ curr_color=vec3(1.,0,0); }

The random color could be truly random, or something non-random of your choosing. 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, your 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 updateGL() to trigger paintGL() and redraw the scene. 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.

To implement this correctly, 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 project2. 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.

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 new 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. 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 updateGL() to ensure the changes take effect. When you click on the window, the coordinates passed to the mousePressEvent or mouseMoveEvent in QT are in screen coordinates (think pixels), not world coordinates (where the shapes live), nor clip coordinates (which determines what OpenGL draws). The objects you draw should be in world coordinates. You must write a function that constructs a 4x4 matrix which converts from screen coordinates to clip coordinates. To further complicate things, the screen is left handed, meaning that x increases from left to right, but y increases from top to bottom. Clip coordinates are right handed, and y increases from bottom to top. The matrix you build should be passed on to the vertex shader a uniform mat4 value. You will need to reconstruct the matrix only after reshape events. Furthermore, since all shapes use the same matrix to convert, you can set the value once in paintGL, or maybe even reshapeGL, instead of setting it in every draw() method. Test that all the radio button features work as expected. You should regularly commit your changes to the project2 branch and occasionally push to your private 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 project3 branch by the project deadline. This section is entirely optional, but I will offer a maximum of one bonus point (out of ten) if you implement panning and/or zooming. 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.

Home Page

Last updated: Tuesday, September 22, 2020 at 09:07:43 AM