Latihan &kasus FTI314-sns

32
Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 1 FTI314 Grafika Komputer (2 sks) Dosen: Ir. Sihar, MT. Program studi Teknik Informatia Fak. Teknologi Informasi Bandung – 2014 Daftar Pustaka: [1] Bloomenthal, J., Wyvill, B. (1997). Introduction to Implicit Surfaces. Morgan Kaufmann. [2] Bratley, P., B. L. Fox, and L. E. Schrage. (1987). A Guide to Simulation, Second Edition. Springer-Verlag. [3] Cook, R.L., Torrance, K.E. (1982). “A Reflactance Model for Computer Graphics”. ACM Trans.Graph. [4] Dorst, L. Fontijne, D., Mann, S. (2007). Geometric Algebra for Computer Science: An Object-Oriented Approach to Geometry. The Morgan Kaufmann Series in Computer Graphics. Morgan Kaufmann. [5] Foley, J.D., etc. (1990). Computer Graphics-Principles and Practice, 2 nd edition. Addison-Wesley. [6] Harrington, S. (1983). Computer Graphics: A Programming Approach. McGraw-Hill. [7] Hughes, J.F., etc. (2014). Computer Graphics, Principles and Practice. Addison Wesley. [8] Plastock, R.A. (1986). Computer Graphics. Schaum's Outline Series. [9] Simamora, S.N.M.P. (2002). “Diktat IF-311 Grafika Komputer”. Dept. Teknik Informatika-Fak.Teknik, ITHB. Bandung. SOAL dan KASUS 1. Jelaskan bagaimana hubungan antara ruang dimensi matriks dengan layar komputer Solusi: Ruang dimensi matriks terdiri dari dua elemen (yang disebut ordo) yakni jumlah baris dan jumlah kolom; misalkan sebuah matriks A dengan ordo 3x4, dituliskan: A3x4. Posisi cursor dalam GUI (Graphical User Interface) pada layar komputer dapat direpresentasikan pada suatu elemen pada matriks. Seperti halnya posisi icon yang berada pada tampilan wallpaper suatu komputer, dapat direpresentasikan pada suatu elemen matriks. Misalkan, suatu icon pada wallpaper komputer direpresentasikan A(109,86) artinya icon berada pada baris ke-109, kolom ke-86. Jumlah baris dan jumlah kolom pada layar omputer dinyatakan dalam resolusi, misalkan: 640x480, yang

Transcript of Latihan &kasus FTI314-sns

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 1

FTI314 Grafika Komputer (2 sks) Dosen: Ir. Sihar, MT.

Program studi Teknik Informatia Fak. Teknologi Informasi

Bandung – 2014 Daftar Pustaka: [1] Bloomenthal, J., Wyvill, B. (1997). Introduction to Implicit Surfaces. Morgan

Kaufmann. [2] Bratley, P., B. L. Fox, and L. E. Schrage. (1987). A Guide to Simulation, Second

Edition. Springer-Verlag. [3] Cook, R.L., Torrance, K.E. (1982). “A Reflactance Model for Computer Graphics”.

ACM Trans.Graph. [4] Dorst, L. Fontijne, D., Mann, S. (2007). Geometric Algebra for Computer Science: An

Object-Oriented Approach to Geometry. The Morgan Kaufmann Series in Computer Graphics. Morgan Kaufmann.

[5] Foley, J.D., etc. (1990). Computer Graphics-Principles and Practice, 2nd edition. Addison-Wesley.

[6] Harrington, S. (1983). Computer Graphics: A Programming Approach. McGraw-Hill. [7] Hughes, J.F., etc. (2014). Computer Graphics, Principles and Practice. Addison Wesley. [8] Plastock, R.A. (1986). Computer Graphics. Schaum's Outline Series. [9] Simamora, S.N.M.P. (2002). “Diktat IF-311 Grafika Komputer”. Dept. Teknik

Informatika-Fak.Teknik, ITHB. Bandung.

SOAL dan KASUS

1. Jelaskan bagaimana hubungan antara ruang dimensi matriks dengan layar komputer Solusi: Ruang dimensi matriks terdiri dari dua elemen (yang disebut ordo) yakni jumlah baris dan jumlah kolom; misalkan sebuah matriks A dengan ordo 3x4, dituliskan:

A3x4. Posisi cursor dalam GUI (Graphical User Interface) pada layar komputer dapat direpresentasikan pada suatu elemen pada matriks. Seperti halnya posisi icon yang berada pada tampilan wallpaper suatu komputer, dapat direpresentasikan pada suatu elemen matriks. Misalkan, suatu icon pada wallpaper komputer direpresentasikan A(109,86) artinya icon berada pada baris ke-109, kolom ke-86. Jumlah baris dan jumlah kolom pada layar omputer dinyatakan dalam resolusi, misalkan: 640x480, yang

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 2

