LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

MODUL I
PENGANTAR GRAFIKA KOMPUTER DAN
PENGENALAN PROCESSING 3.3

NIM : 15104410020

NAMA : SEPTIAN LUKAS C

JURUSAN : TI A

TGL. PRAKTEK : 7 APRIL 2017

FAKULTAS TEKNOLOGI INFORMASI

TEKNIK INFORMATIKA
UNIVERSITAS ISLAM BALITAR
2017
 LEMBAR PERSETUJUAN

MODUL I
PENGANTAR GRAFIKA KOMPUTER DAN
PENGENALAN PROCESSING 3.3

NIM : 15104410020

NAMA : SEPTIAN LUKAS C

JURUSAN : TI A

KELOMPOK :A

TGL. PRAKTEK : 7 APRIL 2017

Disetujui,

Blitar, April 2017

Asisten Dosen

Azis Suroni, S.Kom

 PRAKTIKUM
FAKULTAS TEKNOLOGI INFORMASI
TEKNIK INFORMATIKA

LEMBAR ASISTENSI

BAB :1

JUDUL PRAKTIKUM : PENGANTAR GRAFIKA KOMPUTER DAN

PENGENALAN PROCESSING 3.3

NAMA PRAKTIKAN : SEPTIAN LUKAS CAHYONO

NIM : 15104410020

FAKULTAS : TEKNOLOGI INFORMASI

JURUSAN : TI A

TANGGAL PRAKTIKUM : 7 APRIL 2017

TANGGAL ASISTENSI : 14 APRIL 2017

TANDA TANGAN :

Disetujui,

Blitar, ... April 2017

Asisten Dosen

Azis Suroni, S.Kom

 BAB I

PENDAHULUAN PRAKTIKUM

1.1 Grafika Komputer

Grafika Komputer (Computer Graphic) adalah seperangkat alat yang terdiri dari
hardware dan software untuk memproduksi suatu gambar, grafik atau citra realistic
untuk seni, game computer, foto dan film animasi. Grafika Komputer merupakan
bagian yang paling paling sulit di bidang computer, karena selain harus mengerti
bahasa dan logika pemrograman juga dibutuhkan kemampuan analisis serta
pemahaman matematik. Banyak cara dan variasi untuk menghasilkan gambar dengan
computer. Seringkali kita akan dihadapkan pada masalah algoritma dan pemrograman
untuk menghasilkan citra yang realistic. Hal ini adalah sesuatu yang lumrah, sehingga
diperlukan pendekatan sesederhana mungkin dan pemahaman algoritma untuk
mendapatkan citra realistic.
1.2 Processing
Processing merupakan perangkat lunak open source yang menyediakan bahasa
pemrograman dan lingkungan pemrograman bagi orang-orang yang ingin membuat
program pengolahan citra, animasi dan suara. Processing digunakan dalam berbagai
tahap seperti: belajar, membuat prototype sampai pasda tahap produksi. Processing
dibuat dengan tujuan untuk memberikan fasilitas belajar pemrograman computer
dalam konteks visual. Processing dapat diunduh di http://www.processing.org. Ada
dua versi processing yang tersedia, yaitu versi tanpa java dan versi dengan java.
Dengan sedikit keberuntungan, model Lingkungan kerja Processing adalah seperti
ditunjukkan pada gambar. Gambar lingkungan kerja Processing 3.3
 Processing menggunakan istilah Sketch untuk proyek yang ditulis menggunakan
processing. Setiap sketch disimpan dalam direktori terpisah dan program utama
disimpan di file nama yang sama dengan nama direktori. Sebagai contoh, sketch
dengan nama veronica akan disimpan di derektori veronica dengan file program
veronica,pde. Anda sekarang menjalankan Pengolahan Development Environment
(atau PDE). Tak banyak untuk itu, wilayah yang besar Editor Teks, dan ada deretan
tombol di bagian atas, hal ini toolbar. Editor Berikut adalah Pesan Area, dan di bawah
yaitu Console. Pesan Area digunakan untuk satu pesan baris, dan Konsol digunakan
untuk rincian lebih teknis.
Toolbar

1.3 Elemen Dasar Gambar pada Grafika Komputer

