A graphic library and an application for simple curve manipolation

A graphic library and an application for simple curve

manipolation

Michele Segata

Facolta di Scienze MM.FF.NN.Course of Principles of Computer Graphics

[email protected]

Abstract

In this report I am going to describe the implementation of a simple curve manipolationapplication, developed as a fulfilment of the second project for the course of Principles ofComputer Graphics. The report is organized as follows: Section 1 introduces the problemand what the application should implement, Section 2 describes the architecture of the pro-gram, Section 3 explains some foundamental parts of the source code and finally Section 4illustrates how to use the application together with some screenshots and examples.

1 Introduction

The project I had to develop was a simple application for the manipulation of some type ofparametric curves we have studied during the course. The program should allow a user tomanipulate the following kind of curves:

• Hermite spline curves;

• Bezier curves;

• Interpolating spline curves;

• B-Spline curves;

• Lagrangian curves.

The application had to be interactive, giving to the user the possibility to:

• switch from a curve type to another:

• add curves:

• add control points to a curve:

• edit curve parameters such as continuity (for composite curves) or the K value for B-Splines:

• manipulate control points, so dragging one or more of them together to modify the aspectof a curve.

Moreover I had to implement the possibility to put an image in background and let the usertry to draw over it using the tool, so to determine which kind of curve is more suited for thepurpose. Finally the program had to be able to receive a file in input, read a list of pointscoordinates and draw the five types of curve using those points.

A screenshot of the final application can be seen in Figure 1: on the left I put the controlmenu, while in the center you can see and manipulate the curve.

2

Figure 1: A screenshot of the final curve manipulation application

In the following Section I will describe the architecture of the application.

2 Architecture

The architecture of the application is extremely simple and it is shown in Figure 2: the Figureshows the rendering cycle with the operations that are performed within it.

The first task to be done is to retrieve current mouse state: to easily achieve this goal Ihave developed a routine which retrieves current mouse position, pressed button and keyboardmodifiers (such as the shift key). Mouse state is then passed to the function that renders thescenegraph: it needs the state because the scenegraph that I have developed performs alsopicking, so it uses the previous and the current state of the mouse to determine mouse changes,such as movements or clicks.

The scenegraph rendering function needs also the application state, which contains informa-tion such as the kind of curve the user has selected, in order to show it and hide the others.

As depicted by Figure 2, the function performs four main steps. The first one is the menurendering: the graphic library I have developed allows to generate buttons with text, so it iseasy to create the menu shown in Figure 1 by inserting the buttons in the scenegraph as normalobjects to be rendered and tell the scenegraph that on them picking has to be performed.

Picking is indeed the next step, which is obtained by inverting the current transformationmatrix. To understand why, have a look at Figure 3. What the scenegraph knows about thebutton object is its original center and its dimension: button position on screen, after applyingtransformation matrix, is not known. I could have saved it, but it is just a waste of space.Instead, by applying the inverse of the transformation matrix to the mouse cursor, I can getits position w.r.t. button position saved in memory. Clearly, inverted transformation matricesare precomputed at the beginning of the program to avoid waste of CPU resources duringrendering. To perform matrix inversion I have used my own library in which I have developed

3

MOUSEMANAGER

APPLICATIONSTATE

SCENEGRAPH

RENDERING

MOUSESTATE

MENURENDERING

MENUPICKING

CURVERENDERING

CURVEPICKING

CURVESSTATE

EVENTHANDLER

Main rendering cycle

write

write

write

read

readread

write

Figure 2: Architecture of the application

some mathematical utilities, to easily perform matrix/vector operations, linear systems solving,etc. . .

If the picking procedure discovers an event, such as a click, it invokes a callback which handlesthe event: the handler will modify the state of the application, for example setting the Beziercurve as hidden and the Hermite as visible. At the successive cycle, the rendering function willuse the updated state.

The following step is the curve rendering: from the curve state, the rendering function getsinformation such as control points, continuity, etc. . . and draws the curve on the screen. Forcurve drawing I have implemented a dedicated set of procedures in my graphic library.

