GRAFIKA GAME. Aditya Wikan Mahastama. Kanvas dan Primitif Grafika UNIV KRISTEN DUTA WACANA TEKNIK INFORMATIKA GASAL 1112

(1)

GRAFIKA GAME

Aditya Wikan Mahastama

[email protected]

UNIV KRISTEN DUTA WACANA | TEKNIK INFORMATIKA – GASAL 1112

3

Kanvas dan Primitif Grafika

(2)

Before we

begin to draw

(3)

• Sebuah bidang yang akan digunakan dalam mem- plot (menggambar) grafika komputer, disebut

dengan kanvas

• Kanvas dibatasi oleh margin kiri-kanan-atas-bawah, dan batas kanvas ditentukan sebelum mulai

menggambar

• Penggambaran pada koordinat di luar batas kanvas, tidak akan muncul pada kanvas, tetapi kalkulasi titik di luar kanvas masih dimungkinkan

THE CONCEPT OF CANVAS

(4)

• Setiap bahasa pemrograman berbasis visual biasanya memiliki kanvas, meskipun tertuang pada jenis

komponen yang berbeda

• Komponen untuk kanvas pada umumnya berada pada posisi yang berbeda dari komponen untuk menampung citra yang dibuka dari file

• Manipulasi piksel secara bebas hanya dapat dilakukan pada komponen kanvas, tidak pada komponen penampung citra

THE CONCEPT OF CANVAS

(5)

Ilustrasi:

• Visual Basic memiliki dua komponen grafika: TPicture (untuk menampung citra dari file), dan TImage

(untuk menampung kanvas)

• Delphi memiliki satu komponen grafika TImage saja, dengan tingkatan kelas yang berbeda

TImage.TCanvas sebagai container kanvas

TImage.TPicture sebagai container citra dari file

THE CONCEPT OF CANVAS

(6)

Created by Borland since 1992

Uses Pascal language – a successor to Turbo Pascal

It is literally a Visual Pascal

Recent release Delphi 2007, resembles .NET Who resembles who?

.NET is the one who actually resembles Delphi

because its engineers were hijacked from Borland by *****soft

WHAT I’M USING - DELPHI

(7)

Uses Form – like other mostly used programming tools

Uses Drag-and-Drop Components – like other mostly used programming tools

Most users who have an experience using VB,

.NET, C++ Builder, or anything else shouldn’t have any problem using Delphi

Uses Property Box and support OOP hierarchical properties – like other OOP languages

DELPHI BASICS

(8)

A TImage Container

A visual component (VCL) used to contain images, pictures, graphics – whether loaded or drawn

directly. This component is Delphi-native.

Supporting components

Buttons, text boxes, labels to ease the use and

A little knowledge of the Pascal language

WHAT WE NEED TO DRAW

(9)

Drag a TImage component to your form. It will be named automatically as

Image1

To draw a pixel, just use this statement:

Image1.Canvas.Pixels[x,y] := RGB(r,g,b);

Where

x : on-screen x-axis position y : on-screen y-axis position R : red colour value

G : green colour value B : blue colour value

HOW TO DRAW

(10)

Drag a TImage component to your form. It will be named automatically as

^Image1

To draw a pixel, just use this statement:

Example: drawing a red point on [75,120]

Image1.Canvas.Pixels[75,120] := RGB(255,0,0);

or, for known colours:

Image1.Canvas.Pixels[75,120] := clRed;

HOW TO DRAW

(11)

A little knowledge of Pascal All statements end with ;

Variable declarations are strict and explicit, and is placed before a program segment (begin – end)

var angka: integer;

kata: string;

pecahan: real;

Variable casting are using these keywords:

kata := inttostr(angka); >< strtoint kata := floattostr(pecahan); >< strtofloat angka := round(pecahan) or trunc(pecahan)

(12)

A little knowledge of Pascal

Variable assignments uses := while comparison uses = (cf. = and == in C++ or PHP)

A loop does this way:

for x := 1 to 20 do

image1.canvas.pixels[x,10] := clBlack;

for x := 1 to 20 do begin

y := 2 * x;

image1.canvas.pixels[x,y] := clBlack;

end;

or if it takes longer statements:

(13)

A little knowledge of Pascal Same as a branch does:

if x >= 15 then

image1.canvas.pixels[x,10] := clBlack;

if x < 20 then begin

y := 2 * x;

image1.canvas.pixels[x,y] := clBlack;

end;

or if it takes longer statements:

And the last, strings take ‘ ‘ to enclose the text.

kata := ‘Grafkom is nice and good’;

(14)

Graphics Primitives

Point & Line

(15)

• Sekarang disebut juga Primitif Geometris,

