lecture 7 - wordpress.com€¦ · 06/02/2016  · lecture 7 a first graphic program and ... in this...

26
Lecture 7 A First Graphic Program And Data Structures & Drawing

Upload: others

Post on 19-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Lecture 7A First Graphic Program

And

Data Structures & Drawing

Page 2: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Objective

The objective is that you will understand:• How to program the generation of 2D and 3D images.

• How to manipulate those images through

• Scaling, translation, rotation and projection.

• How to color and shade the images.

• Remove hidden surfaces and create realistic lighting

effects.

• Before any of that however, we must learn more about how

to describe a drawing in terms that a computer can

understand.

Page 3: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Graphics Primitives• A graphics primitive:

– is a drawing function which the system makes available to

the applications programmer. Example is the Java

drawLine() method.

• The Graphics class is part of the standard Java class

library and its member functions are termed “graphics

primitives”.

• There exist a whole range of methods for drawing and

coloring in a variety of shapes (boxes, polygons, ovals

etc.)

• Take a look at the Java API documentation for full

details.

Page 4: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Features of a simple graphic program

• Gapp and Gcanvas are new Developed, Inherited from JFrame and panel

which are part of the Java Foundation Classes - in particular they are part of

the swing”GUI components.

• when a Gapp object is created, a new GUI window appears on the screen.

Page 5: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Features of a simple graphic program• A Gcanvas / JPanel is simply something we can draw on,

but it isn’t allowed to be on screen by itself, it must be part of

a JFrame. So what we actually need is an instance of Gapp

with an instance of Gcanvas “inside” it (Figure 23).

• Main() The main entry

point for the system is

in class Gapp.

Page 6: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

simple graphic program- initComponents() • sets the window’s screen position and size

• (lines 22,23), sets up some Java apparatus to allow the

program to shut down cleanly.

• (lines 27-31) and creates an instance of a Gcanvas

(graphics canvas) .

• line 25. This GCanvas object is “added” to the Gapp object

and hence becomes part of that window.

Page 7: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

simple graphic program- Paintcomponent()• it is passed a Graphics object (“g”) - line 12.

• drawLine() which is a member of the Graphics class.

The drawLine() method takes 4

parameters, x1, y1, x2, y2 which

represent the start and end points of

the line you wish to draw.

Page 8: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Graphics Primitivesabstract void drawLine( int x1, int y1, int x2, int y2)

Draws a line, using the current color, between thepoints (x1, y1) and (x2, y2) in this graphics context'scoordinate system.

abstract void drawOval( int x, int y, intwidth, int height)

Draws the outline of an oval.

abstract void drawPolygon( int[] xPoints, int[] yPoints, int nPoints)

Draws a closed polygon defined by arrays of x and ycoordinates.

abstract void drawPolyline(int[]xPoints, int[] yPoints, int nPoints)

Draws a sequence of connected lines defined byarrays of x and y coordinates.

void drawRect(int x, int y, intwidth, int height)

Draws the outline of the specified rectangle.

abstract void drawRoundRect(intx,int y, int width, int height, intarcWidth, int arcHeight)

Draws an outlined round cornered rectangle using thisgraphics context's current color.

abstract void drawString(Attributed-CharacterIterator iterator, int x, int y)

Draws the text given by the specified iterator, using this graphics context's current color.

Page 9: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Graphics Primitivesvoid fill3DRect( int x, int y, intwidth, int height, boolean raised)

Paints a 3-D highlighted rectangle filled with the currentcolor.

abstract void fillArc(int x, int y,int width, int height, int startAngle,int arcAngle)

Fills a circular or elliptical arc covering the specifiedrectangle.

abstract void fillOval(int x, int y,int width, int height)

Fills an oval bounded by the specified rectangle with thecurrent color.

abstract void fillPolygon(int[]xPoints, int[] yPoints, int nPoints)

Fills a closed polygon defined by arrays of x and ycoordinates.

abstract void fillRect(int x, int y,int width, int height)

Fills the specified rectangle.

abstract void fillRoundRect(int x,int y, int width, int height, intarcWidth, int arcHeight)

Fills the specified rounded corner rectangle withthe current color.

abstract void clearRect(int x, int y,int width, int height)

Clears the specified rectangle by filling it with the background color of the current drawing surface.

abstract void clipRect(int x, int y,int width, int height)

Intersects the current clip with the specified rectangle.

abstract void copyArea(int x, int y,int width, int height, int dx, int dy)

Copies an area of the component by a distance specifiedby dx and dy.

Page 10: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Process of Generating Graphic Image

Page 11: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Point 2d Class

• A point is basically two coordinates, x and y, which are “real”

numbers.

• Point2d is a Java class to represent a point and used to store

the x and y coordinates of the point.

Page 12: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

The Basic 2d data structure – Line2d Class• Lines are the basic item of drawings.

• Each line has two end points. This suggests that an

appropriate way to describe the drawings would be in

terms of two classes: Line2d and Point2d.

• Thus to represent L1 in this scheme, we need 3 objects:

Page 13: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Line2d Class• The square has 4 corners (nodes).

• Notice in the drawing that a line is defined between two nodes ( for

example line L1 connects nodes N1 and N2 ) but not all nodes are

connected by lines (for example N1 is not connected to N3).

• The square have 4

nodes and 8 Point2d.

• Duplicating Data.

Page 14: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Line2d Class• Is Duplication necessary?

• Well, yes and no. You can do it using 4 points and save your self 4 objects,

but that means that those lines share instances of the points and CAN

NEVER BE CHANGED INDEPENDANTLY.

• From a data modeling point of view, the corners of the square are in fact

two points that JUST HAPPEN to be in the same place.

Page 15: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

The Basic 2d data structure – Line2d Class

Page 16: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Shape2d Class• Can be described as a collection of lines.

• is a class which maintains a list of all of the lines that

make up a shape (vector of lines).

• numberOfLines describes how many lines make up our

shape.

Page 17: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

The Basic 2d data structure – Shape2d

Page 18: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Drawing2d Class• A drawing can consist of many shapes - We can therefore

add a final class to our data model: Drawing2d, which can

maintain another list (Vector) of the various shapes.

Page 19: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Drawing2d Class

Page 20: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

The Basic 2d data structure – Summary• So, in full, we have a drawing object, which has a list of shape

objects, which have lists of line objects, which have two point

objects each.

Page 21: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

The Basic 2d data structure – Class Diagram• Drawing2d has Many Shapes

• Shape2d has many Lines

• Line2d has tow points

Page 22: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

A working Gcanvas

Page 23: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

The Completed system of a graphic program• The final class diagram of the system should look

something like this.

Page 24: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Exercises

Page 25: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Exercises

Page 26: Lecture 7 - WordPress.com€¦ · 06/02/2016  · Lecture 7 A First Graphic Program And ... in this graphics context's coordinatesystem. abstract void drawOval( int x, int y, int

Exercises1. Describe the structure of simple graphics program?

2. List the basic operations that can be performed using the

initiatecomponent() In the Gapp class?

3. What is graphics primitive?

4. List at least five graphics primitive, determine the required parameter, and

the job function required?

5. How can a program generate image or drawing on the computer screen?

6. Describe the following data structures:

Point2d - Line2d - Shape2d - Drawing2d

1. Describe the structure of simple graphics program?

2. For the following figures:

• Draw the class diagram.

• Represent these figures

• in format like outstaring format?