1. PROJECT GRAFIKA KOMPUTER
Animasi Gambar SVG
&
Game Hangman
http://cs.unsyiah.ac.id/~sbahri/Grafika/Uas/
Saiful Bahri
1108107010063
Informatika
UNIVERSITAS SYIAH KUALA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
BANDA ACEH, DARUSSALAM
Mei 2014
2. Tugas :
1. Menggunakan Scalable Vector Graphics (SVG), buat animasi dari objek dengan
ketentuan sebagai berikut:
a) Objek terdiri dari minimal 3 (tiga) buah bentuk (shapes)
b) Minimal satu dari tiga objek tersebut harus dibuat bergerak (tidak statis).
2. Membuat game Hangman dengan metode on the fly
Penjelasan tentang Program
1. Program animasi SVG
http://cs.unsyiah.ac.id/~sbahri/Grafika/Uas/Ivul.html
Gambar diatas merupakan animasi dari file SVG yang dibuat dalam bentuk sebuah
pemandangan sederhana yang dimana didalam gambar tersebut terdapat awan yang
berwarna hitam transparent dan matahari di lingkari cahaya merah,balon udara , pohon
apel dengan buah yang berjatuhan , beserta kincir angina diatas sebuah bangunan dan
lampu-lampu
3. Berikut Penjelasan Code Gambar SVG tersebut
Awan-Awan
Dengan menggunakan animatetrabsform dan values .. maka awan akan mengikuti
koordinat yang sudah diketik pada program tersebut.
Matahari
Pada code matahari di buat mengunnakan Ellipse dengan koordinat CX=360 cy=60
rx=30 ry=30 dan dilapisi dengan animatcolor dengen menggunakan warnag RGB dan
radialgradient dapat membuat matahari seolah-olah besinar redup terang .
Bangunan (rumah)
Menggunakan code line (<line id="svg_4" y2="543" x2="72" y1="543" x1="73"
stroke-width="5" stroke="#000000" fill="none"/> ) dengan cara di buat perstep dengan
menggatur panjang dan lebar garis dengan koordinat
Balon Udara
4. Pada Pembuatan balon udara yang bias bergerak dan turun .. dibuat menggunakan
ellipse dan ditambah
animateTransform attributeName="
transform" type="translate" dur="15s" begin="0s"
values="-300,100;400,200;500,300;600,400;700,500;730,570"
repeatCount="indefinite"
/> </g>
Supaya balon udara mengikuti koordinat yang telah di tentukan pada code tersebut
u
Kipas (kincir angin diatas bangunan)
Dibuat dengan menentukan letak koordinat pada atas sebuah bangunan dan ditambah
dengan animate attribute “ dan dur = 0.25 dengan durasi dan repeatcount supaya
kipasnya tidak berhenti.
Pohon dan buah jatuh
<rect id="svg_9" height="223" width="29" y="493.55402" x="1244.62305" stroke-
linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5"
stroke="#000000" fill="#bf5c00"/>
5. Code diatas untuk menggambar batang pohon dan dikasih warna
Sedangkan Pada daun daun pohon menngunakan code ini
<ellipse id="svg_44" cy="473.04352" cx="1160.62305" stroke-linecap="null" stroke-
linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#ffffff"
fill="#ff0000"/>
Karena bentuk daun dibuat dengan menggunakan ellipse
Sedangkan pada buah yang jatuh menggunakan code
<g transform="" id="Ebene 0">
<g>
<circle cx="100" cy="500" r="6.5" style="stroke: none; fill: #ff0000;">
<animateTransform attributeName="transform" type="translate" dur="1s" begin="0s"
values="1070,-20;1070,200"
repeatCount="indefinite"
/>
</g>
Karena code ini menggunakan Values sebagai jalan jatuhnya nya buah dari atas pohon
tersebut
2. Game Hangman
6. Game ini sudah tidk jarang lagi ..karena tujuan game hangman adalah meunyelamatkan
orang yang digantung dengan cara menebak kata dengan benar ,pada game hangman ini
ada berapa peraturan :
Jika salah menebak maka orang tersebut akan di gantung dan akan langsung game over.
Kepada penebak diberikan 10 kali kesempatan untuk menebak kata ,dan pada tombol
yang sudah pernah diklik tidak pernah diklik kedua kali ,Pada screeshot diatas akan
Nampak huruf yang benar ditebak akan muncul pada baris yang kosong sedangkan jika
salah maka kesempatan menebak akan otomatis berkurang ..dan gambar orang akan
muncul step by step secara “on the fly “ karena gambar tersebut berasal dari program
perl yang sudah di upload ke Mesin Cs dengan sinkron dengan database wordlist
sebanyak 9000 kosa kata yang di random dari database .
Penjelasan Code
Gambar orang di gantung
Code dibawah ini merupakan code on the fly orang digantung , karena setiap kata yang
ditebak salah maka fungsi If akan melancutkan ke step selanjutnya … misalnya pada
7. saat gambar masih kosong dan kata yang ditebak salah ,maka otomotasi program
tersebut tercompile dan akan memunculkan per step ke level selanjutnya ( dari lantai
munculkan tiang dan begitu seterusnya
my $level = $ARGV[0];
$img = GD::Simple->new(320,250);
$img->transparent($trans);
$img->interlaced(1);
#------------------------------Lantai---------------------------------
if ($level>0) {
$img->moveTo(90,220);
$img->bgcolor(81, 119, 77);
$img->arc(130,43,170,0,);
$img->fgcolor(161, 87, 23);
#---------------------------Tiang------------------------------
if ($level>1) {
$img->bgcolor(161, 187, 23);
$img->rectangle(80,10,100 ,200);
$img->fgcolor(161, 87, 23);
#-------------------------------Tiang Atas------------------------------
if ($level>2) {
$img->bgcolor(161, 187, 23);
$img->rectangle(80,5,220,15);
$img->fgcolor(17, 222, 23);
$img->moveTo(205,13);
$img->bgcolor(81, 79, 77);
$img->arc(15,15,360,0,);
$img->fgcolor(81, 79, 77);
#---------------------------Tali Gantungan------------------------------------
if ($level>3) {