dibangun dari satuan terkecil representasi citra omputer/ omput omputer yang disebut: pixel.

2. Jelaskan dan deskripsikan apa yang dimaksud dengan pixel dan satuan konversi standarisasinya. Solusi: Pixel merupakan satuan dasar citra yang digunakan dalam lingkungan omputer/ omput omputer. Pixel direpresentasikan dalam satuan dasar data bit (binary-digit). � Jika suatu pixel merepresentasikan warna hitam dan putih, maka: 1 pixel

direpresentasikan 1 bit, yakni: 0 untuk putih dan 1 untuk hitam⇒1warna=21 = 2 kemungkinan warna.

� Jika suatu pixel merepresentasikan 16 warna, maka: 1 pixel direpresentasikan 2n = 16 sehingga n=4; maka ada 4-bit yang direpresentasikan 1 pixel untuk menampilkan 16 warna yang berbeda.

� Jika suatu pixel merepresentasikan 256 warna, maka: 1 pixel direpresentasikan 2n = 256 sehingga n=8; maka ada 8-bit yang direpresentasikan 1 pixel untuk menampilkan 256 warna yang berbeda.

Dengan demikian semakin besar satuan pixel-nya maka akan semakin banyak menampung jumlah kombinasi warna (lebih bervariasi), dan alhasil citra yang direpresentasikan oleh layar komputer semakin berkualitas. Perhatikan kode HTML berikut: <script language=JavaScript>

document.write("Kode warna = #aa66ff");

</script>

<body>

<table border=1>

<tr>

<td width=150 bgcolor=#aa66ff></td>

</tr>

</table>

</body>

Tampilan jalannya kode HTML tersebut berikut ini:

3. Jelaskan bagaimana hubungan antara ruang sumbu-x/y umum dengan ruang sumbu-x/y layar komputer. Tunjukkan juga skema anatomi pixel pada perspektif komputer berdasar ruang sumbu-x/y tersebut. Solusi:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 3

Ruang sumbu-x/y umum disebut dengan perspektif konvensional seperti ditunjukkan pada skema berikut ini: Sedangkan ruang sumbu-x/y layar komputer disebut dengan perspektif komputer seperti ditunjukkan pada skema berikut ini: Sehingga bisa disimpulkan hubungan antara ruang sumbu-x/y normal dengan ruang sumbu-x/y layar komputer dapat diilustrasikan seperti objek di depan cermin datar terhadap bayangannya; seperti ditunjukkan pada gambar berikut:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 4

Sedangkan skema anatomi pixel pada perspektif komputer berdasar ruang sumbu-x/y tersebut dapat ditunjukkan berikut ini: Contoh: Ditunjukkan pada perspektif konvensional sebuah model geometri 2-dimensi berikut ini beserta dengan vektor salah satu titik-sudutnya:

13

3a ; 8== bdac satuan

3=== fgefbe satuan

� Konstruksi algoritma-nya dapat dituliskan berikut ini:

� Mencari vektor b:

xb = xa + ( )ac.21 = 3 + 4 = 7

yb = ya − ( )bd.21 = 13 − 4 = 9

maka:

=

9

7b

� Mencari vektor c:

xc = xb + ( )ac.21 = 7 + 4 = 11

yc = yb + ( )bd.21 = 9 + 4 = 13

maka:

=

13

11c

� Mencari vektor d:

xd = xc − ( )ac.21 = 11 + 4 = 7

yd = yc + ( )bd.21 = 13 + 4 = 17

maka:

=

17

7d

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 5

� Mencari vektor e: xe = xb = 7

ye = yb − 3 = 9 − 3 = 6

maka:

=

6

7e

� Mencari vektor f: xf = xe + 3 = 7 + 3 = 10 yf = ye = 6

maka:

=

6

10f

� Mencari vektor g: xg = xf = 10

yg = yf − 3 = 6 − 3 = 3

maka:

=

3

10g

� Perspektif komputer berdasar algoritma dan pemrograman C++ dituliskan berikut ini: #include<iostream.h>

#include<conio.h>

void main()

{

clrscr();

gotoxy(3,13); cout << "xa";

gotoxy(7,9); cout << "xb";

gotoxy(11,13); cout << "xc";

gotoxy(7,17); cout << "xd";

gotoxy(7,6); cout << "xe";

gotoxy(10,6); cout << "xf";

gotoxy(10,3); cout << "xg";

getch();

}

Tampilan jalannya program:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 6

� Perspektif komputer berdasar algoritma dan pemrograman BASIC dituliskan berikut ini: CLEAR

CLS

xa = 3

ya = 13