Citra pada grafika computer menggunakan elemen dasar grafik. Elemen-elemen ini
memudahkan untuk menggambar bentuk objek pada layar monitor. Dalam grafika
computer terdapat 4 elemen dasar grafik yaitu :
a. Titik (point)
b. Garis (line)
c. Bentuk segi
d. Bentuk Bundar
1.4 Points and Lines
Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y
adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan perintah
lines(x1,y1,x2,y2). Untuk mengubah warna garis, dapat digunakan perintah stroke(x)
atau stroke(r,g,b). Selain itu ketebalan garis dapat kita atur dengan menggunakan
perintah strokeWeight(x) dengan nilai x adalah jumlah ketebalan pixel. Jika ingin
merubah tampilan ujung garis, dapat juga kita tambahkan perintah strokeCap(mode).
Mode yang digunakan adalah SQUARE, ROUND dan PROJECT.
1.5 Objek Bundar
Untuk membuat objek bundar dapat menggunakan beberapa cara bentuk, yaitu :
ellipse dan busur. Untuk bentuk ellipse dapat digunakan perintah
ellipse(x,y,width,height) dengan nilai x dan y adalah sebagai pusat ellipse seperti
ditunjukkan pada gambar berikut :
 Sedikit berbeda dengan penggunaan busur (arc). Pada ellipse kita dapat membuat
bentuk bundar secara utuh, namun pada busur kita dapat membuat bentuk bundar
hanya sebagian dalam arti kurva terbuka. Perintah yang digunakan adalah
arc(x,y,width,height,start,stop), x dan y adalah posisi pusat busur, width adalah lebar
dan height adalah tinggi. Penggunan start pada arc adalah posisi awal penggambaran
dan stop adalah posisi akhir penggambaran busur. Nilai awal dan akhir pada arc,
adalah menggunakan satuan nilai PI (). Untuk 180 sama dengan PI = 3,14 atau
(22/7) jika dibuat dengan persamaan lain yaitu : (sudut * PI)/180. Perintah fill(r,g,b)
digunakan untuk member warna area didalam ellipse atau arch, dan noFill() digunakan
untuk menghilangkan warna didalam area. Untuk perintah stroke(), noStroke(),
strokeCap() dan strokeWeight() juga dapat diaplikasikan pada objek.
1.6 Bentuk Segi
Bentuk segi yang dimaksud adalah berupa segi empat dan segi tiga atau segi lainnya.
Untuk yang pertama kita mencoba untuk membuat segi empat standar dengan
menggunakan perintah rect(x,y,width,height), dimana x dan y adalah posisi awal sudut
seperti ditunjukkan pada gambar berikut:

Perintah lain yang dapat digunakan adalah quad(x1,y1,x2,y2,x3,y3,x4,y4). x1 dan y1

menyatakan koordinat xy titik sudut pertama, x2 dan y2 menyatakan koordinat xy titik
sudut kedua, x3 dan y3 menyatakan koordinat xy titik sudut ketiga, x4 dan y4
menyatakan koordinat xy titik sudut keempat. Bentuk selanjutnya adalah segitiga yang
dapat dibuat dengan perintah triangle(x1,y1,x2,y2,x3,y3). Bentuk yang lain dalah
penggunaan bentuk bebas yaitu dengan menggunakan perintah :
beginShape (mode);
vertex(x,y);
vertex(x,y);
..
 endShape();
dengan menggunakan mode perintah ini, setiap vertex akan terhubung menjadi
sebuah objek pada satu macam shape. Parameter mode shape dapat diisi dengan
POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS,
QUAD_STRIP. Seperti pada contoh gambar berikut ini :
 BAB II

TUGAS PRAKTIKUM

