C-Draw

University Project

C++, Open GL

C-Draw explores a unique way of creating lines in OpenGL, tracking the users mouse to generate a series of oscillating triangles along its path, creating 2D lines.

What is it:

As a drawing application, the user can hold left click and move the mouse to draw lines across the white canvas. Using the scroll wheel, you can change the thickness of the lines drawn and by right clicking you cycle through 6 available colours.
There is also a GUI panel which can be minimised, expanded and moved. This panel allows also allows you to manually edit these various settings along with some additional options.

How it Works:

The lines drawn are created through continuously adding rectangles onto the end. By calculating the direction of the cursor, it works out the coordinates of the 2 new vertices and which 2 of the previous vertices make up the newly added square, which is drawn from 2 triangles.

A lineShape class is used to create and add new lines to the total arrays, which hold the vertex information of all the shapes on screen.
To ensure that the width of the drawn line remains consistent no matter the angle of line drawn, a set of calculations using the perpendicular gradient and Pythagoras’s theorem are used to deduce the exact positions of the points in space. These calculations and explanations are detailed at the end of this page. Dear IM-GUI was also used to implement the UI box

Shaders Implementation:

For C-Draw, only simple shaders were used for displaying the objects onto the screen, however I have created my own custom shaders within C++ with more complexity.

Incorporating dynamic lighting systems, I've developed shaders using the Blinn-Phong method, Anti-Aliasing for shadows and other lighting manipulations such as Bloom. With an understanding of Fragment and Vertex shaders, I'm able to produce a variety of visual effects and distortions, including particle effects

Shader Demonstration

The C-Draw Maths:

Perpendicular Gradient (Pg) = -1/Gradient (Gradient being change in Y / change in X)
By visualising the cursor as (0,0) and the vectors we want as corners of triangles, we can say the hypotenuse is half the scale (as we go half down and half up for a total width = the scale). Then the change in y and change in x create a right angled triangle with the hypotenuse. The Perpendicular gradient gives a relationship between X and Y, so we can replace with PgX.

Using Pythagoras’s Theorem: (scale/2)^2 = Pgx ^2 + x^2 <- substitute x for y in a^2 + b^2 = c^2
Factor out common x^2: x^2(Pg^2 + 1) = (scale/2)^2
Construct Quadratic equation: (Pg ^ 2 + 1)x^2 + 0x - (scale/2)^2 = 0

a = (Pg^2 + 1); b = 0; c = - (scale/2)^2
x = (-b +- sqrt(b^2 – 4ac)) /2a <- c will always be negative, so by taking it from 0 it's guaranteed that the sqrt will wlays have a positive value.