Anda di sini

Pemrograman

[TUTORIAL] Menyertakan Gambar dan Tulisan pada Pemrograman Processing

Kusuma Wardana - 06 Desember 2015 11:56:13 0

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.

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);
}

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); 
}

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.

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);
}

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

9.169
Daftar Artikel Terkait
Image

Kusuma Wardana

I Nyoman Kusuma Wardana, yang akrab dipanggil Kusuma, lahir dan besar di Bali. Ia tinggal di Desa Wisata Ubud, dan lebih banyak melaksanakan aktivitasnya di Denpasar. Profesinya adalah sebagai staf pengajar di Jurusan Teknik Elektro, Politeknik Negeri Bali. Saat ini Ia menjadi salah satu penulis di tutorkeren.com.

Artikel Menarik Lainnya
Mari Gabung

Halo Emo 51 , Ada yang ingin disampaikan? Jangan sungkan untuk gabung diskusi ini. Silahkan Login dulu atau Daftar baru.