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

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

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

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"/>

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

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

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) {

$img->moveTo(205,11);

$img->penSize(5,5);

$img->lineTo(205,50);

#-----------------------Kepala------------------------------------

if ($level>4) {

$img->moveTo(202,60);

$img->penSize(0,0);

$img->bgcolor(252, 220, 178);

$img->fgcolor(195, 190, 199);

$img->ellipse(35,45);

#------------ MATA KIRI------------------------------------

$img->moveTo(195,55);

$img->bgcolor(0, 0, 0);

$img->fgcolor(255, 255, 255);

$img->ellipse(10,6);

#-------------MATA KANAN------------------------------------

$img->moveTo(210,55);

$img->bgcolor(0, 0, 0);

$img->fgcolor(255, 255, 255);

$img->ellipse(10,6);

#--------------------mulut---------------------------------

$img->moveTo(200,72);

$img->bgcolor(255, 255, 255);

$img->fgcolor(0, 0, 0);

$img->ellipse(16,8);

#------------------------Kumis-----------------------------

#$img->moveTo(205,65);

$img->bgcolor(183, 7, 7);

$img->fgcolor(183, 7, 7);

$img->arc(20,10,180,0,);

#------------Badan-------------------------

if ($level>5) {

$img->moveTo(203,82);

$img->bgcolor(202, 0, 202);

$img->fgcolor(255, 0, 0);

$img->penSize(30,30);

$img->lineTo(203,150);

#--------Tangan sebelah Kiri--------------

if ($level>6) {

$img->moveTo(188,88);

$img->fgcolor(252, 220, 178);

$img->penSize(5 ,5);

$img->lineTo(150,50);

#---------Tangan Kanan----------------------

if ($level>7) {

$img->moveTo(218,90);

$img->penSize(5,5);

$img->lineTo(265,48);

#---------Kaki Kiri--------------------------

if ($level>8) {

$img->moveTo(192,150);

$img->penSize(5,5);

$img->lineTo(160,183);

#------------------tapak kaki-----------------------

$img->moveTo(139,180);

$img->penSize(10,10);

$img->lineTo(160,183);

#----------Kaki Kanan--------------------------

if ($level>9) {

$img->moveTo(210,150);

$img->penSize(5,5);

$img->lineTo(228,185);

#------------------tapak kaki-----------------------

$img->moveTo(225,180);

$img->penSize(10,10);

$img->lineTo(245,170);

}

}

}

}

}

}

}

}

}

}

Sedangkan Pada keyboard Menggunakan Tombol button pada html