KOMPUTER GRAFIK 45

BAB 4
MENYERTAKAN GAMBAR DAN TULISAN
PADA PEMROGRAMAN PROCESSING

Memasukkan Gambar
Processing dilengkapi dengan fasilitas yang memungkinkan dapat
memasukkan gambar ke Display Window. Terdapat tiga langkah yang dapat
dilakukan, yaitu sebagai berikut:
1. Import gambar ke folder data sketch
2. Buat variabel PImage untuk menyimpan gambar
3. Load gambar ke dalam variabel dengan fungsi loadImage()

Import File Gambar

Kliklah Sketch - Add File... , kemudian pilih gambar yang ingin dimasukkan ke
dalam sketch. Setelah memilih, tekanlah tombol Open. Selanjutnya, layar
akan kembali ke jendela awal.

Gambar 38. Import file gambar

Menyertakan File Gambar dalam Skrip Program

Setelah langkah pertama selesai dilakukan, maka langkah kedua dan ketiga
dilakukan melalui skrip program. Amatilah contoh skrip program berikut:

46 KOMPUTER GRAFIK
Contoh: Menampilkan Gambar
Program 4.1
Script: Hasil:

PImage gambar;
void setup(){
size(633, 633);
gambar =
loadImage("fikom.png"
);
}

void draw(){
image(gambar, 0, Gambar 39. Menampilkan gambar jika
0); berhasil
}

Jika Salah:

Gambar 40. Jika gambar salah nama atau tidak didalam 1 folder

Catatan :
Pastikan sudah disimpan, dan file gambar dijadikan 1 folder.

KOMPUTER GRAFIK 47
 Gambar 41. Lokasi Penyimpanan gambar
Contoh berikut digunakan untuk menampilkan gambar lebih dari satu pada
jendela Display:
Program 4.2
Script: Hasil:
PImage gambar1;
PImage gambar2;
void setup(){
size(800, 430);
gambar1 =
loadImage("fikom.jpg
");
Gambar 42. Menampilkan gambar lebih
gambar2 =
dari 1
loadImage("fikom
b.jpg");
}

void draw(){
image(gambar1, 10,
10);
image(gambar2,
400, 10);
}

Menampilkan Tulisan
Tulisan dapat ditambahkan pada Display Window, langkah pertama yang
harus dilakukan adalah melakukan konversi salah satu jenis font yang ada di
kompuler menjadi berformat VLW (Video Linkwell Document). Konversi ini
dilakukan untuk mengubah tulisan menjadi gambar. Untuk melakukan hal ini,
carilah Tools -> Create Fonts.

48 KOMPUTER GRAFIK
Gambar 43. Create Font
Selanjutnya, akan muncul jendela Create Font. Pilihlah salah satu font yang
ingin digunakan. Perhatikanlah menentukan ukuran font yang akan
digunakan. Semakin besar ukuran tulisan, maka akan semakin besar pula
ukuran file dalam format VLW.

Gambar 44. Jendela Create Font

Setelah melakukan konversi, buatlah sebuah variabel PFont yang akan

digunakan untuk menyimpan font . Muati (load) font ke variabel menggunakan
fungsi loadFont(). Gunakanlah fungsi textFont() untuk melakukan seting
terhadap font.

KOMPUTER GRAFIK 49
Selanjutnya, ketiklah contoh skrip program berikut dan amatilah hasilnya:
Contoh: Menampilkan Tulisan
Program 4.3
Script: Hasil:

PFont tulisan;

void setup() {
size(800, 150); Gambar 45. Hasil Tulisan
smooth();
tulisan =
loadFont("AdobeDevanag
ari-BoldItalic-48.vlw");
textFont(tulisan);
}

void draw() {
background(0);
textSize(36);
text("Ilmu Komputer UM
Metro", 25, 60);
textSize(18);
text("Program Studi Ilmu
Komputer UM Metro", 27,
90);
}

TUGAS
1. Gantilah dengan tulisan:
Fakultas Ilmu Komputer
Solusi Sukses Masa Depam
2. Ganti warna background serta warna fontnya

50 KOMPUTER GRAFIK