Topic: 2D Graphics Editor

Compilation Instructions

git clone --recursive https://github.com/AngelaJubeJudy/2D-Vector-Graphics-Editor
cd 2D-Vector-Graphics-Editor
mkdir build
cd build
cmake ../ 
make

Contents

1.1 Triangle Editor

key "i": Triangle Insertion Mode

• ENABLED: Every triple of subsequent mouse clicks will create a triangle. 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.

key "o": Triangle Translation Mode

• ENABLED: Each mouse click will selected 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.

key "p": Triangle Deletion Mode

• ENABLED: When the mouse is pressed, the triangle below the cursor is deleted.

1.2 Rotation / Scale

key "h" and " "j": Triangle Rotation Mode

• ENABLED: The triangle selected will rotate around its barycenter by 10 degress clockwise or counter-clockwise.

key "k" and " "l": Triangle Scaling Mode

• ENABLED: The triangle selected will scale up or down by 25% around its barycenter.

1.3 Color

key "c": Triangle Coloring Mode

• ENABLED: 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.

1 for Maroon, 2 for Firebrick, 3 for Tomato, 4 for Orange, 5 for Gold, 6 for Lawn, 7 for Spring, 8 for Dodger, and 9 for Rosy.

1.4 View Control

key "+" and "-": Scene Zooming Mode

• ENABLED: Increase Decrease the zoom by 20% zooming in/out in the center of the screen.

key "w", "a", "s", "d": Scene Translation Mode

• ENABLED: Translate the entire scene respectively down, right, up, left, by 20% of the window size.

1.5 Keyframing

key "f": Keyframing Mode

• ENABLED: Animates the properties (size, position, or rotation) of objects using keyframe. Next frame is stored in a new VBO. A timer is used to automate the animation.

1.6 Translation/Scaling/Rotation in Shader

key "h", "j", "k", "l": Triangle Translation/Scaling/Rotation Mode

• ENABLED: Upload triangles in a single VBO using offsets for drawing them one by one. Upload to the GPU the transformation model (as a uniform matrix) that transforms the selected triangle from its canonical position to the current position (obtained by combining translations, scaling and rotations).

if(mode.modeH == true){
    rotation << cos(clockwise), -sin(clockwise), 0, 0,
                sin(clockwise), cos(clockwise),  0, 0,
                0,              0,               1, 0,
                0,              0,               0, 1;
    trs <<  trsBack * rotation * trsToOri;
}
...
glUniformMatrix4fv(program.uniform("Translation"), 1, GL_FALSE, trs.data());

The transformation has been executed in the vertex shader, and the content of the VBO storing the vertex positions never updated.

const GLchar* vertex_shader =
            "#version 150 core\n"
                    "in vec2 position;"
                    "in vec3 color;"
                    "uniform mat4 view;"
                    "uniform mat4 Translation;"
                    "out vec3 f_color;"
                    "void main()"
                    "{"
                    "    gl_Position = view * Translation * vec4(position, 0.0, 1.0);"
                    "    f_color = color;"
                    "}";