part i. drawing an image using lines (airplane, missiles, stars) part ii. animating objects in the...

25

Upload: asher-gavin-payne

Post on 17-Jan-2016

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using
Page 2: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

INTRODUCTIONCreating and animating an image by using lines .

An aeroplane was chosen as the main object in the image with four missiles attached to it and some stars in the space .

The programming language used in this project is C# with the support of the libraries: GDI+ Library and DirectX Library (released recently in June 2007).

Page 3: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

CONTENTSPart I.

Dra

wi

ng a

n I

mag

e

usi

ng Li

nes (

Air

pla

ne,

Missil

es, Stars)

Part II.

Ani

mati

ng

Obj

ects i

n t

he i

mag

e

usi

ng ti

mers

Part II. Animating objects using keyboard buttons.

Concl

usi

on

Page 4: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGE An aeroplane is a complex object that can have different views and

directions .

Therefore, we can model the aeroplane object by stick a bunch of primitives together

Aeroplane

Page 5: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

Hierarchical Model

Lower Part

Upper Part

Upper Wings Elevator

Small Part Main Part

Surface

Missile1

Missile2

Head

Body

Head

Body

Missile

Missile1

Missile2

Head

Body

Head

Body Missile

Lower Wings Elevator

Small Part Main Part

Surface

Central Part

Cockpit

Fuselage

Hierarchical Model of the Aeroplane

Page 6: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEThe task is to draw the previous aeroplane model by using only

lines .

Thus, a group of points are defined.

The points will be used to join lines together in order to get a similar shape to the shape we have chosen .

(0,0)

Page 7: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEThree functions (methods) are used to define the aeroplane’s points. The first function is for the center, the other function is for the

upper part and the last function for the lower part .

Page 8: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGE

Page 9: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEProgramming Techniques

Graphics smoothing mode is used. The smoothing mode specifies whether lines, curves, and the edges of filled areas use smoothing (also called antialiasing).

Page 10: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEProgramming Techniques

Three types of classes are used to make the graphics in C .#

•Color Class to define a color; either by choosing a well-known color or by using the ARGB (Alpha, Red, Green, Blue) color

system .

Pen Class to draw lines .

Brush Class to fill polygons

Page 11: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGE

Page 12: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEProgramming Techniques

Lines are drawn by using Graphics.DrawLine method which is used to draws a line connecting two points.

Polygon areas are filled by using Graphics.FillPolygon method which is used to fill a polygon specified by an array of points.

Page 13: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGE

1

2

3

Page 14: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGE

Page 15: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEAdding Missiles to the aeroplane

Four missiles has been added to the aeroplane. The missiles are numbered from one up to four .Two methods are defined to draw missiles .

The first method is to determine the x and y coordinates to start the missile based on its received number .

The second one is to draw each missile based on the received x and y coordinated from the previous method.

Page 16: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEAdding stars to enhance the scene:

One star is drawn in the screen using the same graphics techniques. Then, scaling, translation and rotation are used in order to get several size, position and shape of several stars

Page 17: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

I. DRAWING THE IMAGEPainting and Geometric Transformations:

In C#, we can overwrite (override) OnPaint method to control what to draw in the screen. One aeroplane is drawn and then scaling and translating using ScaleTransform and TranslateTransform are done in order to draw another two aeroplanes.

Page 18: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

II. ANIMATING THE IMAGE

Timer-Based C#

Double buffer capability is used in order to hide the movement

steps and to make the animation as real as possible

Keyboard-Based DirectX

Page 19: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

Start

Initialise required flagsgoMissileFlag = false, finishMissileFlag = false, goFactor = 1, goTime = 0

Start Timer

While Timer = true

IsxHead >

ScreenWidth/2

Increment xHead by 10 pixelsgoMissileFlag = true

Move missile by goFactor

Increment goFactor by 10 pixels

IsgoFactor > 0

Initialise goFactor

Increment goTimes by one

FinishMissileFlag = true

IsgoTime <=3

Initialise the start point of the plane xHead, y Head

Initialise the start point of the missiles xMissle, yMissle

Move the plane to the new coordinates

YesNo

No

Yes

No

Yes

Animation Algorithm

Page 20: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using
Page 21: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

II. ANIMATING THE IMAGETimer-Based Animation

Page 22: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

II. ANIMATING THE IMAGETimer-Based Animation

Page 23: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

II. ANIMATING THE IMAGE

Keyboard buttons are also programmed using the support of DirectX library.

The arrows are used to move the object in all four directions .

The space button is used to push the missiles.

Keyboard-Based Animation

Page 24: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using
Page 25: Part I. Drawing an Image using Lines (Airplane, Missiles, Stars) Part II. Animating Objects in the image using timers Part II. Animating objects using

III. CONCLUSION

Creating graphics using geometric primitives such as lines is not a complicated process if the objects in the image are implemented by

hierarchical models .

The idea of animation is also can be simplified by designing an algorithm for how each object will move during the animation.