After rendering, picking on curve points is performed: the latter operation will modify thestate of the curves, in particular changing the position of the control points. It is possible todrag a single point or more that one together: by clicking on some points with the shift keypressed, they will be inserted in a structure and when mouse is dragged all of them will bemoved.

3 Implementation

The application has been developed entirely in C and using only the OpenGL graphic libraryand the library I have personally developed: no other high level tools had been used. Why?

4

BUTTONOBJECT

CENTER = (0, 0)

(-3, 2) (3, 2)

(3, -2)(-3, -2)

Object in memory

Transformation andrendering

BUTTONIMAGE

CENTER = (3, 4)

(0, 6) (6, 6)

(6, 2)(0, 2)

Object on screen

Unknownby the

applicationlogic

Mouse on screen

(1, 3)

Inverse transformation

Mouse position w.r.t.button object

(-2, -1)

Figure 3: Picking procedure

Because this is a course on the principles of computer graphics and, in my opinion, the bestway to learn the principles is by trying to implement them after having studied the concepts.That is why I have developed the library with curves, 3D geometry, mathematic functionalities,scenegraph, picking and so on.

I am now going to describe some parts of the source code. I will not describe the entirelibrary, because it would take hundreds of pages: anyhow, the source code is documented.

I will comment the scenegraph rendering source code, since it is the core of the entire ap-plication. Listing 1 shows the structure of a node. The first fields (in id, in p, down id, down p

and up id) are used by the scenegraph to save information about picking states: for example, ifthe mouse is inside a button, the field in p will point to the node containing that button. Thenwe have the field type, which clearly tells the rendering procedure the kind of node: it could bean empty node, a mesh, a transformation matrix, a curve or a text. The data about the nodeis then inserted into the union node. We can assign an id to the node, which is particularlyuseful for event handling to let the application determine which button have been clicked, forexample. inv matrix contains the inverse of the transformation matrix if the node is of thiskind. This field contains the inverse of all the matrices multiplied together from the root downto the current node.

Then clearly we have the children of the node: their count is saved into nchildren, while thefield children is the array containing them. The field picking determines wheter picking has tobe performed and visible if the node has to be rendered or not. The last two fields are used bythe scenegraph to memorize the mouse coordinates unprojected from the window coordinatesto the object coordinates.

struct graph node t {int i n i d ;struct graph node t ∗ i n p ;int down id ;struct graph node t ∗down p ;int up id ;node type t type ;int id ;union {

mesh t ∗ ob j e c t ;f l o a t i n g t ∗∗matrix ;cu rve t ∗ curve ;t e x t t ∗ t ex t ;

5

} node ;f l o a t i n g t ∗∗ inv matr ix ;int nch i l d r en ;struct graph node t ∗∗ ch i l d r en ;int p i ck ing ;int v i s i b l e ;GLdouble un mouse [ 4 ] ;GLdouble pun mouse [ 4 ] ;

} ;

Listing 1: Source code of the scenegraph node

The scenegraph rendering function code is quite long so I will describe it taking only somepieces out of it. First of all, the scenegraph rendering function is recursive: since we are workingwith a graph, visiting it in a recursive way is straightforward. Its prototype is shown in Listing 2.

void s cenegraph render (graph node t ∗ root ,graph node t ∗g ,f l o a t i n g t ∗∗tm ,void (∗ r end e r c a l l b a ck ) ( /∗ . . . ∗/ ) ,void ∗ ca l lback data ,void (∗ event hand l e r ) ( graph node t ∗ , f l o a t i n g t ∗∗tm , graph node t ∗ , void ∗ ,

p i c k t yp e t ) ,void ∗handler data ,mouse t ∗ms ,mouse t ∗pms ,s e l e c t i o n t ∗ s e l ,f l o a t i n g t ∗∗ inv m

) ;

Listing 2: Scenegraph rendering function prototype

The first two parameters indicate the root of the scenegraph and the node that is going to beprocessed. The third indicates the current transformation matrix. render callback, if specified,is invoked before processing a node and callback data is a pointer to user defined data passedto the render callback. event handler is a pointer to the callback to be invoked when a pickingevent is raised: it clearly will specify the node that is interested in the event and the type ofevent: handler data is a pointer to user defined data for the event handler. ms and pms arepointers to the current mouse state and the mouse state in the previous frame. sel is a pointerto a structure that contains the set of points selected for dragging. Finally, inv m indicates whichis the inverse for the current transformation matrix.