2.1 Setelah melakukan percobaan diatas, buat layar output dengan ukuran bebas
tetapi dengan bentuk bujur sangkar, kemudian beri warna kuning, kemudian
ungu, dan coklat.
Kuning
Listing Program
size(200, 200);
background(#EBFC08);
Input Program

Output Program

Ungu
Listing Program
size(200, 200);
background(211,8,252);
Input Program

Output Program
 Coklat
Listing Program
size(200, 200);
background(139,73,1);
Input Program

Output Program

2.2 Buatlah sebuah objek lingkaran

Listing Program
size(200, 200);
background(#19FADA);

fill(#FF0329);
ellipse(100, 100, 90, 90);
Input Program

Output Program
2.3 Buatlah objek berikut dengan menggunakan kombinasi dari bentuk output
primitive

Robot
Listing Program
size(300, 300);
background(#F2EB07);

noStroke();
fill(#071CF2);
rect(110, 10, 70, 55);
rect(103, 68, 86, 90);
rect(77, 68, 23, 62);
rect(192, 68, 23, 62);
rect(114, 161, 30, 90);
rect(147, 161, 30, 90);

fill(#FF1803);
ellipse(130, 35, 20, 20);
ellipse(160, 35, 20, 20);

Input Pro gram

Output Program

Lingkaran
Listing Program
size(300, 300);
background(#19FADA);

fill(#FF0329);
ellipse(100, 100, 90, 90);
ellipse(188, 100, 90, 90);
ellipse(145, 178, 90, 90);
Input Pro gram

Output Program
 BAB III

PEMBAHASAN PRAKTIKUM

3.1 Program 1.1

Listing Program
size(200, 200);
background(0);
Input Program

Output Program

3.2 Program 1.2

Listing Program
size(200, 200);
background(128);
Input Program

Output Program
3.3 Program 1.3
Listing Program
size(200, 200);
background(255);
Input Program

Output Program

3.4 Program 1.4

Listing Program
size(200, 200);
background(255,128,0);
Input Program

Output Program

3.5 Program 2.1

Listing Program
int d = 40;
int p1 = d;
int p2 = p1+d;
int p3 = p2+d;
int p4 = p3+d;
size(200, 200);
background(0);
//Draw line from location (50,50) until (100,150)
stroke(255);
line(50, 50, 100, 150);
// Draw gray box
stroke(255);
line(p3, p3, p2, p3);
line(p2, p3, p2, p2);
line(p2, p2, p3, p2);
line(p3, p2, p3, p3);
// Draw white points
stroke(255);
point(p1, p1);
point(p1, p3);
point(p2, p4);
point(p3, p1);
point(p4, p2);
point(p4, p4);
Input Program
 Output Program

3.6 Program 2.2

Listing Program
size(200, 200);
background(0);
// Draw white line standart
stroke(255);
line(25, 5, 175, 5);
// Draw red line
stroke(255,0,0);
line(25, 25, 175, 25);
// Draw Green line with 5 points thicknes
stroke(0,255,0);
strokeWeight(5);
line(25, 50, 175, 50);
//Draw Blue line with 10 thickness and square tip line
stroke(0,0,255);
strokeWeight(10);
strokeCap(SQUARE);
line(25, 75, 175, 75);
Input Program
 Output Program

3.7 Program 2.3

Listing Program
size(400,150);
background(255);
//draw ellipse
fill(255,0,0);
ellipse(50,50,75,100);
// draw arc 90 degree clockwise
fill(0,0,255);
arc(100,50,100,100,0,1.57);
// draw arc 90 degree
fill(0,255,0);
arc(175,50,100,100,(0*PI)/180,(90*PI)/180);
// draw arc 90 degree
noFill();
stroke(255,0,0);
arc(250,50,100,100,(0*PI)/180,(90*PI)/180);
Input Program
 Output Program

3.8 Program 2.4

Listing Program
size(200, 200);
smooth();
background(0);
noStroke();
fill(226);
triangle(10, 10, 10, 200, 45, 200);
rect(45, 45, 35, 35);
quad(105, 10, 120, 10, 120, 200, 80, 200);
triangle(160, 10, 195, 200, 160, 200);
Input Program

Output Program
 BAB IV

PENUTUP

4.1 Kesimpulan
Grafika Komputer (Computer Graphic) adalah seperangkat alat yang terdiri dari
hardware dan software untuk memproduksi suatu gambar, grafik atau citra realistic
untuk seni, game computer, foto dan film animasi. Processing merupakan perangkat
lunak open source yang menyediakan bahasa pemrograman dan lingkungan
pemrograman bagi orang-orang yang ingin membuat program pengolahan citra,
animasi dan suara. Dalam grafika computer terdapat 4 elemen dasar grafik yaitu titik
(point) garis (line) bentuk segi bentuk bundar.

4.2 Saran
Dari penerapan di atas maka sebaiknya kita lebih memperdalam lagi ilmu tentang
grafika komputer dan lebih memahami bahasa pemrograman processing yang masih
baru untuk kita, agar kita lebih memahami logika dalam membuat bentuk-bentuk
gambar dua di mensi, dan nantinya kita dapat mengkombinasikannya untuk
menghasilkan suatu grafik atau gambar yang menarik. Dan yang terpenting dalam
membuat program di processing adalah harus benar-benar paham dengan titik
koordinat dan margin agar lebih mudah dalam membuat sebuah gambar.