xb = 7

yb = 9

xc = 11

yc = 13

xd = 7

yd = 17

xe = 7

ye = 6

xf = 10

yf = 6

xg = 10

yg = 3

LINE (xa, ya)-(xb, yb)

LINE (xb, yb)-(xc, yc)

LINE (xc, yc)-(xd, yd)

LINE (xd, yd)-(xa, ya)

LINE (xb, yb)-(xe, ye)

LINE (xe, ye)-(xf, yf)

LINE (xf, yf)-(xg, yg)

Atau bisa juga dimodif menjadi berikut ini: CLEAR

CLS

screen 12

xa = 3

ya = 13

LINE (xa, ya)-(xa+4, ya-4)

LINE (xa+4, ya-4)-(xa+8, ya)

LINE (xa+8, ya)-(xa+4, ya+4)

LINE (xa+4, ya+4)-(xa, ya)

LINE (xa+4, ya-4)-(xa+4, ya-4-3)

LINE (xa+4, ya-4-3)-(xa+4+3, ya-4-3)

LINE (xa+4+3, ya-4-3)-(xa+4+3, ya-4-3-3)

Tampilan jalannya program:

terlalu kecil

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 7

Oleh sebab terlalu kecil, maka dilakukan skalabilitas=20, sehingga algoritma dan pemrograman BASIC ditulis-ulang kembali menjadi berikut ini: CLEAR

CLS

screen 12

xa = 20*3

ya = 20*13

xb = 20*7

yb = 20*9

xc = 20*11

yc = 20*13

xd = 20*7

yd = 20*17

xe = 20*7

ye = 20*6

xf = 20*10

yf = 20*6

xg = 20*10

yg = 20*3

LINE (xa, ya)-(xb, yb)

LINE (xb, yb)-(xc, yc)

LINE (xc, yc)-(xd, yd)

LINE (xd, yd)-(xa, ya)

LINE (xb, yb)-(xe, ye)

LINE (xe, ye)-(xf, yf)

LINE (xf, yf)-(xg, yg)

Tampilan jalannya program:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 8

4. Jika ada dua vektor, x1=

5

8 dan x2=

7

12, akan dihubungkan sebuah garis di antara

kedua vektor tersebut; maka tuliskanlah metode/function berdasar BASIC Language untuk memodelkannya. Tunjukkan dalam perspektif komputer. Solusi:

Jika x1=

5

8 dan x2=

7

12, dihubungkan dengan garis, maka dituliskan dalam

metode/function berdasar BASIC Language untuk memodelkan dalam perspektif komputer berikut ini: LINE (8, 5)-(12, 7)

atau bisa juga dituliskan sebagai berikut: x1 = 8 y1 = 5 x2 = 12

y2 = 7 LINE (x1, y1)-(x2, y2)

5. Berdasar no.4, bagaimanakah jika kedua vector tersebut diperbesar sebanyak 15 kali dengan alasan mengingat resolusi layar dengan kode/sintaks pemrograman yakni:

screen 12 menyebabkan ruang matriks yang ditampilkan oleh layar menjadi lebih kecil. Solusi: Diperbesar sebanyak 15 kali, artinya skalabilitas=15, maka dituliskan sebagai berikut: LINE (15*8, 15*5)-(15*12, 15*7)

atau bisa juga dituliskan sebagai berikut: x1 = 15*8 y1 = 15*5

x2 = 15*12 y2 = 15*7 LINE (x1, y1)-(x2, y2)

6. Jika diasumsikan ruang laya komputer direpresentasikan pada A12x18, tunjukkanlah sebuah segitiga sama-kaki dengan panjang kedua sisi=3-satuan, dimana salah satu

titik-sudut berada pada:

3

4a .

Solusi: Ruang matriks A berada pada dimensi: 12-baris dan 18-kolom, ditunjukkan berikut ini:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 9