The first thing the function controls is if the node to be processed is NULL or if it is notvisible: if so, the function ends. By doing this, if a node is not visible, also its children won’tbe displayed.

i f ( g == NULL)return ;

i f ( ! g−>v i s i b l e )return ;

Then it performs different operations based on node type. If the node is a transformationmatrix, then it multiplies the current transformation matrix with the one contained in the node.

i f ( g−>type == NODE MATRIX) {ntm = c r e a t e ma t r i x t (T MATRIX SIZE , T MATRIX SIZE) ;matr ix mul t ip ly (tm , T MATRIX SIZE , T MATRIX SIZE , g−>node . matrix , 0 ,

T MATRIX SIZE , ntm−>matrix ) ;

6

}

If the node is a mesh to be rendered instead, the function renders it.

i f ( g−>type == NODE OBJECT) {

render mesh (g−>node . object , tm , 0 , 0) ;

If needed, picking is also performed. The first thing to do is to unproject the mouse andmultiply the result for the inverse of the transformation matrix. Then1 I control if the mouse isinside or outside the object.

i f ( g−>p i ck ing ) {

pt = PICK NONE;

unproject mouse (tm , g−>un mouse , ms , inv m ) ;

i f ( g−>node . object−>p r op e r t i e s . type == PLANE) {

l = g−>node . object−>p r op e r t i e s . b a r i c e n t e r [ 0 ] − g−>node . object−>p r op e r t i e s . edge / 2 ;

r = l + g−>node . object−>p r op e r t i e s . edge ;t = g−>node . object−>p r op e r t i e s . b a r i c e n t e r [ 1 ] + g−>node . object−>

p r op e r t i e s . he ight / 2 ;b = t − g−>node . object−>p r op e r t i e s . he ight ;

i f ( ( g−>un mouse [ 0 ] >= l ) && (g−>un mouse [ 0 ] <= r ) && (g−>un mouse [ 1 ]<= t ) && (g−>un mouse [ 1 ] >= b) && (g−>un mouse [ 2 ] > Z LIMIT) )cpt = PICK MOUSEIN;

elsecpt = PICK MOUSEOUT;

}

Then we can have different situations: if the mouse is inside and we have not yet signaledthe event, then we invoke the mouseout event for the object that was previously ”mousein” (ifexisting), then we signal the mousein event for the current object.

i f ( event hand l e r ) {

switch ( cpt ) {

case PICK MOUSEIN://have we a l ready s i gna l e d mouse in fo r t h i s o b j e c t ? are we s t i l l

i n s i d e t ha t o b j e c t ?i f ( root−>i n i d != g−>id ) {

// s i g n a l the mouse out to o ther o b j e c t i f neededi f ( root−>i n i d != −1) {

event hand le r ( root , tm , root−>in p , handler data ,PICK MOUSEOUT) ;

}

event hand l e r ( root , tm , g , handler data , cpt ) ;//remember t ha t now the mouse i s i n s i d e current o b j e c troot−>i n i d = g−>id ;root−>i n p = g ;

}

1For semplicity I have implemented only the picking for rectangles

7

If no mouse button is down at the moment but it was down for an object in the previouspicking control, then we signal the mouseup event.

// check f o r c l i c ki f (ms−>b == −1) {

i f ( root−>down id == g−>id )event hand le r ( root , tm , g , handler data , PICK MOUSEUP) ;

root−>down id = −1;root−>down p = NULL;

}

If instead the mouse button is down, we save this information into the root node.

i f (ms−>b == 0) {i f ( root−>down id == −1) {

root−>down id = g−>id ;root−>down p = g ;

}}break ;

If we have discovered a mouseout, we signal it only if the mouse was previously inside theobject.

case PICK MOUSEOUT:

// i f we were i n s i d e current o b j e c t and we are going out then wes i g n a l the mouse out

i f ( root−>i n i d == g−>id ) {event hand l e r ( root , tm , g , handler data , cpt ) ;//remember t ha t now mouse i s ou t s i d e current o b j e c troot−>i n i d = −1;root−>i n p = NULL;

}i f (ms−>b == −1 && root−>down id == g−>id ) {

root−>down id = −1;root−>down p = NULL;

}break ;

default :break ;

}

}

}}

