[TUTORIAL] Menyertakan Gambar dan Tulisan pada Pemrograman Processing

Memasukkan Gambar

Processing dilengkapi dengan fasilitas yang memungkinkan kita 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. 

[[{"fid":"363","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Import Gambar","field_file_image_title_text[und][0][value]":"Processing Import Gambar"},"type":"media","link_text":null,"attributes":{"alt":"Processing Import Gambar","title":"Processing Import Gambar","height":"286","width":"380","class":"media-element file-default"}}]]

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:

PImage gambar;
void setup(){
  size(740, 380);
  gambar = loadImage("jagannath.jpg");
}

void draw(){
  image(gambar, 0, 0);
}

[[{"fid":"364","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menampilkan gambar tunggal","field_file_image_title_text[und][0][value]":"Processing Menampilkan gambar tunggal"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menampilkan gambar tunggal","title":"Processing Menampilkan gambar tunggal","height":"335","width":"602","class":"media-element file-default"}}]]

Contoh berikut digunakan untuk menampilkan gambar lebih dari satu pada jendela Display:

PImage gambar1;
PImage gambar2;

void setup(){
  size(850, 330);
  gambar1 = loadImage("Koala.jpg");
  gambar2 = loadImage("Penguins.jpg");
}

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

[[{"fid":"365","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menampilkan dua gambar","field_file_image_title_text[und][0][value]":"Processing Menampilkan dua gambar"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menampilkan dua gambar","title":"Processing Menampilkan dua gambar","height":"256","width":"602","class":"media-element file-default"}}]]

Menampilkan Tulisan

Kita dapat menambahkan tulisan pada Display Window kita. Langkah pertama yang harus dilakukan adalah melakukan konversi salah satu jenis font yang ada di komputer kita menjadi berformat VLW (Video Linkwell Document). Konversi ini dilakukan untuk mengubah tulisan menjadi gambar. Untuk melakukan hal ini, carilah Tools → Create Fonts.

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.

Setelah melakukan konversi, buatlah sebuah variabel PFont yang akan digunakan untuk menyimpan font kita. Muati (load) font ke variabel menggunakan fungsi loadFont(). Gunakanlah fungsi textFont() untuk melakukan seting terhadap font.

[[{"fid":"366","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Create Font","field_file_image_title_text[und][0][value]":"Processing Create Font"},"type":"media","link_text":null,"attributes":{"alt":"Processing Create Font","title":"Processing Create Font","height":"476","width":"396","class":"media-element file-default"}}]]

Selanjutnya, ketiklah contoh skrip program berikut dan amatilah hasilnya:

PFont tulisan;

void setup() {
  size(500, 150);
  smooth();
  tulisan = loadFont("AGaramondPro-Italic-48.vlw");
  textFont(tulisan);
}

void draw() {
  background(0);
  textSize(36);
  text("Robotics and Embedded Systems", 25, 60);
  textSize(18);
  text("Robotics and Embedded Systems", 27, 90);
}

[[{"fid":"367","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menampilkan Tulisan","field_file_image_title_text[und][0][value]":"Processing Menampilkan Tulisan"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menampilkan Tulisan","title":"Processing Menampilkan Tulisan","height":"148","width":"498","class":"media-element file-default"}}]]

Demikian tutorial kali ini. Pada tulisan selanjutnya, kita akan membahas mengenai respon dan gerakan (Bersambung)...