=

)18,12(...)5,12(......

...)7,5(.........

)18,1(...)5,1(...)1,1(

1812xA

3

4a merupakan salah satu titik pada segitiga sama-kaki dengan panjang kedua

sisi=3-satuan dalam A12x18, maka dituliskan berikut ini:

=

)18,12()1,12(

)4,6(

)5,6()4,5(

)6,4()5,4()4,4(

)7,3()6,3()5,3()4,3(

)18,1()1,1(

1812xA

7. Jika sebuah lingkaran berada pada titik pusat dengan

6

5a dengan radius (jari-jari)

sebesar 5 satuan. Jika dilakukan skalabilitas=20 terhadap a dan skalabilitas=9 terhadap radius, tuliskanlah metode/function BASIC language untuk memodelkan geometri 2-dimensi lingkaran tersebut. Solusi: Metode/function BASIC language untuk memodelkan geometri 2-dimensi lingkaran pada titik pusat (100,120) dengan radius=45-satuan yaitu: circle (100, 120),45

Konstruksi algoritma pada perspektif konvensional

� Mencari 1a xa1 = xa – 5 = 0 ya1 = ya = 6

maka,

=

6

01a

� Mencari 2a

xa2 = xa = 5

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 10

ya2 = ya – 5 = 1

maka,

=

1

52a

� Mencari 3a

xa3 = xa + 5 = 10 ya3 = ya = 6

maka,

=

6

103a

� Mencari 4a

xa3 = xa = 5 ya3 = ya + 5 = 11

maka,

=

11

54a

Perspektif konvensional: Pada perspektif komputer dalam BASIC, jika me-refer dengan data pada kasus baik dalam hal posisi (az) dan nilai radius (jari-jari) maka akan terlalu kecil; sehingga dilakukan skalabilitas=20 pada posisi titik pusat sehingga didapatkan: xa = (20).(5) = 100 xb = (20).(6) = 120

maka:

=

120

100za

dan skalabilitas=9 untuk radius yakni menjadi: 45 Algoritma dan pemrograman BASIC CLEAR

CLS

screen 12

circle (100, 120),45

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 11

Tampilan jalannya program

8. Jika sebuah segiempat dengan keempat titik-sudut me-refer kepada vektor berikut ini:

=

12

8a

=

9

12b

=

12

12c

=

14

10d

Bangunlah perspektif komputer dalam C++ untuk memodelkan segiempat tersebut. Solusi: Secara perspektif konvensional, ditunjukkan berikut ini:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 12

Algoritma dan pemrograman C++ #include<iostream.h>

#include<conio.h>

void main()

{

clrscr();

gotoxy(8,12); cout << "xa";

gotoxy(12,9); cout << "xb";

gotoxy(12,12); cout << "xc";

gotoxy(10,14); cout << "xd";

getch();

}

Perspektif komputer dalam C++

9. Merujuk pada nomor 8, apabila xc dikenakan skalabilitas=2, tunjukkan kembali perspektif komputer dalam C++ Solusi:

Skalabilitas=2 pada c untuk absis=12, maka vektor c yang baru adalah:

4

24c

maka perspektif konvensional yang baru ditunjukkan menjadi sebagai berikut: Algoritma dan pemrograman C++ #include<iostream.h>

#include<conio.h>

void main()

{

clrscr();

gotoxy(8,12); cout << "xa";

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 13

gotoxy(12,9); cout << "xb";

gotoxy(24,12); cout << "xc";

gotoxy(10,14); cout << "xd";

getch();

} Perspektif komputer dalam C++

10. Jika sebuah segiempat dengan keempat titik-sudut me-refer kepada vektor berikut ini:

=

12

8a

=

9

12b

=

12

12c

=

4

10d

Bangunlah perspektif komputer dalam BASIC untuk memodelkan geometri 2-dimensi tersebut jika dilakukan skalabilitas=15. Solusi: clear

cls

screen 12

line(15*8,15*12)-(15*12,15*9)

line(15*12,15*9)-(15*12,15*12)

line(15*12,15*12)-(15*10,15*4)

line(15*10,15*4)-(15*8,15*12) Perspektif komputer dalam BASIC:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 14

11. Sebuah lingkaran dengan titik pusat berada pada

6

9z dengan radius=3-satuan.

Tunjukkanlah perspektif komputer dalam BASIC jika dilakukan skalabilitas=20 dan diarsir (sertakan dengan warna/color-based). Solusi: Skalabilitas=20, maka:

120

180z dan r=60-satuan

BASIC: clear

cls

screen 12

circle (180,120),60

paint (180,120)

Tampilan jalannya program:

12. Sebuah segitiga sama kaki dengan sisi=3-satuan dengan

6

3a sebagai salah satu

titik sudut, berada dalam sebuah layar komputer yang direpresentasikan dalam

matriks A6x12=

)12,6(.........

.........)1,1(

Apabila representasi citra dikodefikasikan dalam 4 warna sebagai berikut:

kode keterangan

00 putih

01 grey-terang

10 grey-gelap

11 hitam

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 15

Kerjakanlah pertanyaan berikut ini: a) Tunjukkanlah model segitiga sama-kaki tersebut dengan perspektif konvensional. Solusi: Perspektif konvensional dalam matriks A6x12:

............)6,6(..........

..........)7,5()6,5(..........

........)8,4()7,4()6,4(..........

......)9,3()8,3()7,3()6,3(..........

........................

........................

Sebagai acuan dan informasi, bahwa titik sudut pada memiliki alternatif sebagai berikut: Seperti diketahui bahwa sebuah segitiga sama-kaki merupakan setengah dari diagonal bujursangkar. Dengan demikian ada 3-titik segitiga dari 4-titik kubus sebagai alternatif posisi satu buah titik-sudut, yakni sama dengan 12-kemungkinan. Namun yang dipilih adalah yang memenuhi kriteria realistis dan sesuai dengan keterangan serta data pada kasus. Harus dipahami bahwa posisi vektor pada bidang grafika-komputer tidak mengenal negatif, tanda negatif hanya menginformasikan kondisi berlawanan dari pendekatan konvensional; artinya

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 16

pada perspektif komputer adalah berlawanan posisi terhadap perspektif konvensional.

b) Tunjukkanlah citra pada seluruh segitiga tersebut dengan kodefikasi: 01 Solusi: Citra pada seluruh segitiga sama-kaki dengan kodefikasi: 01

A6x12:

............]01[..........

..........]01[]01[..........

........]01[]01[]01[..........

......]01[]01[]01[]01[..........

........................

........................

c) Tunjukkanlah citra pada garis segitiga dengan kodefikasi: 10 Solusi: Citra pada garis segitiga sama-kaki dengan kodefikasi: 10

A6x12:

............]10[..........

..........]10[]10[..........

........]10[..]10[..........

......]10[]10[]10[]10[..........

........................

........................

d) Warna apakah pada pertanyaan b) dan c)? Solusi: Warna pada pertanyaan b) yakni segitiga sama-kaki seluruh permukaan adalah grey-terang; sedangkan pada pertanyaan c) warna garis segitiga sama-kaki adalah grey-gelap.

13. Jika x adalah kode warna pada antar-muka HTML, tunjukkanlah citra x apabila

dinyatakan x←#66aa77. Solusi: Alternatif-1: <body bgcolor=#66aa77>

</body>

Tampilan jalannya program:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 17

Alternatif-2: <table border=0>

<tr>

<td>Kode warna=#66aa77</td>

<td bgcolor=#66aa77 width=50></td>

</tr>

</table>

Tampilan jalannya program:

14. Sebuah model geometri 2-dimensi dimana salah satu titik sudut berada pada

15

6a

dengan bentuk ditunjukkan berikut ini:

a. Susunlah konstruksi algoritmanya untuk mendapatkan: ,,,,, fedcb dan g

Solusi: Konstruksi algoritma dituliskan berikut ini: � Mencari vektor b:

xb = xa + ( )ac.21 = 6 + 4 = 10

yb = ya − ( )bd.21 = 15 − 4 = 11

maka:

=

11

10b

� Mencari vektor c:

xc = xb + ( )ac.21 = 10 + 4 = 14

yc = yb + ( )bd.21 = 11 + 4 = 15

maka:

=

15

14c

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 18

� Mencari vektor d:

xd = xc − ( )ac.21 = 14 − 4 = 10

yd = yc + ( )bd.21 = 15 + 4 = 19

maka:

=

19

10d

� Mencari vektor e: xe = xb = 10

ye = yb − 4 = 11 − 4 = 7

maka:

=

7

10e

� Mencari vektor f:

xf = xe − 4 = 10 − 4 = 6 yf = ye = 7

maka:

=

7

6f

� Mencari vektor g: xg = xf = 6

yg = yf − 4 = 7 − 4 = 3

maka:

=

3

6g

b. Tunjukkanlah perspektif konvensional berdasar model dan vektor-vektor tersebut. Solusi: Perspektif konvensional

c. Jika matriks A merupakan bidang representasi layar komputer, dan resolusi direpresentasikan pada dimensi baris dan kolom; maka pada resolusi berapakah minimal model geometri 2-dimensi tersebut dapat ditampilkan (digambarkan).

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 19

Solusi: Berdasar perspektif konvensional pada solusi b), maka minimal pada resolusi: 15x20, dengan kata lain: 15-baris; 20-kolom.

d. Tuliskan dan tunjukkan perspektif komputer dalam C++ dan BASIC (skalabilitas=15) Solusi: Algoritma dan pemrograman C++: #include<iostream.h>

#include<conio.h>

void main()

{

clrscr();

gotoxy(6,15); cout << "xa";

gotoxy(10,11); cout << "xb";

gotoxy(14,15); cout << "xc";

gotoxy(10,19); cout << "xd";

gotoxy(10,7); cout << "xe";

gotoxy(6,7); cout << "xf";

gotoxy(6,3); cout << "xg";

getch();

}

Perspektif komputer:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 20

Algoritma dan pemrograman BASIC: CLEAR

CLS

screen 12

xa = 15*6

ya = 15*15

xb = 15*10

yb = 15*11

xc = 15*14

yc = 15*15

xd = 15*10