We now move on and analyze the case in which the node is a curve. Here we have fivesubcases, one per curve type: since they are all quite similar I will go through only the Hermite.To draw it we cycle through all the composite curves and we check for continuity: if set to C0,then each curve has its own derivatives, otherwise the derivative on the first point is set as thederivative on the second point of the previous curve. The single hermite curve is draw by usingthe curve hermite spline procedure. Moreover, to give a graphic feedback to let the user knowwhich composite curve is currently selected, I painted the latter in yellow.

Then the manage curve function is used to drag the points that have been selected: its codeis shown in Listing 3. The function checks first of all if the user has released the mouse button

8

and if the shift key is not pressed: in that case the function removes all the points from theselection. Then, if there is at least one point selected and the mouse button is pressed, it movesall the selected point by an amount which is determined by the difference between the previousmouse state and the current.

After that, the hermite control function, draws control points and derivatives and performspicking: picking on points is easy and it is obtained by measuring the distance between pointand mouse cursor with usual euclidean distance. If the function detects that a control pointis clicked, it is added to the selection so that the manage curve function can move it in case ofdragging.

i f ( g−>type == NODE CURVE) {

cu rve t ∗c = g−>node . curve ;int j , base , npo ints ;f l o a t i n g t ∗∗ cu rve po in t s ;f l o a t i n g t tmp [ 3 ] ;f l o a t i n g t c o l o r [ 4 ] ;

switch ( c−>type ) {

case CURVE HERMITE:

for ( i = 0 ; i < c−>ncomposite ; i++) {

i f ( i == c−>s e l e c t ed compo s i t e )v e c t o r s e t 4 ( co lo r , CCS R, CCS G, CCS B , CCS A) ;

elsev e c t o r s e t 4 ( co lo r , CCU R, CCU G, CCU B, CCU A) ;

switch ( c−>con t i nu i t y ) {

case 0 :c u r v e h e rm i t e s p l i n e ( c−>po in t s [ i ] . c , c−>po in t s [ i + 1 ] . c , c−>

d e r i v a t i v e s [ i ∗ 2 ] . der iv , c−>d e r i v a t i v e s [ i ∗ 2 + 1 ] . der iv , tm, c o l o r ) ;

break ;

case 1 :i f ( i == 0)

cu rv e h e rm i t e s p l i n e ( c−>po in t s [ i ] . c , c−>po in t s [ i + 1 ] . c , c−>d e r i v a t i v e s [ i ∗ 2 ] . der iv , c−>d e r i v a t i v e s [ i ∗ 2 + 1 ] . der iv, tm , c o l o r ) ;

elsecu rv e h e rm i t e s p l i n e ( c−>po in t s [ i ] . c , c−>po in t s [ i + 1 ] . c , c−>

d e r i v a t i v e s [ i ∗ 2 − 1 ] . der iv , c−>d e r i v a t i v e s [ 2 ∗ i + 1 ] .der iv , tm , c o l o r ) ;

break ;

}

}

manage curve ( g , ms , pms , s e l ) ;

h e rm i t e con t r o l ( g , ms , pms , s e l , tm) ;

break ;

case CURVE BEZIER:

9

[ . . . ]

default :break ;

}

i f ( g−>p i ck ing ) {unproject mouse (tm , g−>un mouse , ms , inv m ) ;unproject mouse (tm , g−>pun mouse , pms , inv m ) ;

}}

Finally, the mouse cursor is unprojected and saved into the node and will be used at the nextrendering cycle. The reason why I unproject the mouse after the rendering is that for retrievingthe pixel the mouse is over I use the OpenGL glReadPixels function: as the name suggests, itreads a pixel from the viewport (in particular using the depth buffer), but clearly the pixel mustfirstly be rendered.

