Delila Fauziyyah Septarini

TI MSU 4A
4817090125

GRAFIKA KOMPUTER
VARIABEL
I. TUJUAN
- Mahasiswa dapat membuat program untuk menggambar bentuk-bentu
dasar (Basic Shape)
- Mahasiswa dapat mengkombinasikan bentuk-bentuk dasar menjadi sebuah
bentuk baru yang lebih kompleks.

II. DASAR TEORI

Suatu variable menyimpan nilai ke dalam memori sehingga dapat digunakan
kembali
dalam suatu program. Variable dapat digunakan berulang kali dalam satu
program dan nilainya dengan mudah dapat diubah saat program sedang
dijalankan. Tujuan uatama menggunakan variable adalah untuk menghindari
pengulangan penulisan syntax program. Jika terjadi penggunaan suatu angka
secara berulang pada satu program maka penggunaan variable dapat
dipertimbangakan sehingga program yangdibuat dapat menjadi lebih
efisien(mudah diupdate) dan ringkas.

Percobaan 1: Gunakan Kembali Nilai yang Sama

Coba membuat tiga lingkaran dengan koordinat y dan diameter memiliki nilai
yang sama sehingga dapat digunakan suatu variable agar tidak perlu
mengulang penulisan angkaangka yang sama dalam setiap parameter dan coba
analisa hasilnya.
- size (480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- int y = 60; integer variable y memiliki parameter 60
- int d = 80; integer variable d memiliki parameter 80
- ellipse(x, y, width, height) yaitu ellipse(75, y, d, d); ellipse(175, y, d, d);
ellipse(275, y, d, d); merupakan perintah untuk membuat sebuah lingkaran,
pada kode yang tertera menunjukkan 3 parameter ellipse yang berbeda di x,
tetapi pada parameter y, width, height sama semua yaitu y, d, d. Yang
memiliki valuenya y = 60 dan d = 80. Ellipse pertama di x = 75, ellipse kedua
di x = 175, dan ellipse ketiga di x = 275.

Percobaan 2 : Ubah nilai variable

Dari program pertama coba ubah nilai variable yang telah dibuat. Dan analisa
hasil tampilannya.
- size (480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- int y = 100; integer variable y memiliki parameter 100
- int d = 130; integer variable d memiliki parameter 130
- ellipse(x, y, width, height) yaitu ellipse(75, y, d, d); ellipse(175, y, d, d);
ellipse(275, y, d, d); merupakan perintah untuk membuat sebuah lingkaran,
pada kode yang tertera menunjukkan 3 parameter ellipse yang berbeda di x,
tetapi pada parameter y, width, height sama semua yaitu y, d, d. Yang
memiliki valuenya y = 100 dan d = 130. Ellipse pertama di x = 75, ellipse
kedua di x = 175, dan ellipse ketiga di x = 275.

Variabel
Saat ingin menggunakan variable, yang harus ditentukan adalah nama, tipe
data, dan nilai variable itu sendiri. Nama variable yang dipilih akan menjadi
nama yang akan digunakan untuk memanggil variable tersebut sehingga
pilihlah nama yang informatif mengenai data variable yang akan dibuat dan
tidak terlalu panjang. Misalnya nama variable “radius” akan lebih jelas
dimengerti daripada dari pada nama variable “r”.
Range nilai yang dapat disimpan dalam suatu variable didefinisikan oleh tipe
data variable. Missal untuk bilangan bulat bisa digunakan tipe data “int” untuk
integer. Beberapa jenis data yang lain adalah : integers, floating-point
(decimal) numbers, characters, words, images, fonts, dll. Pertama kali variable
harus dideklarasikan dulu mulai dari namanya dan tipe datanya, setelah itu
baru kita bisa memasukkan nilai dari variable tersebut.
int x; // Declare x as an int variable
x = 12; // Assign a value to x

kode yang sama tapi bisa ditulis dengan lebih ringkas sbb:

int x = 12; // Declare x as an int variable and assign a value

tipe data hanya perlu dituliskan saat deklarasi variable diawal. Unutk
pemanggilan variable berikutnya tipe data tidak perlu dituliskan kembali.
Setiap kali tipe data dituliskan maka komputer mengartikan bahwa kita akan
mendeklarasikan suatu variable baru. Selain itu tidak bisa ada dua variable
dengan nama yang sama dalam suatu program.

int x; // Declare x as an int variable

int x = 12; // ERROR! Can't have two variables called x here

setiap tipe data menyimpan jenis data yang berbeda-beda. Contohnya int
hanya bisa menyimpan nilai bilang bulat tanpa bilangan decimal sama sekali.
Sedangkan tipe data float bisa menyimpan data bilangan bulat maupun
decimal.

int x = 12.2; // ERROR! A floating-point value can't fit in an int

float x = 12; // Automatically converts 12 to 12.0

Processing memiliki serangkaian variable khusus untuk menyimpan

informasi saat suatu program sedang dijalankan. Contohnya parameter width
dan height dari jendela tampilan. Nilai dari kedua parameter ini di dapat dari
fungsi size(). Kedua nilai tersebut bisa menjadi tolak ukur atau nilai parameter
dalam menggambarkan elemen-elemen lainnya.
 Percobaan 3 : Adjust the Size

Dari contoh dibawah cobalah ubah kedua nilai parameter fungsi size().
Analisa hasilnya.

- size (480, 120); merupakan perintah untuk menampilkan dispay window

dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- line(0, 0, width, height); garis akan membentang dari titik (0,0) lalu ke
(480,120)
- line(width, 0, 0, height); garis akan membentang dari titik (480, 0) lalu ke (0,
120)
- ellipse(width/2, height/2, 60, 60); akan membentuk lingkaran dengan ukuran
x = width/2 yaitu x = 480/2 = 240 dan ukuran y = height/2 yaitu y = 120/2 =
60. Dan nilai width dan height sama – sama 60 yang meposisikan lingkaran
ditengah-tengah.
Aritmatika Dasar

Banyak asumsi bahwa matematika dan pemrograman merupakan hal yang

sama. Meskipun pengetahuan matematika bisa bermanfaat bagi beberapa jenis
coding,akan tetapi aritmatika dasar menjadi bagian yang paling penting dari
matematika pemrograman. Beberapa operator untuk matematika dasar adalah
sbb:

simbol seperti +, -, dan * disebut operator. Saat symbol tersebut ditempatkan

di antara dua nilai, maka hal itu disebut sebagai Expression. Misalnya, 5 + 9
dan 1024 - 512 keduanya adalah Expression.

Kedudukan setiap operator aritmatika diatas pun berbeda-beda, misalya jika

ada syntax seperti ini :
int x = 4 + 4 * 5; // Assign 24 to x

Maka yang akan diproses terlebih dahulu adalah 4*5 setelah itu baru
ditambahkan dengan 4. Urutan operator paling tinggi ke paling rendah adalah
Kurung, Eksponen, Perkalian, Pembagian, Penambahan, Pengurangan.
Sehingga jika ingin operator tambah didahulukan sebelum perkalian kita bisa
gunakan tanda kurung pada operator tambah seperti berikut :

int x = (4 + 4) * 5; // Assign 40 to x

Selain itu penulisan syntax aritmatika dasar dapat disederhanakan dalam

beberapa bentuk seperti contoh dibawah ini:

x += 10; // This is the same as x = x + 10

y -= 15; // This is the same as y = y – 15
x++; // This is the same as x = x + 1
y--; // This is the same as y = y – 1
 Percobaan 4 : Penggunaan Aritmatika Dasar

Dari contoh program dibawah ini cobalah mengubah aritmatika koordinat

posisinya sehigga susunannya manjadi seperti susunan tangga, dan analisa
hasilnya:

- size(480, 120); merupakan perintah untuk menampilkan dispay window

dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- int x = 25; integer variable x memiliki value 25
- int h = 20; integer variable h memiliki value 20
- int y = 25; integer variable y memiliki value 25
- rect(x, y, 300, h); akan membentuk persegi panjang dengan x = 25, y = 200,
width = 300, dan height = 20
- x = x + 100; memberikan nilai x menjadi x = 125 yang kemudian value x
akan diterapkan ke code setelahnya sehingga rect(x, y + h, 300, h); akan
membentuk persegi panjang dengan x = 125, y = y+h = 25 + 20 sehingga y =
45, width = 300 dan height = 20.
- x = x - 250; memberikan nilai x menjadi x = -225 yang kemudian value x
akan diterapkan ke code setelahnya sehingga rect(x, y + h*2, 300, h); akan
membentuk persegi panjang dengan x = -225, y = y+h*2 = 25+20*2 sehingga
y = 65, width = 300 dan height = 20.

Pengulangan
Saat menulis program yang lebih banyak maka akan terlihat bahwa ada pola
ketika baris kode diulang, tetapi dengan sedikit variasi. Sebuah struktur kode
yang disebut perulangan memungkinkan untuk menjalankan baris kode lebih
dari sekali dengan hanya menggunakan baris kode yang ebih singkat. Ini
membuat program lebih modular dan lebih mudah untuk diubah-ubah sesuai
keinginan.

Percobaan 5 : Coba buat listing program yang sama berulang-ulang sehingga

menghasilkan banyak gambar yang sama dan buat 1 program lagi dengan hasil
gambar yang sama tetapi menggunakan perulangan sehingga syntax program
menjadi lebih singkat. Seperti contoh berikut dan analisa hasilnya:
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- strokeWeight(8); strokeWeight akan memberikan ketebalan garis dengan
ukuran 8 pixels pada code berikutnya yaitu : line(20, 40, 80, 80); line(80, 40,
140, 80); line(140, 40, 200, 80); line(200, 40, 260, 80); line(260, 40, 320, 80);
line(320, 40, 380, 80); dan line(380, 40, 440, 80)

Dengan syntax program yang lebih sederhana bisa didapatkan hasil gamar
yang sama sbb:
Dapat dilihat penggunaan ‘for’ diatas diikuti dengan tanda { dan } dimana
seluruh program dalam tanda {} akan dilakukan secara berulang-ulang.
Sedangkan 3 parameter yan terdapat di dalam tanda kurung () diatasna
merupakan paremeter yang membatasi sampai berpa kali syntax program
yang ada pada tanda {} akan diulang. 3 parameter tersebut adalah berfungsi
sebagai sebagai inisialisasi (init), tes, dan pembaruan/update. Sehingga syntax
umum untuk looping menggunakan for adalah sbb:

for (init; test; update) {

statements
}

Init menetapkan nilai awal, seringkali mendeklarasikan variabel baru untuk

digunakan dalam for loop. Dalam contoh sebelumnya, bilangan bulat bernama
i dideklarasikan dan disetel ke 20. Nama variabel i sering digunakan, tetapi
tidak harus menggunakan nama variable I tersebut. Nilai parameter
berikutnya yaitu untuk mengevaluasi nilai variabel ini (di sini, ia memeriksa
apakah saya masih kurang dari 400), dan pembaruan mengubah nilai variabel
(menambahkan 60 sebelum mengulangi loop). Berikut adalah flow diagram
untuk loop for:

Beberapa operator yang biasa digunakan untuk parameter loop for unyuk
“test”:

Percobaan 6 : Modifikasi sedikit (update) salah satu nilai parameter syntax

dari loop for pada percobaan 5 sehingga menghasilkan pola yang berbeda.
seperti berikut dan analisa hasilnya:
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- strokeWeight(2); strokeWeight akan memberikan ketebalan garis dengan
ukuran 2 pixels pada code berikutnya.
- for (int i = 20; i < 400; i += 8) {
line(i, 40, i + 60, 80);
} for akan melakukan looping pada garis hingga i < 400, dengan value
parameter x1 dan x2 yang berbeda.

Percobaaan 7: Cobalah modifikasi program yang berada didalam tanda { dan

} sehingga tampilan gambar juga menjadi berubah seperti berikut dan analisa
hasilnya:
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- strokeWeight(2); strokeWeight akan memberikan ketebalan garis dengan
ukuran 2 pixels pada code berikutnya.
- for (int i = 20; i < 400; i += 20) {
line(i, 0, i + i/2, 80);
} for akan melakukan looping pada garis 1 dan 2 hingga i < 400, dengan value
parameter x1 dan x2 yang berbeda. Dengan x1 = i dan x2 = i + i/2.

Percobaan 8 : Cobalah untuk menambahkan line program di dalam tanda {

dan } sehingga membuat gambar garis menjadi menekuk, seperti berikut dan
analisa hasilnya:
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- strokeWeight(2); strokeWeight akan memberikan ketebalan garis dengan
ukuran 2 pixels pada code berikutnya.
- for (int i = 20; i < 400; i += 20) { for akan melakukan looping pada garis 1
dan 2 hingga i < 400, dengan value parameter x1 dan x2 yang berbeda.
- Dengan line(i, 0, i + i/2, 80); x1 akan sesuai dengan looping i dan x2 akan
dihitung dengan x2 = i+i/2
- line(i + i/2, 80, i*1.2, 120); x1 akan sesuai dengan looping x1 = i + i/2 dan
x2 akan dihitung dengan x2 = i*1.2
- }, menutup looping for.

Percobaan 9 : Membuat Loop di dalam loop. KEtika suatu loop berada dalam
loop maka perulangan akan dikalikan. Seperti contoh dibawah ini dan analisa
hasilnya:
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- background(0); untuk memberikan tampilan pada display window dengan
warna hitam saat code dieksekusi.
- noStroke();code yang akan menghilangkan garis pada code berikutnya.
- for (int y = 0; y <= height; y += 40) { for akan melakukan looping y hingga
y <= height. Dimana height = 120
- for (int x = 0; x <= width; x += 40) { for akan melakukan looping x hingga x
<= width. Dimana width = 480.
- fill(255, 140); yang akan memberi warna abu-abu terang terhadap code
berikutnya.
- ellipse(x, y, 40, 40); akan membentuk ellipse hinnga x <= width dan y <=
height.

Percobaan 10 : Perulangan yang saling berbatasan. Program perulangan

dibuat menjadi dua kali tetapi tidak berada dalam perulangan yang lain, seperti
membuat loop untuk baris dan kolom. Cobalah program dibawah ini dan
analisa hasilnya:
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- background(0); untuk memberikan tampilan pada display window dengan
warna hitam saat code dieksekusi.
- noStroke();code yang akan menghilangkan garis pada code berikutnya.
- for (int y = 0; y < height+45; y += 40) { akan melakukan looping terhadap
ellipse(0, y, 40, 40); hingga y < height + 45 yaitu y < 165. fill(255, 140); dan
akan memberikan warna kepada ellipse dengan warna abu-abu.
- for (int x = 0; x < width+45; x += 40) { akan melakukan looping terhadap
ellipse(x, 0, 40, 40); hingga x < width + 45 yaitu x < 525. fill(255, 140); dan
akan memberikan warna kepada ellipse dengan warna abu-abu.

Percobaan 11: Cobalah beberapa pengembangan program menggunakan

loop dibawah ini dan analisa hasilnya:
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- background(0); untuk memberikan tampilan pada display window dengan
warna hitam saat code dieksekusi.
- fill(255); yang akan memberi warna putih terhadap code berikutnya.
- stroke(102); memberi warna abu-abu pada garis.
for (int y = 20; y <= height-20; y += 10) { akan melakukan looping terhadap
ellipse(x, y, 4, 4); dan line(x, y, 240, 60); hingga y < = height – 20 yaitu y <=
100
- for (int x = 20; x <= width-20; x += 10) { akan melakukan looping terhadap
ellipse(x, y, 4, 4); dan line(x, y, 240, 60); hingga x < = width – 20 yaitu x <=
460
- size(480, 120); merupakan perintah untuk menampilkan dispay window
dengan ukuran 480 x 120 pixel. Width: 480 dan Height: 120
- background(0); untuk memberikan tampilan pada display window dengan
warna hitam saat code dieksekusi.
for (int y = 32; y <= height; y += 8) { akan melakukan looping terhadap
ellipse hingga y <= height yaitu y <=120 dan parameter untuk ellipse(x, y,
width, height) = (x + y, y, 16 - y/10.0, 16 - y/10.0);
for (int x = 12; x <= width; x += 15) { akan melakukan looping terhadap
ellipse hingga x <= width yaitu x <=480 dan parameter untuk ellipse(x, y,
width, height) = (x + y, y, 16 - y/10.0, 16 - y/10.0);
III. LATIHAN
Buatlah program menggunakan loop sehingga menghasilkan gambar dibawah
ini:

a. Processing code untuk nomor 1:

- size (300, 300); merupakan perintah untuk menampilkan dispay window

dengan ukuran 300 x 300 pixels. Width: 300 dan Height: 300
- for (int x = 0; x < 100; x++){ melakukan looping untuk x hingga x <100
- for(int y = 0; y < 100; y++){ melakukan looping untuk y hingga y < 100
- noStroke(); menghilangkan ketebalan garis.
- fill((x+y) *14); memberikan warna sesuai dengan looping for yang ada
untuk x dan y sehingga menampilkan warna seperti hasil eksekusi code
diatas.
- rect(x*30, y*30, 50, 50); membuat segiempat sesuai dengan looping for
untuk parameter x dan y.

b. Processing code untuk nomor 2:

- Size (300, 300); merupakan perintah untuk menampilkan dispay window

dengan ukuran 300 x 300 pixels. Width: 300 dan Height: 300
- strokeWeight(3); memberi ketebalan garis pada rect.
- rectMode(CENTER); membuat bentuk segiempat di mulai ditengah
- for (int z = 0; z < 50; z+= 10){ melakukan looping untuk z hingga z <50
- for (int x = 0; x < 10; x++){ melakukan looping untuk x hingga x <10
- for (int y = 0; y < 10; y++){ melakukan looping untuk y hingga y <10
- rect (x*50, y*50, 50-z, 50-z); membuat segiempat sesuai dengan looping for
untuk parameter x, y, width, dan height.