yd = 15*19

xe = 15*10

ye = 15*7

xf = 15*6

yf = 15*7

xg = 15*6

yg = 15*3

LINE (xa, ya)-(xb, yb)

LINE (xb, yb)-(xc, yc)

LINE (xc, yc)-(xd, yd)

LINE (xd, yd)-(xa, ya)

LINE (xb, yb)-(xe, ye)

LINE (xe, ye)-(xf, yf)

LINE (xf, yf)-(xg, yg)

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 21

Perspektif komputer (proyeksi dari konvensional): Skalabilitas=15

15. Sebutkan klasifikasi dimensi yang dikenal dan bisa diterapkan dalam perspektif komputer C++ maupun BASIC, dan berikan contohnya. Solusi: Klasifikasi dimensi yang dikenal dan bisa diterapkan dalam perspektif komputer adalah: dimensi-1 (yakni: titik, garis, dan lengkungan), dan dimensi-2 (yakni: segi-N, lingkaran, oval, elips). Untuk dimensi-3 sendiri direkayasa dalam bentuk pixel dan pensiasatan pada proyeksi citra.

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 22

16. Jelaskan formulasi: “#ααββγγ” pada kode color yang secara umum berlaku pada komputer. Apakah ada hubungannya dengan kode tags pada HTML? Solusi:

Kode #ααββγγ merujuk format R(αα)-G(ββ)-B(γγ) sebagai pola warna dasar/primer yang berlaku pada display/video-memory komputer. RGB akronim dari Red-Green-Blue; metode ini disebut dengan additive color model.

Skema RGB diiinterpretasi secara light Skema RGB diiinterpretasi secara theory

Nilai ααββγγ minimal adalah 0 sedangkan maksimal F, merujuk pada basis bilangan-16 (HEX).

Jika nilai α, β, dan γ bernilai 0, maka color yang ditampilkan adalah hitam (black), seperti ditunjukkan pada kode HTML berikut ini: <body bgcolor=#000000>

</body>

sedangkan bila diberi nilai F, maka color yang ditampilkan adalah putih (white), ditunjukkan kode HTML berikut ini: <body bgcolor=#ffffff>

</body> Untuk menampilkan warna Cyan sebagai kombinasi Green dan Blue ditunjukkan berikut ini: <body bgcolor=#00ffff>

</body> Tampilannya sebagai berikut:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 23

17. Gambarkan skema dasar sistem grafika komputer. Solusi: Skema dasar sistem grafika komputer ditunjukkan berikut ini: Dengan demikian jika monitor atau projector, serta display lain mengalami error maka dapat disimpulkan kondisi tersebut berkaitan dengan display-processor, memory atau display-controler.

18. Tentukanlah prosentase color R (Red) untuk kode color terhadap black (gelap) dan white (terang) berikut ini: a) #FF0000 Solusi:

Kode α, β, γ diuraikan sebagai berikut:

α = 15

1.(15-0) = 1.0

α = 15

1.(15-0) = 1.0

β = 15

1.(15-15) = 0

β = 15

1.(15-15) = 0

γ = 15

1.(15-15) = 0

diturunkan menjadi berikut:

input

output

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 24

γ = 15

1.(15-15) = 0

#ααββγγ = ( ) ( ) ( )( ))0)(5.0()0)(5.0()0)(5.0()0)(5.0()0.1)(5.0()0.1)(5.0(3

1+++++ =

33.33% komposisi gelap, dan 66.67% komposisi putih.

b) #F0F0F0 Solusi:

Kode α, β, γ diuraikan sebagai berikut:

α = 15

1.(15-0) = 1.0

α = 15

1.(15-15) = 0

β = 15

1.(15-0) = 1.0

β = 15

1.(15-15) = 0

γ = 15

1.(15-0) = 1.0

γ = 15

1.(15-15) = 0

#ααββγγ = ( ) ( ) ( )( ))0)(5.0()0.1)(5.0()0)(5.0()0.1)(5.0()0)(5.0()0.1)(5.0(3

1+++++

= 50% komposisi gelap), dan 50% komposisi putih. Perhatikan citranya berikut ini:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 25

c) #88aaff Solusi:

Kode α, β, γ diuraikan sebagai berikut:

α = 15

1.(15-7) = 0.5333

α = 15

1.(15-7) = 0.5333

β = 15

1.(15-5) = 0.6667

β = 15

1.(15-5) = 0.6667

γ = 15

1.(15-0) = 1.0

γ = 15

1.(15-0) = 1.0

#ααββγγ=