void manage curve ( graph node t ∗g , mouse t ∗ms , mouse t ∗pms , s e l e c t i o n t ∗ s e l ) {

i f (ms−>b == −1 && pms−>b == 0 && ! ( ms−>k & KEY SHIFT) ) {

u n s e l e c t s e l e c t i o n ( s e l ) ;s e l e c t i on empty ( s e l ) ;

}

i f ( s e l e c t i o n s i z e ( s e l ) != 0 && ms−>b == 0) {

move se l e c t i on ( s e l , g−>pun mouse [ 0 ] − g−>un mouse [ 0 ] , g−>pun mouse [ 1 ] − g−>un mouse [ 1 ] ) ;

}

}

Listing 3: manage curve function

As said before, the last type of nodes the scenegraph handles is text: in this case, I havedeveloped a function that prints a text on the screen. Its parameters are center position, the sizeof the character, a char map and the text to print. The char map is an empty mesh containinga texture from which retrieve the images of the characters: it can be considered as the font tobe used. The one I have used is shown in Figure 4.

i f ( g−>type == NODE TEXT) {

p r i n t c e n t e r e d s t r i n g fm t (g−>node . text−>x , g−>node . text−>y , g−>node . text−>s i z e , g−>node . text−>char map , tm , ”%s” , g−>node . text−>t ex t ) ;

}

10

Figure 4: The texture used to print text on the screen

The last part of the scenegraph rendering function is the recursive invocation: for each childwe invoke the function on it. If the current node is a transformation matrix, then the newmatrix is passed to the procedure, as well as its inverse.

for ( c h i l d = 0 ; c h i l d < g−>nch i l d r en ; c h i l d++)i f ( g−>type == NODE MATRIX)

scenegraph render ( root , g−>ch i l d r en [ c h i l d ] , ntm−>matrix ,r ende r ca l l ba ck , ca l lback data , event handler , handler data , ms ,pms , s e l , g−>inv matr ix ) ;

elses cenegraph render ( root , g−>ch i l d r en [ c h i l d ] , tm , r ende r ca l l ba ck ,

ca l l back data , event handler , handler data , ms , pms , s e l , inv m ) ;

i f ( g−>type == NODE MATRIX)f r e e ma t r i x t (ntm) ;

}

4 Usage and examples

The project comes with the source code and a makefile that can be used to build it on MacOS X, Windows and Linux. By typing the make command, the application curvemanipulator isgenerated. It is possible to run it in three different ways:

• normal way: type ./curvemanipulator;

• with background image: type ./curvemanipulator picture.bmp and the application willshow the image in background so that the user can try to draw on it using the program.The image must be a bmp file and if your graphic card is quite old it must be a squarewith a size that is equal to a power of two (e.g. 512x512);

• with sampled points: type ./curvemanipulator points.txt <points per composite curve>

[curve to draw] and the application will use the points in the file as points for the curves.

11

The second parameter specifies how many points per curve should be used (excepts forthe hermite spline), while the third, if specified, tells the application to draw only a singletype of curve: 0 will draw only the Hermite, 1 the Bezier, 2 the Interpolating Spline, 3the B-Spline and 4 the Lagrangian. This is useful if you want to draw a curve with a highnumber of points to reduce the computational time. The file with sampled points mustcontain a point per line with comma separated x and y coordinates.

The first case is shown in Figure 1. As said before, on the left you have the controls and incenter the curve. Let’s see how to use it. The upper part lets you chose between the differenttype of curves and the currently selected curve is printed under the buttons.

Then you have the ”Add curve” button, which lets you insert a new curve, to be added tothe set of composite curves. As soon as you click it, the text ”Selected mode: Add curve” willappear on top of the screen, telling you that the modality is active and will remain like thatuntil you click another button or you press the ESC key. In this way you can insert multiplecurves with successive clicks on the screen.

If you have a composite curve, then you can select a single piece by using the + and - buttonsunder the ”Curve:” text: as soon as you change the selected piece, the number will change andthe curve will be drawn in yellow. After that you can add a point to the currently selectedcurve by clicking the ”Add point” button: this action will show in the upper part of the screenthe ”Selected mode: Add point” and from now on you will be able to add multiple points byclicking on the screen2.

