Week 2 Tutorial/Lab

This week's tutorial will actually be a lab and you should go the piano lab (for this week only - week 3 onwards will be in your regular tutorial room).

Your exercise for this lab is to create a simple polygon drawing app like this one. Although the color menu is optional.

Note: To run this code from command line type

export CLASSPATH=$CLASSPATH:/home/cs3421/jogamp/jar/jogl-all.jar:/home/cs3421/jogamp/jar/gluegen-rt.jar
java -cp "$CLASSPATH:Drawing.jar" lab2.DrawingView

Step 0 - Set up an eclipse project for this tut.

Go to Project > Properties > Java Buld Path > Libraries and add the jar files /home/cs3421/jogamp/jar/jogl-all.jar and /home/cs3421/jogamp/jar/gluegen-rt.jar to you build path.

Step 1 - Download supplied Mouse Code

Download Mouse.java and import it into your project.

We will give instruct you how to use this code later in the lab instructions

Step 2 - Create classes

Create three classes:

1. DrawingModel - This will contain the data about the current state of the model
2. DrawingView - This will be the GLEventListener which will draw the model. It will also contain a main method
3. DrawingController - This will be a MouseListener/MouseMotionListener which will allow us to modify the model

Step 2a - Create the DrawingModel

This class tracks the state of the model. It contains the following information

• The list of polygons drawn so far (as lists of points)
• The current incomplete polygon (a list of points, maybe empty)
• The next point, which will be added when the mouse is clicked

Add appropriate accessor methods to allow other classes to read and write this data appropriately.

Step 2b - Create the DrawingView

This class implements the GLEventListener to draw the model. It should store a reference to the model. Implement the display() method to:

1. Clear the window to white
2. Draw all the completed polygons as filled with colour
3. Draw an outline of the incomplete polygon
4. Draw a line connecting the last point added (if any) to the mouse

Write a main() method in this class which:

1. Initialises OpenGL
2. Creates a GLPanel
3. Creates a JFrame and adds the GLPanel
4. Creates a DrawingModel
5. Creates a DrawingView attached to this model
6. Creates an FPSAnimator and adds the GLPanel to it.

Test this code by adding some polygons to your model and seeing if they are displayed correctly.

Step 2c - Incorporate the supplied Mouse Code and Create the DrawingController

Mouse events have coordinates in viewport-coordinates; converting to world coordinates is tricky so I've provided some code for you. To use it:

1. In DrawingView.display() add the code:

   Mouse.update(gl);

   Where gl is the GL2 object.

   You should do this in display before you draw your polygons, to make sure you are drawing the updated mouse co-ordinates.

2. In DrawingView.main() add the code:

   panel.addMouseMotionListener(Mouse.theMouse);

3. Note: To make it work on macs and some other high resolution screens you may need to add the following lines of code in the main in DrawingView

           float scale[] = new float[2];
   	//assuming your GLJPanel variable name is 'panel'
           panel.getCurrentSurfaceScale(scale);
           Mouse.setSurfaceScale(scale);
   

4. You can now call Mouse.getPosition() from any class to get the most recent mouse position in world coordinates.

You also need to create the DrawingController class.

1. This class should implement MouseListener and MouseMotionListener. (Hint: You could do this by extending a MouseAdapter)

   • When the mouse is moved or dragged it should update the 'next point' of the model. It should use the function Mouse.getPosition() to do this
   • When the left mouse button is released it should add the current mouse point to the working polygon.
   • When the right mouse button is released it should finish the current polygon.

2. You will also need to add this as a MouseListener and a MouseMotionListener to your panel in your drawingView.

Experiment with your program, drawing different shapes. Do they always come out the way you expect them to?

Experiment with your program by resizing the window. What happens if you make the window wider vs taller?

Just for fun

Add a menu item that allows you to set the background or foreground colors using a colorpicker, or whatever method you can think of

Add a menu item allowing you to erase the screen

Modify the code in some way to also allow drawing of circles.