( ) ( ) ( )( ))0.1)(5.0()0.1)(5.0()6667.0)(5.0()6667.0)(5.0()5333.0)(5.0()5333.0)(5.0(3

1+++++

= 73.33% komposisi gelap), dan 26,67% komposisi putih. Perhatikan citranya berikut ini:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 26

19. Jika diketahui sebuah object berada pada posisi ruang matriks dalam perspektif

konvensional:

=

2

4a ,

=

2

10b , dan

=

6

10c .

a) Jika a , b , c , dibentuk relasi/path, tentukanlah representasi dimensi apa yang dibentuk object tsb. Sebutkan nama bidang geometri dimensi tsb. Solusi:

Object tersebut jika a , b , c , dibentuk relasi/path membentuk dimensi-2 yakni

segitiga siku-siku di b .

b) Gambarkan dalam perspektif konvensional apabila a , b , c , membentuk sebuah

obejct tsb di-rotasi ����90o pada b . Dan tentukan vektor baru setelah melewati

rotasi tsb. Solusi: Perspektif-konvensional 2-dimensi Berdasar perspektif konvensioanl tersebut didapatkan vektor baru berikut ini.

1a = A’ =

8

10

2b = B’ =

2

10

2c = C’ =

2

14

c) Berdasar b) dengan menggunakan penggaris-busur tentukan sudut γ dan β. Solusi: Dengan menggunakan penggaris-busur, didapatkan:

∠CAB = α = 34o

∠ACB = β = 56o

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 27

∠ABC = ⊥b = 90o

Maka didapatkan, γ = α = 34o

d) Jika tan α = BA

BC, dengan menggunakan metode metrik-kuantitatif (perhitungan

trigonometri) tentukan sudut α yang membentuk garis vektor AC dan AB tsb. Solusi:

BC = 4-satuan dan BA= 6-satuan, maka tan α = 6

4 = 0.66667

Dengan menggunakan cotan(α) = 0.66667, didapatkan α = 33.69o.

e) Apabila dirotasi 180o CB di titik c pada sumbu-z, tentukanlah object baru apa yang terbentuk. Solusi: Dirotasi pada sumbu-z, artinya akan membentuk object 3-dimensi, dimana object baru yang terbentuk berupa kubah setengah-bagian dengan garis pada sisi dinding membentuk segitiga. Ditunjukkan berikut ini:

f) Tentukan area setelah ����30o pada a jika digunakan skalabilitas 1:0.5cm pada

kertas petak-petak yang digunakan. Solusi: Area = luas-permukaan bidang geometri 2-dimensi Skalabilitas 1:0.5cm artinya: 1-satuan merepresentasikan panjang 0.5cm. Ingat, rotasi pada object dalam dimensi berapa pun tidak akan mengubah bentuk object tersebut, sehingga area tetap sama yakni:

Area = 21 .(CB ).( AB ) = (0.5)(4)(0.5)(6)(0.5) = 3-cm2

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 28

20. Berapakah perosentase warna white terhadap black pada kode color #44aadd? Solusi: Oleh sebab warna white dan black memiliki perbandingan sama yakni: jika semua

nilai α, β, γ = 0 maka warna=white dan 100% (terang); demikian jika semua nilai α, β,

γ = f maka warna=gelap dan 100% (gelap). Pada kasus ini digunakan pendekatan black.

Setiap nilai pada masing-masing α, β, γ mewakiliki R-G-B memiliki nilai min. 0 dan

maks. F; artinya setiap kode memiliki peluang=16

1.

Dapat dirumuskan: � untuk mendapatkan color (warna) Red: #FF0000 dirumuskan:

αα + ββ + γγ = 1.0+0.0+0.0 = 1.0 = 100% ⇒ αα = 100% ; α = 0.5 maka nilai satu α pada kode color #ααββγγ maksimal = 0.5 (50%)

� untuk mendapatkan color (warna) Green: #00FF00 dirumuskan:

αα + ββ + γγ = 0.0+1.0+0.0 = 1.0 = 100% ⇒ ββ = 100% ; β = 0.5 maka nilai satu β pada kode color #ααββγγ maksimal = 0.5 (50%)

� untuk mendapatkan color (warna) Blue: #0000FF dirumuskan:

αα + ββ + γγ = 0.0+1.0+0.0 = 1.0 = 100% ⇒ γγ = 100% ; γ = 0.5 maka nilai satu γ pada kode color #ααββγγ maksimal = 0.5 (50%)

Kode color RGB dengan tags HTML:

Red: #ff0000 Green: #00ff00 Blue: #0000ff

Sehingga jika kode color berikut: Kode: #000000 perosentase warna white dan black memiliki citra gelap:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 29

α = 15

1.(15-15) = 0

α = 15

1.(15-15) = 0

β = 15

1.(15-15) = 0

β = 15

1.(15-15) = 0

γ = 15

1.(15-15) = 0

γ = 15