merupakan objek geometrik atomis yang paling

mungkin digambar dan disimpan oleh sebuah sistem

• Primitif grafika yang paling dasar:

titik, garis dan segmen garis

• Primitif grafika berikutnya:

bidang, elips (termasuk lingkaran), poligon (segitiga, segi empat, dsb), kurva lengkung (spline curves)

• Setiap citra yang dapat dijabarkan secara grafika, terdiri dari objek-objek atomis

WHAT CONSIDERED PRIMITIVE?

(16)

A single point on the Cartesian plane Described as:

A (x,y) e.g. A (5, 4)

In computer graphics, it is Represented by a pixel

POINT / VERTEX / NODE

(17)

• EUCLIDEAN DISTANCE

• MANHATTAN DISTANCE (CITY BLOCK DISTANCE / TAXICAB GEOMETRY)

DISTANCES BETWEEN TWO POINTS

(18)

DISTANCES BETWEEN TWO POINTS

Green: Euclidean Others: Manhattan

(19)

A sequence of points plotted by a linear equation Described as

y = mx + c

Where

m : slope (gradien) c : constant number and x is limited within a range

e.g. y = 2x + 1, 0 < x < 3

LINE / EDGE

(20)

A sequence of points plotted by a linear equation Described as

) (

1 2

x x

y m y

−

= −

y = mx + c

When its drawn, it will have two points at each ends of the line. Therefore we can obtain its slope degree using this equation:

x m y

∆

= ∆

LINE / EDGE

(21)

If we plot a line using integer loop, we will have a line that is not continuous

Why? Because a line plot is a linear function, which in fact plots continuous real numbers

So, how we make it a smooth one?

LINE PLOTTING PROBLEM

(22)

1. MAKE A BIGGER LOOP

For instance, if you want to draw a y = 3x + 1 limited by 0 < x <10, try this loop

for x:= 0 to 100 do begin

y := 3 * x;

image1.canvas.pixels[round (x/10), round (y/10) + 1] := clRed;

end;

The bigger you blow up the number, the more

accurate it will plot, but it will surely makes up a huge number of redundant plot points

(23)

2. DDA ALGORITHM

It has a real cool name: Digital Diferential Analyzer, while what it really did is:

to draw line from known endpoints (x1, y1) and (x2, y2) considering distances and slope trend of both endpoints by:

- adding the right slope for each pairs of a (x,y) repeatedly from (x1,y1) for tstep times

- tstep is either dx or dy, according to the trend

(24)

2. DDA ALGORITHM

x1 := 0; y1 := (3 * x1) + 1;

x2 := 10; y2 := (3 * x2) + 1;

dx := x2-x1; //manhattan distance of x dy := y2-y1; //manhattan distance of y

if abs(dx)>abs(dy) then tstep:=abs(dx) else tstep:=

abs(dy);

add_x := dx / tstep;

add_y := dy / tstep;

x := x1; y := y1; //draw beginning at x1,y1 Image1.canvas.pixels[trunc(x),trunc(y)] := clRed;

for i:= 1 to tstep do begin

x:= x + add_x;

y:= y + add_y;

image1.canvas.pixels[trunc(x),trunc(y)]:=clRed;

end;

(25)

3. BRESENHAM ALGORITHM

It is used to draw a line with a positive slope, when the slope value is less than 1

For such a slope, Bresenham said that the equation is y = m(x_k + 1) + c

and comes those really buzzing equations (read by yourself in the book!), so that a decisive point P can be obtained, which is started with

P₀ = 2∆y - ∆x

(26)

x1 := 0; y1 := round(0.5 * x1) + 1;

x2 := 10; y2 := round(0.5 * x2) + 1;

dx := x2-x1; //manhattan distance of x dy := y2-y1; //manhattan distance of y p := (2*dy) - dx;

if x1 > x2 then begin

x := x2; y := y2;

xend := x1;

end else begin

x := x1; y := y1;

xend := x2;

end;

(27)

//draw beginning at x,y

image1.canvas.pixels[x,y] := clRed;

for i:= x to xend do begin

x:= x + 1;

if p < 0 then p := p + (2*dy) else

begin

y := y + 1;

p := p + (2*(dy-dx));

end;

image1.canvas.pixels[x,y] := clRed^; end;

(28)

4. NATIVE DELPHI KEYWORD

It is known from previous algorithms, that endpoints can always be obtained from a line, for instance:

x1 := 0; y1 := (3 * x1) + 1;

x2 := 10; y2 := (3 * x2) + 1;

or in a clear language:

(x1, y1) = (0, 1)

(x2, y2) = (10, 31)

and they’re happy pairs, always come altogether

(29)

4. NATIVE DELPHI KEYWORD

Then, it becomes as simple as this:

Image1.canvas.moveto(x1,y1);

Image1.canvas.lineto(x2,y2);

(x1, y1) = (0, 1) (x2, y2) = (10, 31)

Didn’t result in anything? Don’t forget to name the colour first!

Image1.canvas.pen.color := clRed;

(30)

Primitives Descendant

Polygon & Polyline

(31)

• Sebuah bangun datar yang dibatasi oleh sirkuit (jalur tertutup) berupa sejumlah segmen garis lurus yang saling bersambung

• Segmen-segmen garisnya disebut dengan sisi (sides), dan pertemuan dua segmen disebut dengan pojok

(corners)

• Bahasa Indonesia: POLIGON

WHAT IS POLYGON?

(32)

WHAT IS POLYLINE?

• Sejumlah segmen garis lurus yang saling bersambung yang tidak membentuk sirkuit tertutup

• Istilah ini tidak resmi digunakan

• Bahasa Indonesia: tidak ada

(33)

• KONVEKS (CONVEX)

Jika besar setiap sudut internalnya kurang dari 180 derajat dan letak sisi-sisinya berada di dalam atau sama dengan titik terluar poligon

• KONKAF (CONCAVE)

Jika besar sudut internalnya ada yang melebihi 180 derajat

JENIS – JENIS POLIGON

(34)

• SIMPEL (SIMPLE)

Jika tidak ada segmen garis yang berpotongan dalam poligon. Disebut juga poligon Jordan

• NON-SIMPEL (NON-SIMPLE)

Jika ada segmen garis yang saling berpotongan

JENIS – JENIS POLIGON

(35)

• EQUIANGULAR

Jika besar tiap-tiap sudut pada pojoknya sama besar

• CYCLIC

Jika semua pojoknya terletak dalam sebuah lingkaran

• EQUILATERAL

Jika semua sisi-sisinya sama panjang

JENIS – JENIS POLIGON

(36)

Given two endpoints as one and the other corner, separated diagonally

(x1, y1) = (0, 1) (x2, y2) = (5, 7)

WELL, THEN, HOW TO DRAW A BOX?

(37)

Well, I suppose now you can figure out the way to draw these objects too:

Triangle – with three known points

Trapesium – with four known points

Kite – with four known points

Parallelepipedum – with four known points

YOU’RE SMART!

(38)

Changing line colour:

Image1.canvas.pen.color := RGB(200,100,50);

Changing fill colour:

Image1.canvas.brush.color := RGB(200,100,50);

Filling a polygon (closed lines at endpoints):

Image1.canvas.FloodFill(x,y,Tcolor,TFillStyle);

Image1.canvas.FloodFill(40,40,RGB(255,0,0),fsBorder);

TColor: expected bordering colour;

TFillStyle: fsBorder – fill until meet a border with such a colour

fsSurface– fill the colour until borders with another colour

Changing line weight:

Image1.canvas.pen.width := 3;

ANOTHER CLUE @ DELPHI

(39)

Primitives Descendant

Ellipse & Arc

(40)

Ascend from the Primitives:

Conical

Bhs Indonesia: Konik

(41)

(42)

How to draw a circle?

We can pretend to plot it as a function of y=f(x) y = y

_c

± (r

²

– (x

_c

– x)

²

)

^½

But it is rather take a thought to implement,

since we have 4 quadrants; and that (x, y) itself, in fact, is a result plotted by r

Then, we could use the perimeter function:

x = x

_c

+ (r cosθ)

y = y

_c

+ (r sinθ)

(43)

How to draw a circle? Delphi reminder Delphi operates trigonometry functions using radian instead of degree

360 degree = 2π radian

So make sure you specify the θ in radian

theta := 2 * PI * (deg / 360);

x := xc + (r * cos(theta));

y := yc + (r * sin(theta));

(44)

1. Direct Primitive Plotting

xc:=100; yc:=100; r:=50;

incr := 1 / r;

theta1 := 0;

theta2 := 2 * PI;

While (theta1 < theta2) do begin

x := xc + (r * cos(theta1));

y := yc + (r * sin(theta1));

theta1 := theta1 + incr;

end;

(45)

Circle plotting problem

If we plot a line using integer loop, we will have a line that is not continuous – same problem as the line.

So, how we make it a smooth one?

y = y

_c

± (r

²

– (x

_c

– x)

²

)

^½

Which, if we started with centre point (x,y) for just a 90 degree part, could result in:

x

on increment of x, next P will be

**P = P + (2 * x) + 1** if previous P < 0 or

y = y – 1 (decrease y first)

**P = P + (2 * (x - y)) + 1** if previous P >= 0

(47)

2. Midpoint Algorithm

xc:=100; yc:=100; r:=50;

x:= 0;

y:= r;

p:= 1-r;

While (x < y) do begin

image1.canvas.pixels[xc+x,yc+y]:=clRed;

image1.canvas.pixels[xc+x,yc-y]:=clRed;

image1.canvas.pixels[xc-x,yc+y]:=clRed;

image1.canvas.pixels[xc-x,yc-y]:=clRed;

image1.canvas.pixels[xc+y,yc+x]:=clRed;

image1.canvas.pixels[xc+y,yc-x]:=clRed;

image1.canvas.pixels[xc-y,yc+x]:=clRed;

image1.canvas.pixels[xc-y,yc-x]:=clRed;

(48)

2. Midpoint Algorithm

x := x + 1;

if p < 0 then

p := p + (2 * x) + 1 else

begin

y := y - 1;

p := p + (2 * (x – y)) + 1;

end;

(49)

3. Bresenham Algorithm

Same as midpoint, this algorithm draws a circle from 4 starting points, using the main axis, then develop around towards another axis

But Bresenham use these definitions of decisive points:

P

₀

**= 3 – (2 * r)**

using the current x, next P will be

**P = P + (4 * x) + 6** if previous P < 0

or **P = P + (4 * (x - y)) + 10** if previous P >= 0 then decrease y

after decisive points found, then increase x

(50)

3. Bresenham Algorithm

xc:=100; yc:=100; r:=50;

x:= 0;

y:= r;

p:= (3 – (2 * r));

While (x < y) do begin

image1.canvas.pixels[xc+x,yc+y]:=clRed;

image1.canvas.pixels[xc+x,yc-y]:=clRed;

image1.canvas.pixels[xc-x,yc+y]:=clRed;

image1.canvas.pixels[xc-x,yc-y]:=clRed;

image1.canvas.pixels[xc+y,yc+x]:=clRed;

image1.canvas.pixels[xc+y,yc-x]:=clRed;

image1.canvas.pixels[xc-y,yc+x]:=clRed;

image1.canvas.pixels[xc-y,yc-x]:=clRed;

(51)

3. Bresenham Algorithm

if p < 0 then

p := p + (4 * x) + 6 else

begin

p := p + (4 * (x – y)) + 10;

y := y – 1;

end;

x := x + 1;

end;

(52)

4. Native Delphi Keyword

Delphi cannot draw a circle using centre point,

instead it uses endpoints represent a rectangle

outside the circle

(53)

4. Native Delphi Keyword

Then, it becomes as simple as this:

Image1.canvas.ellipse(x1,y1,x2,y2);

(x1, y1) = (0, 1)

(x2, y2) = (10, 31)

Didn’t result in anything? Don’t forget to name the colour first!

Image1.canvas.pen.color := clRed;

Image1.canvas.ellipse(x1,y1,x2,y2);

(54)

What makes a circle and an ellipse different?

Only the radius does. An ellipse has different x- and y-radius, while a circle has the same.

An ellipse’s equation is described as Ax

²

+ By

²

+ Cxy + Dx + F = 0

or, to emphasise the radius difference, use the perimeter equation:

x = x

_c

+ (r

_x

cosθ)

y = y

_c

+ (r

_y

sinθ)

(55)

1. Direct Primitive Plotting

xc:=100; yc:=100; rx:=100; ry:=50;

theta1 := 0;

theta2 := 2 * PI;

incr := 1 / rx;

x := xc + (rx * cos(theta1));

y := yc + (ry * sin(theta1));

end;

(56)

2. 4-symmetry Algorithm

xc:=300; yc:=300; rx:=50; ry:=50;

theta1 := 0;

theta2 := (2 * PI) / 4;

incr := 1/rx;

x := rx * cos(theta1);

y := ry * sin(theta1);

image1.canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clGreen;

image1.canvas.pixels[trunc(xc+x),trunc(yc-y)]:=clGreen;

image1.canvas.pixels[trunc(xc-x),trunc(yc+y)]:=clGreen;

image1.canvas.pixels[trunc(xc-x),trunc(yc-y)]:=clGreen;

end;

(57)

Five topics

to choose

(58)

Stick Rotation

(59)

Stick Rotation

(60)

Gradual Rotation

Draw here deliberately

(61)

Gradual Rotation

(62)

LIPS

(63)

LIPS

Fill colour musn’t white

Outline colour musn’t white

(64)

Intersection

(65)

Intersection

Outline colour must be black

(66)

Polyline and Polygon

(67)

Polyline and Polygon

Line colour must be black

(68)