At any time, you can drag any point you see on the screen, in order to modify the aspect ofthe curve. If you want to drag more than one point at a time, just keep the shift key pressedand select the points by clicking on them: after that, drag a point to modify them all.

If you use Hermite, Bezier or Interpolating Spline, then you can set the type of continuitybetween composite curves by clicking the buttons ”C0” and ”C1”: in particular, if you haveselected curve number 3, then the continuity you have chosen will be set between curves 3 and4. For a better understanding of which derivatives belongs to which curve, the derivative of thefirst point is colored in green, while the derivative on last point is colored in light blue.

Finally, if you use a B-Spline, you will be able to change the K value for each curve byselecting it and then use the + and - buttons under the ”B-Spline K:” text.

If you specify a background image then a button is added to the menu, to let the user hideand show it. The result is shown in Figure 5 and in Figure 6, where I tryed to draw over an A4Avant designed by Audi.

2Since Hermite splines have only two points per curve, the program will let you only add curves in that case

12

Figure 5: The application running with the background image visible

Figure 6: The application running with the background image hidden

The result of the last modality is shown in Figure 7: the sampling file contained the pointsof the a race circuit shown in Figure 8.

13

Figure 7: The application running with the sampling option and displaying a B-Spline curve

Figure 8: The race circuit that I have sampled

A Appendix - Brief graphic library description

In the appendix I give a very brief description of what kind functionalities the graphic libraryprovides, by listing the header files.

• gl 2d geometry.h: contains functionalities to create 2D figure meshes, such as polygons or

14

circles and to generate the convex hull of a given set of points via the Graham algorithm;

• gl 3d geometry.h: contains functionalities to create 3D solid meshes, like cubes, regularpyramids, cones, prysms cylinders and spheres. The sphere can be drawn with differentresolutions (i.e. slices and stacks). For each solid, there is the possibility to automaticallycalculate normals for lights. I have developed three algorithms, one which calculates facenormals, one which calculates vertex normals by averaging adjacent face normals (usefulif you want to see a smooth surface) and one which uses both and selects between vertexnormals and face normals by angle discrimination;

• gl curve.h: contains functionalities to draw the curves I have mentioned in this report;

• gl material.h: contains some simple functionalities to load textures into a mesh, manageproperties of materials and a nice procedure to map a texture onto a sphere;

• gl matrix.h: contains a bunch of matematical functionalities, to create matrices, vectors,copy and duplicate them, perform operations such as sums, subtractions and multiplica-tions, perform dot products, normalize vectors, determination of CW and CCW directionbetween two vectors, matrix determinant, matrix inverse and linear system solving;

• gl mempool.h: contains functionalities to get pre-allocated matrices and vectors whenneeded, without allocating and deallocating and wasting CPU resources. This is useful forexample for the rendering function, where temporary vectors and matrices are needed;

• gl mesh.h: contains functionalities to create meshes and faces for meshes, as well as cal-culation of normals;

• gl mouse.h: contains functionalities for retrieving current mouse state;

• gl physic law.h: contains functionalities useful for physics simulation: you can evaluate,integrate and derivate polynoms, compute motion law and gravity force;

• gl physic.h: contains functionalities for simple physics, that is sphere to plane collisionand sphere to sphere collision;

• gl printf.h: contains functionalities for drawing texts, in a printf way;

• gl rendering.h: contains only a function to perform rendering of a mesh. The functionis quite complicated, because it performs OpenGL attributes activation and deactivationgiven mesh properties;

• gl scenegraph.h: contains the functionalities to manage a scenegraph, that is create it,add nodes, add children, render the graph, etc. . . ;

• gl selection.h: contains functionalities to manage multiple object selection, so add anobject to the selection, retrieve current selected objects, etc. . . ;

• gl tga.h: contains a function which loads a tga image from a file;

• gl transformation.h: contains functionalities to performs transformations, such as rota-tions or translations;

• gl util.h: contains functionalities for dinamic arrays, elapsed time calculation (in mi-croseconds, useful for physics) and a modified version of the quick sort contained in thestandard C library.

15