1.(15-15) = 0

#ααββγγ = ( ) ( ) ( )( ))0)(5.0()0)(5.0()0)(5.0()0)(5.0()0)(5.0()0)(5.0(3

1+++++ = 0%

(warna gelap), artinya 100% putih.

kode citra-gelap

kode citra-gelap

kode citra-gelap

kode citra-gelap

0 15-15 4 15-11 8 15-7 c 15-3

1 15-14 5 15-10 9 15-6 d 15-2

2 15-13 6 15-9 a 15-5 e 15-1

3 15-12 7 15-8 b 15-4 f 15-0

Kode: #ffffff perosentase warna white dan black memiliki citra gelap:

α = 15

1.(15-0) = 1.0

α = 15

1.(15-0) = 1.0

β = 15

1.(15-0) = 1.0

β = 15

1.(15-0) = 1.0

γ = 15

1.(15-0) = 1.0

γ = 15

1.(15-0) = 1.0

#ααββγγ = ( ) ( ) ( )( ))1)(5.0()1)(5.0()1)(5.0()1)(5.0()1)(5.0()1)(5.0(3

1+++++ = 100%

(warna gelap), artinya 0% putih.

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 30

21. Sebutkan dan jelaskan implementasi rotasi object pada bidang 2-dimensi pada aplikasi komputer. Solusi: Implementasinya jelas bisa terlihat pada insert object/picture pada OFFICE applications, seperti ditunjukkan pada contoh berikut:

22. Sebuah segiempat dideskripsikan dalam perspektif-komputer dengan titik pada

empat vektor:

=

2

6a ,

=

8

5b ,

=

10

8c dan

=

4

9d . Jika a ditranslasikan 5-

satuan horizontal ke kanan. a) Gambarkan segiempat tsb setelah ditranslasikan. Solusi:

Oleh sebab a terasosiasi terhadap ketiga vektor lain, maka jika a ditranslasikan

5-satuan horizontal ke kanan maka akan berpengaruh simetris terhadap b , c ,

d .

b) Tentukan φ, jika φ adalah sudut antara AB terhadap garis vertikal sumbu-y. Solusi: Skemanya ditunjukkan berikut ini:

�90o (dirotasi 90

o ke-kanan,

searah jarum-jam)

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 31

� secara visual (metode kualitatif) menggunakan penggaris busur:

φ = 10o Skema:

� secara metode kuantitatif:

tan φ = aO

bO =

6

1 = 0.166667 ; φ = 9.4623o

c) Apabila diasumsikan area segiempat ABCD adalah 18 cm2, tentukanlah zK jika zK merupakan suatu bagian area dari segiempat, setelah dilakukan translasi, dibagi empat simetris (secara konkuren). Solusi:

Ir. Sihar, MT. – FTI314 / FTI.Univ.BALE Bandung - 2014 32

Sebuah object apabila dilakukan proses translasi maka area-nya tidak mengalami

perubahan, sehingga dapat dikatakan: ♦(ABCD) = ♦(ABCD)’ = 18 cm2

maka, zK = )18.(41 =

424 cm2

23. Jelaskan pengaruh translasi terhadap sebuah object atau bidang/dimensi geometri dalam terapan komputer. Solusi: Pada terapan komputer, sebuah object apabila salah satu vektor yang terasosiasi pada object tersebut ditranslasikan, maka: i. area object tidak berubah ii. vektor pada posisi yang terasosiasi pada object 2-dimensi tsb akan berubah

simetris terhadap vektor yang ditranslasikan tsb. iii. posisi object baru berubah dari posisi object sebelumnya

24. Tentukan representasi posisi koordinat ax pada matriks-eleven berikut untuk Xz yang ditunjukkan berikut ini:

Solusi:

ax = {‘154’,’I54’,’i54’,’1S4’,’1s4’,’Is4’} ⇒ beberapa di antaranya

Koordinat ax = {(2,4),(4,4),(5,4),(6,4),(8,4),(2,5),(4,5),(8,5),(2,6),(4,6),(5,6),(6,6),(8,6),(10,6),(2,7),(6,7), (8,7),(9,7),(10,7),(2,8),(4,8),(5,8),(6,8),(10,8)}

25. Jika diasumsikan 1-satuan direpresentasikan 1-pixel, tuliskan kode BASIC untuk sebuah garis dengan panjang 50-pixel dengan warna green. Solusi: Untuk panjang sebuah object, koordinat/posisi object tidak dipersoalkan. Misalkan panjang 50-pixel dari koordinat (100,150) ke (150,150) dimana kode warna green = 2. Kode (bahasa pemrograman) BASIC: CLEAR

CLS

SCREEN 12

COLOR 2

LINE (100,150) - (150,150)